Jamstack

事前にデータを埋め込んだ静的HTMLとJavaScriptをベースに、完全に分離したサービスやシステムのAPIを通じて動的コンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。

静的HTMLとJavaScriptをベースにすることで、CDNで配信でき、Webサーバーの管理や運用をなくせます。大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利です。

また、コンテンツを管理するCMS、ユーザー認証、支払いシステムといった仕組みを、静的HTMLを配信したり生成する仕組みとは完全に別のサービスやシステムに分離。それらをAPIで繋ぐことで、それぞれの仕組みごとに適切なサービスを利用したり、独自に作成したりと柔軟に選べます。きちんと分離されていることで運用しやすく、公開後のメンテナンスしやすさにもつながる構成です。

Jamstackの解説

Jamstackの定義

次のような特徴を持つWebアプリ、WebサイトがJamstackです。

  • CDN/ADNで配信できる静的なHTMLがベース
  • 動的なコンテンツはJavaScriptにより、APIを通じて取得し表示
  • フロントエンドとサーバーサイドは完全分離

Jamstackではない構成

Jamstackを理解するためにはJamstackではない構成の例を知っておくと良いかもしれません。
具体的には、次のようにサーバーサイドでHTMLが作られるWebサイト、WebアプリはJamstackではありません。

  • WordPressなどのサーバーサイドで動くCMSにより管理・公開されているWebサイト
  • PHP、JSPなどによりサーバーサイドでHTMLが作られ、公開されるWebサイト
  • Ruby on RailsによりサーバーサイドでHTMLが作られるWebアプリ
  • SSR(サーバーサイドレンダリング)されるSPA(シングルページアプリケーション)

ピクセルグリッドの開発実績

セゾンカード

リニューアル時のフロントエンド開発を担当。EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現した。インタラクティブなコンテンツにSvelteを採用し、パフォーマンスには特に気を使った構成とした。

セゾンカードで採用されているサービス、ライブラリ

  • Eleventy
  • microCMS
  • AWS Amplify
  • Svelte
  • GitHub