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

JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。

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

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

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

1
寺川直宏さん(てらかわ・なおひろ/2@trkw_)(写真左)
専門学校HAL名古屋 WEB開発学部オープンソースシステム開発専攻卒。NHN Japan株式会社(現LINE株式会社)に新卒として入社。User Interface Technology室でテックリードとして、さまざまなプロダクトに携わる。フロントエンドを担当していたが、サーバーの管理など幅広く対応。2017年、CODE MeeeにCTOとして参画。
風間雅也さん(かざま・まさや/3@miyaoka)(写真右)
慶応大学湘南藤沢キャンパス(SFC)卒。ゲームの企画のかたわらActionScriptでプロトタイプの作成。Flash技術を用いたアプリ開発からWeb開発に転身し、2016年、NHNグループに入社。2018年、STUDIOに転職、フロントエンド技術を活用したデザインツールを開発中。

JAMstackを使って、作ったモノ

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

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

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

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

ヘッドレスCMS: 「ヘッド」はビューを指しており、プレビュー画面がないCMSサービス。コンテンツの入力機能だけを提供し、そのデータを管理する。ContentfulmicroCMSなどがある。

4

▲ヘッドレス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に説明が書かれていますが、正直これだけでは、具体的なイメージがつかみづらいと思います(笑)。

5

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

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

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

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

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

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

6

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

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

SPA:Single Page Applicationの略称。単一ページで構成されたアプリケーション。静的なHTML + JavaScriptで実現したもので、JavaScriptでレンダリングする。

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

項目 概要 静的ファイルのみで構成
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情報を埋め込めないことです。

OGP:Open Graph Protocol。Webページのメタデータを表現したもの。FacebookやTwitterなどでページのURLを埋め込むとき、このメタデータに記述された内容が展開され、記述したサイトの概要文やサムネイル画像などが表示される。

7

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

8

▲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で配信すれば、どこからアクセスされても高速です。

9

▲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では、そこから動的にページを書き換えるのは管理が難しいです。

デハイドレーションとハイドレーション:JavaScriptのアプリケーションをHTMLに書き出す際、HTML化とModelデータのシリアライズが行われる。この工程がデハイドレーション。このデータがブラウザに読み込まれると、ふたたびHTMLとModelデータに戻る。この工程がハイドレーション。

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

NetlifyならJAMstackがカンタン

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く