Jamstack とは？なぜ今 Jamstack なのか？

2020/05/01

2021/08/19

Jamstack SSG ウェブ用語

jamstack.org キャプチャ

今回はウェブの世界で近年話題の「 Jamstack 」について説明します。ウェブ技術にあまり詳しくない方にもなるべくわかりやすく説明します。

最初に Jamstack とは何ぞやという説明をした後に、なぜ今 JAMStack なのか、そして、現在の Jamstack の普及状況がどのくらいなのかについて説明します。最後に Jamstack について理解を深めるのに役立つ英語の参考情報をご紹介します。

Jamstack とは？

Jamstack （ジャムスタック）とはウェブサイトを構築・運用するための J ・ A ・ M の技術の組み合わせです。 J ・ A ・ M はそれぞれ JavaScript ・ APIs ・ Markup を表します。

ご存知ない方のために説明しますと、 JavaScript というのは Chrome や Edge 等のウェブブラウザ上で動くプログラミング言語のことです。 APIs はプログラムから利用するために作られたウェブサービスのことで、 Markup は HTML ファイルのことを指します。

WordPress ・ Joomla! ・ Drupal 等の旧来の CMS でよく使われる技術の組み合わせが「 LAMP stack 」（ Linux + Apache + MySQL + PHP ）と呼ばれており、 Jamstack はそれと対比する意味で名付けられた名前です。

最初に Jamstack という言葉を使い出したのは Mathias Biilmann 氏と言われています。彼は Jamstack 関連のサービスを提供する Netlify 社の CEO です。時期は 2016 年頃とされています。

Jamstack サイトの特徴

Jamstack サイトは一般に次のような形で動かします。

サイトの各ページに相当する HTML ファイルをプログラムを使って事前に生成しておく
ブラウザからアクセスがあったときは事前に生成した HTML ファイルの中身をそのまま返す
動的な機能が必要な場合は JavaScript と API を利用して実現する

旧来の CMS と Jamstack の大きな違いはページの生成タイミングです。旧来の CMS では多くの場合ブラウザからアクセスがあったときにページを生成しますが、 Jamstack では事前にページを生成しておきます。

Jamstack サイトは、ベースは静的サイトですが JavaScript と API を利用して動的な機能も実現することが可能です。ざっくり捉えるなら「静的サイトと動的サイトのよいとこどり」をするための手法が Jamstack だという捉え方をするとよいと思います。

SSG （スタティックサイトジェネレーター）や SPA （シングルページアプリケーション）をご存知の方はそれらと Jamstack の何が違うのだろうと疑問に思われるかもしれません。端的に説明すると、 SSG は静的サイトを生成するためのソフトウェアのことを指し、 SPA はページ遷移無しで（＝シングルページで）動作するウェブアプリケーションのことを指します。他方 Jamstack は SSG 等の要素技術を組み合わせて「静的サイトと動的サイトのよいとこどり」をしたようなサイトを実現する手法全体を意味します。関係性で言うと、 SSG は Jamstack を実現するときに利用される要素技術のひとつです。他方の SPA については Jamstack とは互いに直行する関係にあります。つまり、 SPA を作る Jamstack 構成も可能ですし、 SPA ではない Jamstack 構成も Jamstack 構成ではない SPA も実現可能です。

Jamstack に使われる技術

Jamstack に使われる要素技術には例えば次のようなものがあります（これらの技術を知らない方・興味が無い方は読み飛ばしてください）。

Git
Webpack
React / Vue.js / Angular
Next.js / Hugo / Gatsby / Nuxt.js / Jekyll / VuePress

ただし、 Jamstack は LAMP stack の Linux + Apache + MySQL + PHP のように特定のソフトウェアの組み合わせを意味するものではありません。これらの技術をひとつも使わない場合でも Jamstack 構成と言うことは可能です。

ここを Jamstack の定義に含めるかどうかは議論が分かれるところですが、 Jamstack を実現する場合は、コードが更新されれば自動的にビルド処理を走らせクラウドサービスを通じてサイトを CDN に展開する、いわゆる CI/CD のワークフローを組むことが一般的です。

Jamstack でよく利用されるホスティングサービスには次のようなものがあります。

Netlify
Gatsby Cloud
Vercel
Firebase Hosting
GitHub Pages

Jamstack についての説明はここまでです。

Jamstack とは何ぞやという説明の最後に、「 Jamstack 」というサイトと『 Modern Web Development on the Jamstack 』という書籍から Jamstack について説明した箇所を引用してご紹介します:

サイト「 Jamstack 」から

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.

（ Jamstack とは）事前に生成したファイルを CDN から直接提供する形で動く、高速でセキュアなサイトやアプリのことです。（ Jamstack では）ウェブサーバーを管理したり実行したりする必要はありません。

訳注: ここで言う「ウェブサーバーを管理したり実行したりする必要がない」というのは誤解を招きがちな表現です。これはウェブサーバーが必要なくなるということではなく、そのようなクラウドサービスを利用すれば利用者はウェブサーバーを意識しなくてもよくなるという意味だと思います。

The Jamstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

Jamstack は特定の技術のことではありません。 Jamstack とは、パフォーマンスの向上、セキュリティの向上、スケーリングコストの低減、よりよい DX （開発者体験）等をもたらす、ウェブサイトやウェブアプリを構築する新しい方法です。

―― Jamstack

書籍『 Modern Web Development on the Jamstack 』から

The Jamstack brings together JavaScript, APIs, and markup, the three core components used to create sites that are both fast and highly dynamic. Jamstack sites are well suited to meet the demanding requirements of today’s mobile-first web (where load times urgently matter and quality bandwidth can never be guaranteed).

Jamstack は高速な動的サイトを作るために使われる 3 つのコアコンポーネント、 JavaScript ・ API ・ markup を組み合わせるものです。 Jamstack サイトは今日のモバイルファーストなウェブに対する高まる要求に応えるのに適しています（モバイルファーストなウェブでは、ページの読み込み速度が非常に重要であり、通信回線が必ずしもよくありません）。

We should pause to say what the Jamstack isn’t: it’s not any one specific technology in and of itself; nor is it driven by a large company; nor is there any standards body that controls or defines it. Instead, the Jamstack is a movement, a community collection of best practices and workflows that result in high-speed websites that are a pleasure to work on.

Jamstack が何ではないのかを説明しておきます。 Jamstack は特定の技術のことではありません。大企業が先導して作っているものでもありませんし、コントロールや定義を行う標準化団体があるものでもありません。 Jamstack はムーブメントです。使うのがうれしくなるような高速なウェブサイトを作るための、コミュニティによるベストプラクティスとワークフローの集まりです。

―― Modern Web Development on the Jamstack

ちなみに、今回の記事では一貫して Jamstack という表記を使っていますが、 Jamstack の表記は揺れていて、先頭の J だけ大文字の Jamstack や JAMS が大文字の JAMStack を使が使われることもあります。

なぜ今 Jamstack なのか？

なぜ今ウェブサイト制作の世界で Jamstack が注目を集めているのかについてです。

Jamstack が注目される理由は、既存の技術の利用に伴う「課題」にあります。これまでウェブサイトやウェブアプリケーションを構築・運用するときの代表的な方法は次の 3 つでした。

静的サイト
CMS
ウェブアプリケーションフレームワーク（以下「フレームワーク」）

これらの方法には以下にあげるような側面で課題がありました。

インタラクティブ性
セキュリティ
パフォーマンス
スケーラビリティ
UI / UX
DX （技術者にとっての快適さ）
運用効率
コスト

例えば静的サイトは、セキュリティやパフォーマンスは非常に優れていますが、動的な機能・インタラクティブな機能は諦める必要がありました。また、サイトの規模が大きくなると更新の手間や負荷が増えるため運用効率がよくありませんでした。今日では、特にビジネスで利用するサイトの場合は特に、動的な機能はあって当たり前なので、純粋な静的サイトを利用できる場面は限定されていました。

CMS を使うと、動的な機能・インタラクティブな機能が利用でき運用時の作業効率も高くなります。しかし、サーバー上でプログラムが走る仕組み上、セキュリティ・パフォーマンス・スケーラビリティ・技術者にとっての使い勝手等の面で課題がありました。

フレームワークはというと、 CMS の利用に伴う課題のいくつかは解決できますが、イニシャル・ランニングともにコストが高くなりがちでした。また、フレームワークもパフォーマンスやスケーラビリティの面では静的サイトには遠く及びません。

どれも一長一短で、すべてを満たす完璧な答えはありません。そこでこれまでは、インタラクティブ性を優先する場合はセキュリティやパフォーマンスを我慢し、セキュリティやパフォーマンスを優先する場合は運用効率を我慢する必要がありました。

Jamstack のアプローチはそのトレードオフ問題に新たな解決策をもたらします。 Jamstack を使えば、セキュリティ・パフォーマンス・スケーラビリティ・コスト等の面で優れていて、なおかつ、インタラクティブな機能があり技術者にとっての使い勝手もよいサイト、いわば既存の手法のよいとこどりをしたようなサイトを実現することができます（むしろ、既存の手法に伴うジレンマを解消するための定石に「 Jamstack 」という名前が後付けされたという説明をした方が正確かもしれません）。

ということで、 Jamstack は旧来の代表的なサイト制作・運用の手法である「静的サイト」「 CMS 」「フレームワーク」のどれにも満足できなかった人たちに新たな選択肢を与えてくれるということで今注目を集めています。

ただ注意しなくてはいけないのは、 Jamstack は旧来の手法の課題をすべて解決し、旧来の手法をすべて置き換える「万能薬」などではないということです。 Jamstack は多くの人が抱えてきた課題に新しい解決策をもたらしてくれますが、 Jamstack を導入することで新たに生まれる課題やジレンマもまたあります。そのため、旧来の手法がすべて Jamstack で置き換えられたり、 CMS やフレームワークの価値が Jamstack によって失われるわけでは決してありません。 Jamstack と CMS のどちらが優れている・いないの問題ではなく、要は使い分けの問題です。

現在の Jamstack の普及状況

Jamstack が今後普及するとウェブ制作の主流が大きく変わる可能性がありますが、現状 Jamstack は「イノベーター理論」「キャズム理論」で言うところの「イノベーター」と「アーリーアダプター」の間での利用に留まっています。

そのことがわかるデータとしてライブラリのダウンロード数があります。 Jamstack 向けのツールとして Next.js と Gatsby が世界で最も人気の 2 つですが、これらの直近のダウンロード数（ 1 週間のダウンロード数）を React や jQuery と比べると次のとおりです。

Next.js: 53 万
Gatsby: 42 万
jQuery: 378 万
React: 827 万

（ React と jQuery は JavaScript の世界でいま最も有名なツールのひとつです）

ダウンロード数がそのまま利用数と比例するわけではありませんが、これらの間には強い正の相関があると考えてよいでしょう。 jQuery や React よりは桁がひとつ小さいので、現状 Jamstack のツールはウェブ制作に関わる人のうち高々数 % 〜十 % 程度の人が使っている程度だと考えられます。日本では企業での利用は多くても数百件程度と少ないでしょう。

Google Trends で WordPress 等の有名な CMS と Jamstack の技術を比べて見ても比較できないくらい大きな差があるので、「ウェブ業界で普及している」というにはまだ早い段階です。

ただし、 W3Techs の CMS マーケットシェアのデータによれば、 Gatsby の利用数は他に例が無いほどの急速な伸びを見せているので、今後数年のうちに流れがガラッと変わる可能性はあると思います。次のグラフは Gatsby の直近のシェアの変化を表したものです:

出典: Usage Statistics and Market Share of Gatsby

他の CMS のトレンドも見れば、 Gatsby の伸びが驚異的であることがよくわかります。

ただし、今後 Jamstack がキャズムを越えられるかどうかはまだわかりません。また、仮にキャズムを越えられるとしても、ウェブサイトのライフスパンは一般に数年間〜はあるので、 Jamstack の普及には時間がかかります。そのため、ウェブ制作の主流が CMS であることは今後もしばらく（少なくとも先 5 年間は）変わらないでしょう。

そのため、「これからは Jamstack の時代だ！ CMS なんてもう古い！」「 CMS なんて使うのは情弱」「 WordPress はデメリットが多すぎる」等と過度に煽ったり既存の技術を無闇矢鱈と貶したりする人の話を真に受けてはいけません。 Jamstack はサイト制作・運用を行う人たちにとっての有望な選択肢のひとつに過ぎません。