Dyno

JAMstack とは?なぜ今 JAMstack なのか?

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 関連のクラウドサービスを提供する Netlify 社の CEO 、 Mathias Biilmann 氏と言われています。

JAMstack サイトの特徴

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

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

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

JAMstack サイトは、ベースは静的サイトでありながら動的な機能が必要なところでは JavaScript と API を利用して実現します。 ざっくり捉えるなら、「静的サイトと動的サイトのいいとこどり」をするための手法と考えるとよいでしょう。

SSG (スタティックサイトジェネレーター)や SPA (シングルページアプリケーション)をご存知の方はそれらと JAMstack の何が違うのだろうと疑問に思われるかもしれません。 端的に説明すると、 SSG は静的サイトを生成するためのソフトウェアのことを指し、 SPA はページ遷移無しで動作するウェブアプリケーションのことを指します。 他方 JAMstack は SSG 等の技術を組み合わせて「静的サイトと動的サイトのいいとこどり」のようなサイトを実現する手法です。 関係性で言うと、 SSG は JAMstack を実現するときに利用されることが一般的です。 SPA については、 SSG によっては SPA 的な挙動をするものもあるので SPA の JAMstack というのはありえますが、 SPA と JAMstack は必ずしも一緒にあるものではありません。 SPA ではない JAMstack サイトもありえますし、 JAMstack ではない SPA もありえます。

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

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

ただし JAMstack は LAMP stack とは異なり特定のソフトウェアの使用を意味するものではありません。 これらの技術をひとつも使わない場合でも JAMstack を実現することは可能です。

ここを JAMstack の定義に含めるかどうかは議論が分かれるところですが、 JAMstack を実現する場合は、コードが更新されれば自動的にビルド処理を走らせクラウドサービスを通じて CDN に展開する、いわゆる CI/CD を組むことが一般的です。 このあたりの、 CI/CD や CDN の利用も含めて JAMstack と呼ぶこともあるようです。

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 が注目を集めているのかについてです。

その理由は既存の技術の課題を考えるとよくわかります。 これまでウェブサイトやウェブアプリケーションを構築・運用するときの代表的な方法は次の 3 つでした。

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

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

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

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

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 の直近のシェアの変化を表したものです:

Gatsby のマーケットシェアの伸び

出典: Usage Statistics and Market Share of Gatsby

ただし、今後 JAMstack がキャズムを越えられるかどうかはまだわかりませんし、越えられたとしても普及には時間がかかります。 そのため、ウェブ制作の主流が CMS であることは今後もしばらく(少なくとも 5 年間ほどは)変わらないでしょう。

そのため、「これからは JAMstack の時代だ、 CMS なんてもう古い」「 CMS なんて使うのは情弱」等と過度に JAMstack を持ち上げたり既存の技術を貶したり、 JAMstack が万能薬であるかのように語ったりする人の話を真に受けてはいけません。

参考

以下 JAMstack 関連の参考情報です。

JAMstack について理解を深める

JAMstack に使われる有名なフロントエンドフレームワークを知る

JAMstack に使われる有名なホスティングサービスを知る

JAMstack に使われる Headless CMS を知る

以上です。 JAMstack に興味のある方のご参考になれば幸いです。

追記 2020/05/27:

JAMstack に関連するものとして SSG にも興味のある方には次の記事がご参考になるかと思います。