要点
- Jamstackは「JavaScript・API・Markup」の頭文字をとった、Webサイトの構成方式です。
- ページのHTMLを、アクセスの都度ではなく「ビルド時」にあらかじめ作っておくのが特徴です。
- 作り置きしたHTMLをそのまま配信するため、表示が速く、サーバーの攻撃対象も少なくなります。
Jamstackとは何か
Jamstackは、JavaScript（画面上の動き）・API（データの取得）・Markup（あらかじめ生成されたHTML）を組み合わせてWebサイトを構成する考え方です。
もっとも重要なポイントは「HTMLをいつ作るか」です。Jamstackでは、利用者がアクセスするより前の「ビルド時」に、必要なデータを取得してHTMLをあらかじめ作っておきます。
🏗️ビルド時：
APIからデータ取得
→
📄静的な
HTMLを生成
→
🌐そのまま
配信
従来のサーバーサイドレンダリングとの違い
従来型（サーバーサイドレンダリング）は、利用者がアクセスするたびに、サーバーがそのつどデータベースへ問い合わせてHTMLを組み立て直します。Jamstackは、その組み立て作業をあらかじめ済ませておく点が異なります。
🖥️アクセスの
たびに
→従来型
🗄️DBに問い合わせ
HTMLを組み立て
ぽち先生のヒント従来型は「注文を受けてから作る出前」、Jamstackは「あらかじめ刷っておいた印刷済みのチラシを配る」ことに似ています。出前は注文のたびに調理が必要ですが、印刷済みのチラシは配るだけなので速く、厨房（サーバー）が忙しくなりません。
ビルド時と実行時の役割分担
Jamstackでは「ビルド時にできること」と「ページを開いた後（実行時）にできること」が分かれています。
ビルド時APIからデータ取得・HTML生成。事前にまとめて実行。
実行時フォーム送信や最新データの取得など、JavaScriptからAPIを呼ぶ。
「絶対に事前生成のみ」というわけではなく、ログイン後の情報表示など、その場で変化する部分は、実行時にJavaScriptから改めてAPIを呼び出して補います。
Jamstackのメリット
- 表示が速い：作り置きのHTMLを返すだけなので、都度の組み立てが不要です。
- 安全性が高い：データベースへ直接アクセスされる窓口が少なく、攻撃対象が減ります。
- 負荷に強い：同じ静的ファイルを複製して世界中に配信しやすく、アクセス集中にも対応しやすくなります。
どんなサイトに向いているか
向いているブログ・企業サイト・ドキュメントなど、更新頻度がそこまで高くないサイト
工夫が必要在庫数や価格のように秒単位で変わる情報を扱うサイト
頻繁に変わらない情報はビルド時にHTML化し、リアルタイム性が必要な部分だけをAPI呼び出しで補う、という組み合わせがよく使われます。
代表的なJamstackツール・サービス
Jamstackを実践する上で、次のようなツールやサービスがよく使われています。
- Next.js、Gatsby、Astro（静的サイトを生成するフレームワーク）
- Netlify、Vercel（ビルドとホスティングを担うサービス）
- microCMS、contentful（コンテンツを管理するヘッドレスCMS）
このサイト自体も、Netlifyを使って静的ファイルを配信しています。
まとめ
Jamstackは、JavaScript・API・Markupを組み合わせ、HTMLをビルド時にあらかじめ作っておくことで、高速かつ安全な配信を実現する構成方式です。従来のサーバーサイドレンダリングとの違いは「HTMLをいつ作るか」にあります。
関連トピック:
🏠 トップに戻る
ぽち先生と学ぶ IT基礎ノート