JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成

JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。

しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを構築し、技術書典にてJAMstackの同人誌を頒布した寺川直宏さんと風間雅也さんに、JAMstackの仕組みとメリット、デメリットなどについてお聞きしました。

• JAMstackを使って、作ったモノ
• JAMstackはSSRとSPAのイイトコどり
• NetlifyならJAMstackがカンタン
• JAMstackに死角なし？
• ビルドしないとプレビューできない
• JAMstackが流行るには

JAMstackを使って、作ったモノ

──JAMstackを知るため、まずJAMstackを使って作成したWebサイトを教えていただけますか？

風間　作成したWebサイトは3つあります。1つは我々2人でやっている「soussune（そうっすね）」というポッドキャストのサイト。寺川さんが所属している株式会社CODE Meeeのコーポレートサイト。そして、私が所属しているSTUDIO株式会社の企業ブログです。

──作成したWebサイトの特徴を教えてください。

寺川　コーポレートサイトと企業ブログは、いわゆるブログ型のコンテンツを提供するサイトです。従来ならばWordPressで作るようなサイトですが、ヘッドレスCMSというサービスを使って、エンジニア以外の人でもコンテンツを更新しやすいようにしてあります。ポッドキャストサイトのほうは、コンテンツを構成するソースファイル一式をGitHubのリポジトリに置き、自動ビルドでコンテンツを作れるようになっています。

▲ヘッドレスCMSを使ったコンテンツ生成の仕組み。

JAMstackはSSRとSPAのイイトコどり

──そもそもJAMstackとは、どのようなもので、従来のシステムと何が違うのでしょうか？

風間　JAMstackというのは、ホスティングサービスを提供しているNetlify創業者のMatt Biilmann氏が提唱した言葉です。

「JAMstack」という名前の由来が気になって、「JAMstack Radio」というポッドキャストを聞いてみたんです。要は「スタティックサイトなのだけれど、スタティックというと、昔ながらの静的なサイトと勘違いされてしまうので、何か新しい呼び名が欲しい。LinuxでWebシステムを作るときに使う『LAMPstack（Linux、Apache、MySQL、PHP）』から連想して、『JAM』はどうだ」とのことです。

「JAM」が何を指すのかについては実はあと付けなのですが、「JavaScript」「APIs」「Markup」の組み合わせとなりました。JAMstackについては、jamstack.orgに説明が書かれていますが、正直これだけでは、具体的なイメージがつかみづらいと思います（笑）。

▲LAMPStackとJAMstack。図版は『JAMstack 完全入門』より。

LAMPstackはDBから表示までモノリス、つまり単一のアプリケーションで管理する昔ながらの構成です。それに対しJAMstackは、サーバーとフロントエンドを疎結合にし、サーバーが担っていた機能を外部化してフロントだけで扱いやすくする構成になってます。

たとえばDBの部分は自前で管理する代わりに、SaaSとしてヘッドレスCMSなどを利用することができます。また、従来サーバーで行っていたレンダリング処理も、CIなどで事前にビルドして静的ファイル化することで実現しています。

寺川　つまりJAMstackは静的ファイルのみで構成されたサイトになるわけですが、そうなると「これまでにもあった静的サイトと何が違うのか？」という話になりますが、JAMstackは「動的な機能を持った静的サイト」と言えます。たとえばCMSでコンテンツを更新するたびに静的ページが自動的に再生成されたり、あるいは静的ページの上にDisqusのようなサービスでコメント機能を追加したりする形になります。

特に現在のフロントエンドでは、SPA技術を用いてサイト全体をアプリケーションとして作ることが主流になっています。しかし、動的なアプリケーションだと初回の読み込みパフォーマンスに課題があり、SEOにも弱い、という指摘もあります。こうした課題への対策として事前レンダリングが求められます。これをサーバーで都度レンダリングするとSSRになりますが、さらに静的ファイル化までしておくとJAMstackとなるわけです。

このあたり「サイトをどのようにレンダリングするのか」については、今年の2月にGoogleによって公開された記事が詳しいので見ていきましょう。

図版は「Rendering on the Web - Web上のレンダリング」 より引用。

寺川　こちらの図では、レンダリング方法が5段階に分類されています。一番左がサーバーサイドで、すべてレンダリングするWebサイト。一番右がクライアントサイドで、すべてレンダリングするWebサイトです。真ん中が、よく使われている「SSR（Server Side Rendering）」です。一番右の「Full CSR」は、いわゆる「ただのSPAのみ」です。

──図の内容を整理するとこういうことですね。

項目	概要	静的ファイルのみで構成
Server Rendering	サーバーサイドでアクセスのたびにレンダリングする。いわゆる旧来のCGI、PHP、サーブレットなど	×
Static SSR	サーバーサイドで事前にレンダリングして、すべて静的なHTMLとして変換したもの。Ruby製の Jekyll（ジキル） など	○
SSR	ユニバーサルJavaScriptとして構成したSPA。サーバーサイドのNode.jsで、レンダリングするものとクライアントサイドでレンダリングするものを組み合わせたもの	×
CSR with Prerendering	事前にページを静的なHTMLとして変換しておくSPA。「JAMstack」はここに該当	○
Full CSR	クライアントサイドでレンダリングするSPA	○

寺川　SSRでは、文字通りサーバーサイドでレンダリングします。そのためサーバーには、Node.jsの実行環境が必要です。それに対して、Full CSRはクライアントサイドでレンダリングするため、HTMLとJavaScriptをただ静的ファイルとして置いておくだけで済みます。つまりサーバーサイドにプログラムを動かす仕組みが必要ありません。しかしFull CSRには弱点があります。クライアントサイドでレンダリングするため、SNSが必要とするOGP情報を埋め込めないことです。

▲Full CSR（いわゆるSPA）の構成例。静的なHTMLとJavaScriptで構成される。クライアントサイドのJavaScriptでページが動的にレンダリングされるため、OGPなどのタグをあらかじめ埋め込むことができない。図版は『JAMstack 完全入門』より。

▲SSRの構成例。サーバーサイドのJavaScript（Node.js）でページが生成されるので、ブラウザがアクセスしたときにはHTMLがすでにある状態。よってOGPなどのタグも正しく機能する。図版は『JAMstack 完全入門』より。

寺川　その間をとったのが、「CSR with Prerendering」です。これがJAMstackに相当します。 Node.jsサーバーは、クライアントからアクセスが来たときに、そのルートに応じたレンダリングをします。

「CSR with Prerendering」の「Prerendering（事前レンダリング）」は、「全部のルート」のページをあらかじめ静的HTMLとして生成し、それを配置しておけばよい、という考え方です。つまり、すべてを事前ビルドしておき、それを置いておくというのが、JAMStackです。

JAMstackは、SSRとSPAのイイトコどりをしたもの です。Node.jsのサーバーは必要なく、静的なホスティングだけで済みます。事前にビルドされているのでOGPタグも埋め込まれています。また、生成された静的ファイルをCDNで配信すれば、どこからアクセスされても高速です。

▲JAMstack（CSR with Prerendering）の構成例。あらかじめ全ページをビルドしておく。ビルドするのは、「Static Site Generator」の役割。図版は『JAMstack 完全入門』より。

──静的なHTMLが必要であるだけなら、最初から静的なHTMLを用意しておけばいいのでは、とも感じます。

寺川　静的なHTMLというのは、昔ながらの技術や手法を利用するため、SPAを構築しにくい点が課題です。

特にReactやVueなどを用いたSPAの場合、デハイドレーションやハイドレーションの問題があります。いまのJavaScriptは、Virtual DOMでページを生成していますが、Virtual DOMでページを作るときに実体のDOMにしてから静的なHTMLを出力しています。

SPAを静的化したページにブラウザがアクセスすると、そこでJavaScriptが走り、実体のDOMが再びVirtual DOMに戻り動的なアプリケーションになります。ここが大きな違いです。ただの静的なHTMLでは、そこから動的にページを書き換えるのは管理が難しいです。

風間　このあたりは、JAMstackでいう「APIs」に影響してくる要素です。「APIs」というのは、我々が使った、コンテンツを作るための「ヘッドレスCMS」や、決済の「Stripe」、ショップ系だと「Shopify」、検索だと「Algolia」などがあります。こうしたAPIと連携して入出力しやすいのが、SPAのメリットです。

NetlifyならJAMstackがカンタン