【じゃむすたっく】

Jamstack とは?

最終更新:
💡 ページは先に用意、動く機能はAPIでつなぐ

フロントエンドを事前生成し、データや業務処理をAPI経由のサービスから分離するWebアーキテクチャ。静的ページや資産をCDNで配信し、必要な動的機能を組み合わせる。

📌 このページのポイント
先に生成して配り、APIで補う 事前生成 HTML・CSS・JS テンプレートなどから CDNなどへ配置 静的ファイルを配信 ブラウザ ページを表示 JavaScriptで動作 APIのサービス 認証・検索など サーバー側で処理 J:JavaScript/A:APIs/M:Markup APIやブラウザ側の安全性も設計する
事前生成したページや資産を配信し、実行時に必要な動的機能をAPIで利用する例。APIをビルド時に使う構成もあります。
ひよこ ひよこ
Jamstackって何かの略なの?
ペンギン先生 ペンギン先生
JavaScript、APIs、Markupの頭文字がJAMで、スタックは技術の組み合わせのことだよ。中心にあるのは、ページや資産を先に生成することと、表示側をデータや業務処理から分離することなんだ。特定の製品名やフレームワーク名ではないよ。
ひよこ ひよこ
静的サイトって、昔のHTMLベタ書きサイトと同じこと?
ペンギン先生 ペンギン先生
配るのはHTMLやCSSなどの静的ファイルでも、生成にはテンプレートやコンテンツ管理の仕組みを使えるよ。Reactを使うGatsbyのほか、HugoやJekyllなど選択肢はさまざま。ReactやVueが必須という意味ではないんだ。
ひよこ ひよこ
お問い合わせフォームとかはどうするの?
ペンギン先生 ペンギン先生
送信先を処理するAPIやサーバーレス関数などを組み合わせるよ。認証、決済、検索などもサービスのAPIで補える。配信するページが静的でも、こうした処理を担うサーバーは必要なんだ。入力の検証や認可、APIの保護も忘れずに設計するよ。
ひよこ ひよこ
どんなサイトに向いてるの?
ペンギン先生 ペンギン先生
ブログやドキュメントなど、先にページを作って配る部分が多いサイトと相性がいいよ。動的なデータもAPIから取得できるけれど、更新の反映方法やAPIの応答時間、生成するページ数などを考える必要がある。チャットだから一律に不向き、ある仕組みを使えばビルド時間が必ず解決、という判断はできないね。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Jamstack」って出てきたら「事前生成したページに、APIで動的機能を組み合わせるWebの作り方」と思えばだいたいOK!
📖 おまけ:英語の意味
「JAMstack (JavaScript, APIs, Markup)」 = JavaScript・API・マークアップのスタック
💬 JAMは3要素の頭文字。NetlifyのMatt BiilmannとChris Bachが、事前生成と分離を使うWeb開発の考え方を呼ぶために名付けた用語だよ。

参考資料

← 用語集にもどる