事前にデータを埋め込んだ静的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ではありません。
月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現した。
ヘッドレスCMSには号単位での配信に向いた機能を持つPrismicを採用。編集者が、紙媒体である月刊誌と同様の電子版コンテンツの作成・編集を負担をかけずに行えるよう、運用へ配慮したツールやスクリプトの開発も行った。
リニューアル時のフロントエンド開発を担当。EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現した。インタラクティブなコンテンツにSvelteを採用し、パフォーマンスには特に気を使った構成とした。
自社で執筆・開発・運営をする、フロントエンドに関わる人々のためのオンラインメディアCodeGrid。そのリニューアル時の開発をJamstackにて行った。Netlify + Eleventy + GraphCMSという構成で、約4000ページのコンテンツを事前に生成してCDN配信することで、高速でセキュリティ上有利なメディアサイトを実現した。
