yuheijotaki.com

JAMstack と Headless CMS

Headless CMS について調べる用事があったのですが、関わりが深そうな JAMstack についても調べてみました。

f:id:jotaki:20200106110409j:plain

JAMstack とは？

JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWeb開発アーキテクチャで、Webサーバーには依存しません。

引用元： クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか | コリス

Netlify の創業者発の言葉で JavaScript / API / Markup の頭文字をとったものとのこと。
こういう名前のサービス名ではなく思想またはアーキテクチャのこと。

生成された静的HTMLのホスティングサービスとしては Netlify や Firebase を使うのが一般的のよう。

Headless CMS とは？

ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。

ではヘッドレスCMSの場合、ビューはどうするのか？
CMS外で、自作する必要があります。

引用元： ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！

管理画面（コンテンツ編集者側）とフロント表示（訪問者側）を切り離して、間にAPIを持たせるサイトにおける管理画面側が Headless CMS ということのようです。

管理画面側は WordPress 使ってフロントを REST API から受けても純粋な Headless CMS ではなさそうな感じですね。この場合は WordPress as a Headless CMS と定義したほうがわかりやすそう。

Headless CMS を使って作られたフロント表示は JavaScript / API / Markup が使われる（ことが大半）なので JAMstack アーキテクチャを採用したサイトと定義できるかと思います。

Headless CMS のメリット・デメリット

引用元： Headless CMS - Qiita

メリット

  • フロントエンド側の自由度が高まる
  • 配信対象の拡大
  • フロントとバックエンドの開発分離

デメリット

  • 開発が専門的になり、開発工数が増加する
  • APIの品質への要求が高い

いろいろ記事を読んでいたのですが、あまり小規模なWebサイトに向いていないという意見と、一部分にも適用できるから導入が楽、という見方が混在していました。
あとはデメリットとして開発コスト増につながりますが、下書きプレビューがしづらいという意見も多くありました。

主な Headless CMS サービス

Flamelink は Firebase で作られたCMSなのでちょっと毛色は違うと思いますが、海外では Contentful と Strapi のどっちがいいのみたいな話になっているようです。
参考： Contentful vs Strapi | 違いは何ですか？

microCMS は日本製で比較的新しいサービス。比較は下記記事などが詳しいです。

まとめ

2019年から熱気を帯びてきた感じのする JAMstack / Headless CMS というワードですが、概要などなんとなく掴めたので今度は実際になにか作ってみたいと思います。

個人的には管理画面や仕組み的にも WordPress に慣れているので Nuxt 使って構築してみたいと考えています。

その他 参考リンク

JAMstack

Headless CMS