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(シングルページアプリケーション)

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

致知電子版

月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現した。
ヘッドレスCMSには号単位での配信に向いた機能を持つPrismicを採用。編集者が、紙媒体である月刊誌と同様の電子版コンテンツの作成・編集を負担をかけずに行えるよう、運用へ配慮したツールやスクリプトの開発も行った。

致知電子版で採用されているサービス、ライブラリ

  • AWS Amplify
  • Amazon Cognito
  • GitHub
  • Prismic
  • Eleventy
  • Tailwind CSS
  • Svelte
  • Stripe

セゾンカード

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

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

  • AWS Amplify
  • GitHub
  • microCMS
  • Eleventy
  • Svelte

CodeGrid

自社で執筆・開発・運営をする、フロントエンドに関わる人々のためのオンラインメディアCodeGrid。そのリニューアル時の開発をJamstackにて行った。Netlify + Eleventy + GraphCMSという構成で、約4000ページのコンテンツを事前に生成してCDN配信することで、高速でセキュリティ上有利なメディアサイトを実現した。

CodeGridで採用されているサービス、ライブラリ

  • Netlify
  • GitHub
  • CircleCI
  • GraphCMS
  • Auth0
  • Algolia
  • Eleventy
  • Preact