事前にデータを埋め込んだ静的HTMLとJavaScriptをベースに、完全に分離したサービスやシステムのAPIを通じて動的コンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。
静的HTMLとJavaScriptをベースにすることで、CDNで配信でき、Webサーバーの管理や運用をなくせます。大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利です。
また、コンテンツを管理するCMS、ユーザー認証、支払いシステムといった仕組みを、静的HTMLを配信したり生成する仕組みとは完全に別のサービスやシステムに分離。それらをAPIで繋ぐことで、それぞれの仕組みごとに適切なサービスを利用したり、独自に作成したりと柔軟に選べます。きちんと分離されていることで運用しやすく、公開後のメンテナンスしやすさにもつながる構成です。
Webサーバーを使わず、CDNで配信できるメリットをこれまでのWebとの比較しながら解説します。
Jamstackの特徴である、静的サイトジェネレーター（SSG）を利用して事前にデータを埋め込んだ静的HTMLをつくるメリットを説明します。
静的なHTMLだからといって、高度なUIや動的なデータを扱えないわけではありません。ピクセルグリッドの得意とするJavaScriptとSPAの技術を利用したWebアプリについて解説します。
Jamstackでいままでのサーバーサイドで実現していた機能を実現するには、APIが必要になります。すべてを新たに構築しなくても、現在は優秀なサービスが多く公開、提供されています。
次のような特徴を持つWebアプリ、WebサイトがJamstackです。
Jamstackを理解するためにはJamstackではない構成の例を知っておくと良いかもしれません。
具体的には、次のようにサーバーサイドでHTMLが作られるWebサイト、WebアプリはJamstackではありません。
リニューアル時のフロントエンド開発を担当。EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現した。インタラクティブなコンテンツにSvelteを採用し、パフォーマンスには特に気を使った構成とした。
