モダンなWeb界隈調査【ヘッドレスCMS】
あらすじ
前回このような記事を書きました。やっぱり色々と勉強していましたが、モダンな情報を調べて自分の知識の穴を縫っていく方が明らかに効率が良いことを痛感しています。その為にはネットの海を彷徨う事の重要性が身に染みます。
melheaven.hatenadiary.jp
ヘッドレスCMSとは
何じゃそれ・・・。CMSはWebサイトを構成するコンテンツ（文章や画像、動画）を一元で管理するシステムです。さらに具体的に説明すると、CMSはフロントエンド機能である『コンテンツを表示するView』とバックエンド機能である『API経由でコンテンツを取得する機能』により成立しています。CMSではWordpressが有名ですね。
ヘッド=Viewを指しており、ヘッドレスCMS = 後者の『API経由でコンテンツを取得する機能』のみのCMSであるという事です。
ヘッドレスCMSで何ができるか？
ブログの場合だと、サービス上の入力フォームから記事コンテンツを登録して、登録データをAPIとして公開してくれます。
サイトにアクセスがあった場合に、サイトからヘッドレスCMSに登録されたコンテンツをAPIで呼び出すシステムとなります。
www.maxmouse.co.jp
通常CMSの問題点
CMSの何がいけなかったのでしょうか？ヘッドレスCMSでなくてはならなかった理由は何なのか？
CMSでの欠点は以下の通りです。
- フロントエンド+バックエンドを同一的にCMSが管理している為、片方のシステムを変更したい時、もう片方に影響が出る
- フロントエンド（デザインなど）の自由度が低め
- 動的ファイル+コンテンツデータのやり取りから、HTMLの生成を行う為、表示速度が遅い
- 上記に加えてセキュリティリスクが高い
ヘッドレスCMSの強み
上記の通常CMSの問題点がヘッドレスCMSに繋がってきます。
1と2に関しては、フロントエンドとバックエンドの機能を独立化できる為、一方のコード変更が他方に及ぼす影響は薄いことが強みです。つまりバックエンドの事を考えずに、フロントエンド設計をできます。時代に沿うようなモダンなフロントエンドを考えている場合や経験豊富なフロントエンドエンジニアがいる場合はこちらのメリットが光りますね。
3に関しては、以前のSSGやJamSTackと組み合わせることでさらに利点が光ります。ヘッドレスCMS+静的サイトジェネレータで既にコンテンツが表示されたHTMLを配信しているのみで表示速度が向上します。
4に関しては、配信ファイルがHTML/CSS/JavaScriptのみで構成されたファイルなので、システムの堅牢性向上に繋がります。
ただ学習コストが通常CMSと比較して高めなので、時間が迫られていて技術にに自信がない場合は選択する必要はなさそうです。
有名どころだとmicroCMSやContentfulなどがあります。
あるサーバーのコンテンツ管理用のヘッドレスCMSでコンテンツを呼び出し、静的サイトジェネレータで静的ファイルに出力します。
これで静的ファイルを閲覧者の元へ配信すれば良いだけなのです。
