Jamstackとは何ですか？

JavaScript、API、Markupで構成するWebアーキテクチャ。事前ビルドした静的サイトをCDNで配信し、高速かつ安全なWebサイトを実現する。

Jamstackのポイントは？

JavaScript＋API＋Markupの頭文字「JAM」が名前の由来。ビルド時に静的HTMLを生成し、CDNから配信するため表示が非常に高速。サーバーを持たないためセキュリティリスクが低い。動的な機能はAPIやサーバーレス関数で補完する

【じゃむすたっく】

💡 ジャムを塗るように手軽に、でも中身は本格派

📌 このページのポイント

Jamstack：JavaScript + API + Markup をビルドしてCDNで高速配信

ひよこ

Jamstackって何かの略なの？

ペンギン先生

JavaScript、APIs、Markupの頭文字を取って「JAM」、それにスタック（技術の組み合わせ）を付けたものだよ。ビルド時に静的HTMLを作っておいて、CDNから配信する仕組みなんだ

ひよこ

静的サイトって、昔のHTMLベタ書きサイトと同じこと？

ペンギン先生

最終的に静的HTMLになるのは同じだけど、ビルドの過程が全然違うよ。ReactやVueで動的に書いたコードを事前にHTMLに変換するんだ。だから開発体験はモダンなのに、出力はシンプルで速いHTMLなんだよ

ひよこ

お問い合わせフォームとかはどうするの？

ペンギン先生

そういう動的な機能は外部APIやサーバーレス関数で対応するよ。フォーム送信はFormspreeやNetlify Forms、認証はAuth0、決済はStripeといった具合に、必要な機能だけAPIで繋ぐんだ

ひよこ

どんなサイトに向いてるの？

ペンギン先生

ブログ、ドキュメント、コーポレートサイト、ECサイトなど幅広く使えるよ。ただしリアルタイムで頻繁に更新されるSNSやチャットには向かないね。最近はISR（増分静的再生成）で「ビルドが遅い」問題も解決されてきて、大規模サイトでもJamstackを採用するケースが増えてるんだよ

まとめ：ざっくりこれだけ覚えればOK！

「Jamstack」って出てきたら「静的サイト＋APIの高速Webアーキテクチャ」と思えればだいたいOK！

📖 おまけ：英語の意味

「JAMstack (JavaScript, APIs, Markup)」＝ JavaScript・API・マークアップのスタック

💬 もともとNetlifyのCEOが提唱した用語で、最初は「JAMstack」と大文字表記だったけど、今は「Jamstack」が公式表記になったんだよ