初めに
今回は、入社してからの第二の師匠である、今は別の会社でリーダーをやっている先輩社員が退職する一月前にぽろっと言い残していったキーワードに入門してきたので感謝の意を込めてブログにしていこうと思います。
技術的なお勉強をするためには師匠の存在が不可欠です。いろんな宗派の宗教に入信するようなものです。そう考えるとだいぶ浮気性ですが、学びを深めるためには仕方ないとして甘んじて「遊び人」の称号を受け取りましょう。ちなみに第一の師匠はまだ在籍しています。別の部署に努めているので一緒に仕事はなかなかできませんが、今でも接点があるので喜んで入信しています。ちなみに前置きは全く関係ありません。
という訳で今回のお話は「microCMS」です。一ミリも知らない状態からスタートして、素晴らしい点と活用方法までざっくりと話を進めていければなと思っています。感想だけを投げておきますね。
microCMSって何？
「microCMS」とは何か？という話をここでざっくりと入門できれば良いなと思っています。公式サイトのトップに書いてあることは以下になります。
microCMSはAPIベースの日本製ヘッドレスCMSです。
快適な管理画面により、開発・運用コストを大きく削減することで、ビジネスを加速させます。
唐突に「CMS」という単語が出てきましたね。もしこの単語を知っていればこの章の内容はすっ飛ばしてもらって大丈夫です。「CMS」は「Contents Management System：コンテンツ・マネジメント・システム」の略になります。有名などころで言うと「Wordpress」などが当てはまりますね。簡単に言うとWebサイトのコンテンツ管理を容易にしてくれるものになります。GUIでポチポチ、Markdownで書けばサイトが出来上がる素晴らしいサービスになります。
「microCMS」はAPIベースであるCMSとあります。APIベース？と疑問に思うかもしれません。端的に言うとサイトの構築機能がないCMSです。データベースとAPIをGUIで構築できるのが「microCMS」という認識です。「microCMS」でできることできないことをざっくりとまとめます。
推しポイントとしては、データ入力画面のUIがリッチである点です。エンジニアの場合だとDBを見ながらデータを追加することはできます（めっちゃ大変ですけど）。じゃあそこを自作しようとするとめちゃんこ時間が必要になります。そこを丸まる「microCMS」に置き換えることでサクッとモダンなUIでデータ入力画面が構築することができます（ついでにAPIも作ってくれる…神か？）。そして意外と大変な画像を保存するサービスもあります。コンテンツ管理に必要な機能が大体そろっているわけですね。ちなみに画面はこんな感じ。
その一方でサイトの構築機能がないので、サイトのデザインテンプレートは自力で作成が必要です。この辺はフロントエンドエンジニアの腕の見せ所です。
ちょっと真剣な話
感動についてはお話しできたので、実際に運用していくにあたって必要そうな情報について触れていきたいと思います。
価格
自主開発に関係してくる話かなと思います。なるべくランニングコストを抑えたい人に朗報です。月額無料のHobbyプランが存在しています。詳細な情報については公式サイトを参照しましょう。ざっくりと開発に関係している情報だけは下にまとめておきます。
「メディアのストレージ容量」が無制限なのはうれしいですね。特に気にするべき内容としては「データ転送量」と「API数（DBのテーブル数）」という部分だと思います。「API数（DBのテーブル数）」に関しては、GUIで設定するので視覚的にわかりやすい制限です。「データ転送量」は構築の仕方によって、加算されるタイミングが異なるので構築方法次第というところです。
無料プランなので制限があるのは当然ですが、制限があっても十分便利です。もしお金が潤沢にある人は、「Hobby」プランを経由して有料版の契約をしてしまいましょう。
今後の活用を考えるなら
無料の枠で納めたい場合は、「データ転送量」について気にする必要があります。そしてこの話をするためには、「SPA」「SSR」「SSG」について話をしていかないといけません。ふんわりと用語だけ知っていましたがちゃんと調べたことはなかったのでちょっと入門していきます。
どうやら「どのタイミングで情報を取得するか」という違いで、コンテンツの描画速度に関係している内容のようです。以下に早見図を用意しておきます。
異なる点としては、情報取得（API）部分になります。SSRとSSGの違いとしては、クライアントからアクセスがあった際に、情報を取ってくるのがSSRです。ビルド時にデータを取ってきてサイトを構築しており、クライアントからアクセスがあった際には構築済みのページを渡すのがSSGです。
三つの分類で重要になるのはAPIレスポンスの回数になります。SPAやSSRではページにアクセスするたびにAPIのアクセスが発生します。一方でSSGではビルド時のみAPIのアクセスが発生します。これは大きな違いですね。SPAとSSRではリロードしまくったらその数だけAPIアクセスが発生するので、悪意がある人がブログにアクセスするとmicroCMSの制限をパンパンにすることができてアプリのアクセスを落とせることになります。
それを防止する意味でも、microCMSでアプリを作るのであればSSGで構築するのが良いのでは？という結論に至りました。ちなみに「Webhookを活用して、ビルドを走らせる機能」がmiroCMSにあります。素晴らしいですね。
終わりに
お疲れ様です。今回は「microCMS」について感動したので記事で紹介させていただきました。構築については、何かを作ってみてまた報告を入れたいと思います。
直近の課題としては、「新しい技術の情報を仕入れる」と「今の技術を実務レベルまで押し上げる」の二点が課題だと思っています。なかなか難しいですね。
次回は、ちゃんと作った物をベースにお話しできれば良いなと思ってます！！
結構良い出来だったブログの記事を張っておきます。新米フロントエンジニアがUXを考える
それではまた！
