Dyno

CMS と比べた JAMstack のメリット・デメリット

今回は CMS と比較した場合の JAMstack のメリット・デメリットについて説明します。

正確に言うと JAMstack も CMS の一種なので「 CMS vs. JAMstack 」という見方は正しくありません。 今回お話しする内容は正確には CMS の中でも「データベースを使う動的 CMS 」と比較したときの JAMstack のメリット・デメリットです。

世の中にはデータベースを使わない CMS や静的な CMS も存在するので、 CMS とはデータベースを使う動的なものだけを指すことばではありませんが、この記事では「 CMS 」ということばを「データベースを使う動的 CMS 」のことを指す意味で使用します 1

尚「 JAMstack とは何なのか」に興味がある方は次の記事がご参考になるかと思います。

JAMstack のパターン

CMS と JAMstack の比較をする前に JAMstack の代表的なパターンを確認しておきましょう。 JAMstack はコンテンツの管理方法によって大きく次の 2 つのグループに分けることができます。

  • A) Git-based JAMstack
  • B) Decoupled JAMstack

A) Git-based JAMstack

Git ベースの JAMstack です。 コンテンツの管理に Git 2 を使用します。

スタティックサイトジェネレーター(以下「 SSG 」)のソースコードとコンテンツを Git で一元管理することによって、サイトのリソースやワークフローの管理のシンプル化とコンテンツのバックアップ機能・バージョニング機能を実現することができます。

Git-based JAMstack の場合、コンテンツの記述には Markdown (マークダウン)等のシンプルなテキストフォーマットを使うことが一般的です。 また、ソースコードやコンテンツに変更が加えられたら静的サイトの再生成とサーバーへの反映を自動的に行う CI/CD のワークフローを組んで使うことが一般的です。

B) Decoupled JAMstack

デカップルド JAMstack です。 コンテンツの管理に Headless CMS を使用します。

Headless CMS (ヘッドレス CMS )というのは、管理者・投稿者向けの管理画面・投稿画面とフロントエンドから利用するための API エンドポイントだけを提供する機能限定版 CMS のことです。 Headless CMS は CMS が通常行う HTML ページの動的生成や CSS ・ JavaScript の配信を行いません。

こちらは英語圏では API-first JAMstack と呼ばれたりしています。

ちなみに、 Headless CMS は大きく 2 つのグループに分けられます。 ひとつは既存の CMS を Headless CMS として転用したもので、もうひとつは純粋な Headless CMS として開発されたものです 3

サイトの訪問者向けの機能とコンテンツ管理用の機能を分離することによって、静的サイトや SPA 4 と旧来の CMS のよいとこ取りをしたようなサイトを実現することができます。

JAMstack と一口に言っても Git-based JAMstack と Decoupled JAMstack ではメリット・デメリットが大きく異なるので、今回はこれらを別々に見ていくことにします。

まずは Git-based JAMstack の方からです。

A) Git-based JAMstack

まずはメリットから見ていきましょう。

CMS と比較したときのメリット

  • パフォーマンス
  • SEO
  • セキュリティ
  • UX
  • DX
  • コスト
  • シンプルさ

パフォーマンス

本番環境は SSG で生成された静的サイトなので、静的サイトと同等のパフォーマンスを出すことができます 5 。 CMS も高速化手法が確立されているため、 CMS サイトのパフォーマンスが必ずしも悪いわけではありませんが、同じスペックのサーバーに載せて比較した場合は、 Git-based JAMstack の方がよいパフォーマンスが出ます。 また、近年人気のフロントエンドフレームワークを組み込んだ JavaScript ベースの SSG 6 を使う場合は、 SPA 風の快適な操作レスポンスやパフォーマンス向上につながるコード分割、内部リンクの先読み等をデフォルトで行ってくれるものもあり、体感的なパフォーマンスで見れば静的サイトにも勝るものもあります。

SEO

パフォーマンスがよいことの副作用として SEO にも有利です。

セキュリティ

本番環境は静的サイトなので、静的サイトに近いセキュリティレベルを実現できます。 CMS 、特に主流のオープンソース CMS を使ったサイトの場合は、新たな脆弱性が見つかったときにすばやい対応を行うことが不可欠ですが、 Git-based JAMstack の場合は CMS ほどの緊急対応が必要になるケースはありません。 API を別途公開して、問い合わせや投稿へのコメントのようなインタラクティブな機能をサイトに付ける場合はそこで CMS と同等の対応が必要になりますが、その他の静的な部分に関してはセキュリティ上の心配は大幅に減ります。

UX

ここで UX というのはサイト訪問者の体験の質――いわゆる使い勝手や使い心地のことを意味しています。 パフォーマンスがよいことの副作用として UX も高くなります。 また、近年人気の JavaScript ベースの SSG の場合は、 SPA 風の快適な操作レスポンス等も加わって、静的サイト以上の UX が手軽に実現できたりもします。

DX

ここで DX というのは開発者の体験の質――いわゆる作業の快適さや認知負荷等のことです。 ソースコードとコンテンツのすべてを Git で一元管理できることで、すべてを単一のワークフローで管理できる快適さがあります。 具体的には、コンテンツ変更時の差分確認やレビューに Git や GitHub の便利な機能を利用できます。 使い慣れたテキストエディタを使ってシンプルなテキストファイルでコンテンツを管理できます。 CI/CD の自動化ワークフローを導入すればサーバーへのデプロイやサイトのバックアップに気を煩わせる必要もありません。 DX がどれだけ高いかは構築時・保守時の作業効率だけでなく開発メンバーのやりがい・働きがいにも影響します。

コスト

Git-based JAMstack は CMS に比べてコストが下がる可能性が高いです。 WordPress のように、そのまま使える高品質なテーマがあってノウハウが豊富な CMS もあるので、初期の構築時のコストは Git-based JAMstack の方が低いとはかぎりませんが、サイトの TCO 7 で見ると Git-based JAMstack の方がコストが低くなるケースは多いと思います。 特に大きいのはゼロデイ攻撃への対応コストの違いです。 CMS を利用する場合は一般に脆弱性情報をウォッチしゼロデイ攻撃に備える必要がありますが、 Git-based JAMstack の場合は静的サイトの部分で深刻な脆弱性が出る可能性が低いためゼロデイ攻撃のリスクが下がります。 結果として、リスクを増やさずにセキュリティメンテナンスの手間を減らすことができます。 ただし、プラグインやライブラリのアップデート対応なことは CMS でも SSG でも変わりません。 また、 JAMstack の場合は CMS よりも高いパフォーマンスが出やすいため、低スペックのサーバーを利用してコストを抑えることもできます。

シンプルさ

Git-based JAMstack は CMS に比べてサイトのリソース管理やワークフロー管理がシンプルになります。 結果として、運用や保守を担当する人の心理的・認知的負荷が軽減されます。

続いてデメリットについてです。

CMS と比較したときのデメリット

  • EX
  • インタラクティブ機能

EX

ここで EX とはコンテンツ投稿者の体験の質――投稿作業の手間や快適さのことを意味しています。 多くの CMS が提供する直感的・リッチなコンテンツ編集 UI に慣れた人には、 Git-based JAMstack のシンプルなテキストによるコンテンツ編集や Git ベースのワークフローは必ずしも心地よいものではありません。 Git-based JAMstack では編集後のページのプレビューができなかったり、できたとしても一工夫が必要だったり、タイムラグがあったりするため、ビジネスでのサイト管理の場合はここがネックで JAMstack が見送りとなるケースが多いのではないかと思います。 ICT が苦手な人にとっての使いやすさは CMS の方が高いことが多いでしょう。

インタラクティブ機能

ここで言う CMS とは冒頭で述べたとおり、動的な CMS のことです。 動的な CMS に備わっているインタラクティブ機能が、ベースが静的サイトの JAMstack では利用できません。 JAMstack サイトにインタラクティブ機能を組み込みたい場合は、 API 系のウェブサービスを利用するか API を自身で実装して統合する必要があります。 ただし、問い合わせやコメント等の定番的な機能であれば、 JAMstack 用のホスティングサービスがオプションとして提供していたりもするので、組み込むのはそう難しくもありません。

以上が Git-based JAMstack の場合のメリット・デメリットについてでした。 続いてふたつめの Decoupled JAMstack の場合を見ていきましょう。

B) Decoupled JAMstack

まずはメリットからです。

CMS と比較したときのメリット

  • パフォーマンス
  • SEO
  • UX

パフォーマンス

Git-based JAMstack と同様です。 本番環境は基本的に静的サイトなので、静的サイトに近いパフォーマンスを出すことができます。

SEO

こちらも Git-based JAMstack と同様です。

UX

Git-based JAMstack と同様です。

つづいてデメリットについてです。

CMS と比較したときのデメリット

  • インタラクティブ機能
  • コスト
  • シンプルさ

インタラクティブ機能

Git-based JAMstack と同様です。

コスト

Git-based JAMstack が CMS に比べてコストが抑えられる可能性が高いのに対し、 Decoupled JAMstack は CMS よりもコストが増加する可能性が高いです。 初期の構築時のコストは、バックエンド( CMS )とフロントエンド( SSG )の実装とこれらの間の連携が必要なので CMS 単体よりもコストが増えます。 ランニングコストは、 CMS と SSG の両方のアップデート対応が必要な分保守の手間が増えます。 メンバーの人数や求められるスキルセットが多くなるため、人件費・外注費が上がる可能性があります。

シンプルさ

Decoupled JAMstack では CMS 単体よりもサイトの構成要素が増えるので、シンプルさは下がります。

メリット・デメリットのどちらにもなりうるところ

  • セキュリティ
  • EX
  • DX

セキュリティ

セキュリティを「機密性」「完全性」「可用性」の視点から総合的に評価すると、 Decoupled JAMstack のセキュリティは CMS に比べて一概によいとも悪いと言えません。 メリットとデメリットの両方があり、それらをどのように重み付けするかによってプラスと見るかマイナスと見るかが変わると思います。

EX

Decoupled CMS では CMS とほぼ同じ投稿者 UI を使うので、投稿者の体験の質は CMS と同等です。 プレビューのしやすさで見ると CMS の方が上かもしれません。

DX

開発者の体験の質に関しては CMS よりもよい面もあれば悪い面もあり一概には言えません。 例えば、 CMS であれば CMS の知識だけで十分だったものが、 Decoupled JAMstack の場合は CMS + SSG の知識が必要になります。 さらにインテグレーションの手間が増えるので、必要な学習量や技術的な難易度・手間の面ではマイナスです。 一方で、旧来の CMS よりも先進的な SSG と新しいアーキテクチャを使った開発ができるので、よりよい技術を追求するタイプの開発者にとっては、やりがいや実績の構築という面でプラスです。 これらの重み付けをどうするかによって DX の評価は変わります。

比較表

上記の内容を比較表にまとめました。

ポイント CMS Git-based JAMstack Decoupled JAMstack
パフォーマンス
SEO
セキュリティ
UX
EX
DX
インタラクティブ機能 ✕〜△ ✕〜△
コスト
シンプルさ

この表からわかることは JAMstack は CMS の上位互換では決してないということです。 JAMstack と CMS の関係は自転車と自動車の関係のようなもので、どちらか一方が絶対的に優れている・劣っているというものではありません。 長所短所がそれぞれあり使いどころが異なるので、重要なのは適材適所で使い分けることです。

また、ここではわかりやすさを優先し◯△✕を付けていますが、この評価は絶対的なものではありません。 例えば、 CMS は JAMstack に比べるとパフォーマンスが下がる傾向にありますが、パフォーマンスの問題の多くはサーバー環境により多くのコストをかければ解決が可能です。 そのため、 CMS を使えば JAMstack よりもパフォーマンスが落ちてしまうかというと必ずしもそうともかぎりません。 これらはすべて絶対的なものではなく条件によって変化するものであるという前提の上での比較だと捉えていただければと思います。

ということで、データベースを使った動的な CMS と比較したときの JAMstack のメリット・デメリットのお話でした。

CMS と JAMstack は長所短所を押さえてうまく使い分けることができれば、企業のデジタル ROI を大きく向上できると思います。 ご参考になれば幸いです。


  1. 記事執筆時点で CMS の主流はこの「データベースを使う動的 CMS 」です。このタイプの CMS として最も有名なのは WordPress です。 WordPress は世界の CMS マーケットで 65% 、日本国内では 80% 以上のシェアがあると言われており、 CMS といえば WordPress 、そして「データベースを使う動的 CMS 」をイメージする人が多いと思います。

  2. ソフトウェアのソースコード管理のためのツールです。

  3. 前者の代表例は Headless な WordPress で、後者の例としては Contentful ・ Sanity ・ Prismic 等があります。

  4. シングルページアプリケーションのこと

  5. ここで「パフォーマンス」ということばは、ウェブサイトのページ表示速度の速さや同時にさばけるリクエストの数の多さを指すものとして使っています。

  6. Next.js ・ Gatsby ・ Nuxt.js ・ VuePress 等があります。

  7. Total Cost of Ownership 。要は、構築から運用保守まですべて含めたコストのこと