Jamstackとは？
事前にデータを埋め込んだ静的なHTMLをベースに、JavaScriptを使いAPIを通じて動的なコンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。
静的なHTMLとJavaScriptをベースにすることで、CDNで配信でき、Webサーバーの管理や運用をなくせます。 大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利な構成です。
Jamstackの解説
これまでのWebとの比較
Webサーバーを使わず、CDNで配信できるメリットをこれまでのWebとの比較しながら解説します。
事前にデータを埋め込む
Jamstackの特徴である、静的サイトジェネレーター（SSG）を利用して事前にデータを埋め込んだ静的なHTMLをつくるメリットを説明します。
高度なUIと動的データ
静的なHTMLだからといって、高度なUIや動的なデータを扱えないわけではありません。ピクセルグリッドの得意とするJavaScriptとSPAの技術を利用したWebアプリについて解説します。
モダンなサービスを活用
Jamstackでいままでのサーバーサイドで実現していた機能を実現するには、APIが必要になります。すべてを新たに構築しなくても、現在は優秀なサービスが多く公開、提供されています。
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（シングルページアプリケーション）
ピクセルグリッドの開発実績
CodeGrid
自社で運営するフロントエンド 技術情報のメディア「CodeGrid」はJamstackで作成されています。
- ページ数 約4000ページ
- Auth0による認証
- Netlifyでのホスティング
- Eleventyによる事前レンダリング
- GraphCMSによるコンテンツ管理
- Algoliaによる記事検索
- Netlify functionによる独自API
CodeGridで採用されているサービス、ライブラリ
SARF CMS
エイベックス・エンタテインメント株式会社が提供する音声AR体験"SARF"。そのコンテンツを管理する"SARF CMS"の情報設計、画面UI設計、画面デザインとフロントエンド開発を担当。Amazon Cognitoの認証に対応したSPAをNuxt.jsで実装した。また、Netlifyを利用したプレビュー環境を構築し、開発時のスムーズな状況共有とコミュニケーションを実現した。
SARF CMSで採用されているサービス、ライブラリ
Jamstackで解決したいプロジェクトがあれば、
技術選定の前に気軽にご相談ください。