Jamstackとは？

事前にデータを埋め込んだ静的HTMLを生成することで、配信するWebアプリケーションと、コンテンツを管理するCMSなどを完全に分離したアーキテクチャをJamstackといいます。静的HTMLでも、完全に分離したサービスやシステムのAPIを通じて、ブラウザで実行するJavaScriptで動的コンテンツを扱えます。

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

コンテンツを管理するCMS、ユーザー認証、支払いシステムが完全に別のサービスやシステムに分離されるため、既存の優れたサービスより自由に選択し、それらをAPIで繋ぐことで、必要な仕組みごとに適切なサービスを組み合わせられます。より少ない開発コストで高度な仕組みを構築でき、より良いWebサービスをすばやく開発できます。

Jamstackの解説

これまでのWebとの比較

Webサーバーを使わず、Jamstackで使われるホスティングサービスによって配信できるメリットをこれまでのWebとの比較しながら解説します。

事前にデータを埋め込む

Jamstackの特徴である、静的サイトジェネレーター（SSG）を利用して事前にデータを埋め込んだ静的HTMLをつくるメリットを説明します。

高度なUIと動的データ

静的なHTMLだからといって、高度なUIや動的なデータを扱えないわけではありません。ピクセルグリッドの得意とするJavaScriptとSPAの技術を利用したWebアプリについて解説します。

モダンなサービスを活用

Jamstackでいままでのサーバーサイドで実現していた機能を実現するには、APIが必要になります。すべてを新たに構築しなくても、現在は優秀なサービスが多く公開、提供されています。

Jamstackの定義

JamstackといえるWebアプリ、Webサイト

  • CDNやJamstackで使われるホスティングサービスで配信できる静的なHTMLがベース
  • 事前にデータを埋め込んだ静的HTMLを生成するので高速に配信
  • 動的なコンテンツはJavaScriptにより、APIを通じて取得し表示

Jamstackではない構成

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

  • WordPressなどのサーバーサイドで動くCMSにより管理・公開されているWebサイト
  • PHP、Ruby on RailsによりサーバーサイドでHTMLが作られるWebアプリケーション
  • 事前にコンテンツを埋め込まないSPA（シングルページアプリケーション）

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

致知電子版

月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。
Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現した。

メディアサイト

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

セゾンカード

リニューアル時のフロントエンド開発を担当。
EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現した。

コーポレートサイト

  • Eleventy
  • microCMS
  • AWS Amplify
  • Svelte
  • GitHub

Jamstackで解決したいプロジェクトがあれば、技術選定の前に気軽にお問い合わせよりご相談ください。

お問い合わせ