JamStack簡単まとめ

Jamstackとは

Webサイト (Webアプリケーション) をデータとビジネスロジックから分離し、パフォーマンス、スケーラビリティ、柔軟性、保守性を高めるためのアーキテクチャ。
Jamstackはサーバーレス構成と相性が良く、また、オプションの1つとしてヘッドレスCMSがよく採用される。Jamstackであることのメリットを得られるのは、「多くの動的なコンテンツがビルド時にあらかじめ生成できる場合のみ」になる。

Jamstackのアプローチ

1. サイトの生成とホスティングの分離

Jamstackでは、一体化したシステムから次の2つを分離する。

• サイトを生成するプロセス (ビルドプロセス)
  ビルドプロセスは、CMSなどサーバーサイトでオンデマンドに生成する代わりに、サイト全体をあらかじめ静的なHTMLとして作っておく。このHTTMLの作成には静的なサイトを生成できるWebフレームワークや静的サイトジェネレーターと呼ばれるツールを使う。

• サイトをホスティング・配信するプロセス (ホスティングプロセス)
  ホスティングプロセスは、CDNに任せる。静的なHTMLであることで、サーバーがなくてもCDNだけで配信できる。CDNだけで配信することで、オリジンサーバーとCDNキャッシュの違いを気にする必要はない。

Jamstackでよく使われるホスティングサービス

• Netlify
• Vercel
• Couldflare Pages
• AWS Amplify ホスティング

2. フロントエンドとAPIの分離

完全な静的サイトだと気になるのは、ECサイトや検索のような動的な機能が作れないのではないかという点だが、Jamstackでは、Webサイトの動的な機能、つまりデータベースへの操作が必要なものは、すべてAPIとして分離する。
静的なサイトのJavaScriptでAPIへアクセスし、ブラウザ側でサイトを書き換えることで動的な機能を実現する。
APIを用意するには次の2つの方法がある。

1. 既存のサービスのAPIを使う (SaaS)
2. 独自のAPIを作成する

3. 事前レンダリング

「ビルドプロセス」では、ユーザーが表示する最終的なHTMLにできる限り近いものを作る。つまり、APIアクセスして動的に書き換えが必要のもの以外は、すべてHTMLとして生成しておく。これを事前レンダリングという。
事前レンダリングのために「ビルドプロセス」でAPIへアクセスし、返ってきた情報をもとに必要なHTMLをすべて生成することも行われる。「ビルドプロセス」で使われるAPIの例としてCMSのAPIが挙げられる。Jamstackでは「ヘッドレスCMS」がよく使われる。

Jamstackによるメリット

• Security: セキュリティ
  セキュリティ面でのメリットは、静的ファイルを中心に構成されサーバーやシステムが分離していることから「攻撃ポイントを減らせる」という点。

• Scale: スケール
  静的なコンテンツとなるので、複雑なロジックがなくとも、CDN側でキャッシュやアクセスに応じて適切にスケールしてくれる。

• Performance: パフォーマンス
  CDNで静的ファイルとして配信できるJamstackでは、ユーザーアクセス時にHTMLを生成したり、データベースにアクセスしたりする必要がない。

• Maintainability: メンテナンス性
  ホスティングがシンプルになると、メンテナンスも簡単になる。静的なWebサイトは安定していて、保守が必要なWebサイトはない。

• Portability: ポータビリティ
  静的なWebサイトとして生成されるJamstackサイトは、特定のホスティングサービスに依存することはない。より便利なホスティングソリューションがあれば、簡単に乗り換えられる。

• Developer Experience: 開発体験
  システムをAPIとして分離したことで、Webサイト制作側は通常Gitからリポジトリをクローンするだけで、あとはローカルで簡単に開発できる。
  また、Jamstackでは特定のフレームワークが決められているわけではない。ビルドに使うツールの言語も自由なので、得意な言語で書かれたツールも使える。

まとめ

Jamstackにおいて、最も重要なのは「分離」と「事前レンダリング」。
HTMLを作る「ビルドプロセス」と配信する「ホスティングプロセス」を分離し、さらに静的なHTMLによるフロントエンドとAPIによるバックエンドを分離する。
また、ビルドプロセスでできる限り静的なHTMLとして事前にデータを埋め込んだ状態にしてくおくことで、高速化を図る。

参照資料

• 公式ページ