Jamstackは、近年注目を集めているウェブサイトの新しい作り方です。
特にヘッドレスCMSを導入する際に採用されることが多く、スピードや安全性に優れているため、さまざまな企業で採用されています。
エンジニアにとってはよく知られた制作手法ですが、非エンジニアのディレクターやウェブサイト制作を依頼するお客様にとっては、まだ十分に知られていないのが現状です。

この記事では、従来型のウェブサイトの仕組みと比べながら、Jamstackがどのようなものかを分かりやすく解説します。Jamstackのメリットやデメリット、そしてサイトの用途に応じて最適な構成を選ぶポイントについて説明します。

目次

Jamstackとは

Jamstackとは、ヘッドレスCMSを導入する際によく採用されるWebサイト制作手法です。

具体的には、「モダンなJavaScriptやAPIを活用して、静的HTMLを事前生成し、CDNで配信するウェブ構築手法」のことを指します。

Jamstackは何の略？

JamstackのJAMは

J: JavaScript
A: APIs
M: Markup

の略です。

マークアップはhtmlのことで、stackは積み重ねていくという意味の単語です。

Jamstackの由来と定義の変化について

Jamstackという言葉は、2016年にアメリカのウェブサイト管理サービス企業であるNetlify社によって定義されました。

What is Jamstack?

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

Jamstack removes the need for business logic to dictate the web experience.

It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

引用：https://jamstack.org/

かつては「JAMstack」という形で、JAMが大文字で表記されていました。
英語圏では「略称を連結させる時は大文字で表示する」というルールがあるため、Javascript、API、Markupの略称であるJAMは大文字で表記されていました。

しかし現在では、「Jamstack」のように小文字で表記されます。
これは、提唱された当時から現在までに技術が進歩した結果、JavaScriptとAPIは必須ではなくなったためです。

このように、Jamstackの概念は曖昧で、解釈は年々変化しています。

POINT

この記事では

・モダンなJavaScriptやAPIを活用している
・静的HTMLを事前生成してCDNで配信している

こちらを満たすWeb構築手法を、Jamstackと呼びます。

Jamstackではない、従来型（モノリシック）構成のサイト

Jamstackのメリットを理解するために、まず従来型（モノリシック）サイトの構成について理解する必要があります。

従来型（モノリシック）サイトのページ生成方式

WordPressなどの一般的なWebサイトは、ユーザーがURLにアクセスするたびにページを生成しています。

従来型（モノリシック）サイトのページ生成方式

従来型（モノリシック）サイトの場合、ユーザーからウェブサイトにアクセスがあると、データベースからデータを取得してからサーバー上でhtmlファイルが生成されます。
ブラウザは、生成されたhtmlファイルを受け取ります。

この方式は、SSR(サーバーサイドレンダリング)と呼ばれます。

従来型（モノリシック）構成のデメリット

従来型（モノリシック）構成には

  • 表示速度が遅い
  • サーバーに負荷がかかる
  • セキュリティに懸念

といったデメリットがあります。

表示速度が遅い

ユーザーがアクセスするたびにデータベースとのやり取りが必要になるので、表示速度が遅くなります。
表示速度の遅さはSEOでマイナス評価になり、コンバージョン率も低下します。

サーバーに負荷がかかる

急激なアクセス増加があると、サーバーの処理能力に負荷がかかります。
レスポンスに時間かかるようになり、サーバーがダウンすることもあります。

セキュリティに懸念がある

直接サーバーにアクセスできてしまうため、攻撃者にとってハッキングしやすくなります。
大企業や公的機関のサイトでは、セキュリティの高さは特に重視したいポイントです。

Jamstack構成のページ生成方式とメリット

Jamstack構成のページ生成方式とメリット

Jamstack構成では、まず静的サイトジェネレータ(SSG)を使用して、htmlファイルを事前に生成（ビルド）します。
また、ビルドされたHTMLファイルは、CDN（Content Delivery Network）にアップロードされます。

ページにアクセスしたユーザーは、基本的にはCDNにアップされた静的HTMLファイルを閲覧します。

なお、一部動的なHTML生成が必要なものは、クライアントサイド（ブラウザ）でAPIを経由して生成します。

Jamstack構成のメリット

Jamstack構成には

  • ページを高速に表示できる
  • 大量のアクセスがあってもサーバーに負荷がかからない
  • セキュリティが堅牢になる

というメリットがあります。

ページを高速に表示できる

事前にhtmlを生成しておくことで、従来型のようなアクセスがある度にページを生成する処理は不要になります。
生成する処理を省くことで、ページを高速に表示することができます。

また、生成されたhtmlファイルはCDNによって配信されます。
CDNは世界各地に配置されたサーバーのことで、ユーザーのアクセスした地点から物理的に近いサーバーが選択されるため、通信距離が短くなり高速にページが表示されます。

大量のアクセスがあってもサーバーに負荷がかからない

ページの生成処理を行う際、サーバーには負荷がかかります。
Jamstackの場合、ページにアクセスしたユーザーは、基本的にはCDNで配信されたHTMLファイルを閲覧しています。
本体のサーバーには負荷がかからないため、大量のアクセスがあった場合でもCDNによって負荷を分散すれば対応できます。

セキュリティが堅牢になる

CDNをユーザーと本体サーバーの中間に配置することで、ユーザーはサーバーに直接アクセスすることができません。
SQLインジェクションなど、動的サイト特有のセキュリティリスクが少ないのもJamstackのメリットです。

Jamstack開発のデメリット

対応できる技術者が少ない

Jamstack開発のデメリットの1つに、対応できる技術者が少ないことが挙げられます。
モダンな開発スキルのため、状況に応じたサーバーの構築や技術スタックを持ったエンジニアは限られています。

ビルドの時間・タイミングを調整する必要がある

また、ページの特性によって、ビルドの時間・タイミングを調整する必要があります。

大量のページがある場合、全ページをビルドするのに1時間以上かかることもあります。
CMSで記事を更新してから反映まで1時間かかる場合、即時性が重視されるニュースサイトや時間通りに公開したいキャンペーンサイトの運用に支障が出ます。

早く公開したいページや頻繁に更新されるページでは、ほぼ即時反映されるISR（Incremental Static Regeneration）などの方式を採用するなど、ページの特性に応じたビルド方法を設定する必要があります。

Jamstackの構成例とよく使われるサービス

Jamstackでは、以下のような構成でコンテンツを配信しています。

コンテンツが配信されるまでのJamstack構成

よく使われる人気のサービスについてご紹介します。

ヘッドレスCMS

コンテンツの管理と表示を分離する仕組みを採用したCMSをヘッドレスCMSと呼びます。

  • Contentful
  • Strapi
  • BERYL

などがあり、国産のヘッドレスCMS「BERYL」は特にSEOに強い機能が備わっています。

メディア運営に特化したヘッドレスCMS「BERYL」 >

静的サイトジェネレータ（JavaScriptフレームワーク）

静的サイトジェネレーターとは、コンテンツデータとテンプレートから、静的なHTMLを生成するツールのことです。
主にJavascriptのフレームワーク※が使われます。
（※「足場」を意味する単語で、プログラミングの世界では開発の基盤になるプログラムのこと）

  • Gatsby
  • Nuxt
  • Next.js
  • Astro
  • Hugo

などがあり、Next.jsなどページを高速表示するための機能が備わっているフレームワークもあります。

CDN（コンテンツ・デリバリ・ネットワーク）

静的にビルドしたhtmlファイルをCDNで配信することができるサービスです。

  • Netlify
  • Vercel
  • AWS Amplify

などが代表的です。

中でも「Netlify」は、Jamstackという言葉を初めて提唱した企業でもあり、GoogleなどのIT企業でも採用されています。

サイトによってどの構成が理想的か？

まとめると、Jamstackと従来型（モノリシック）の構成には、以下のような違いがあります。

  従来型（モノリシック） Jamstack
レンダリング リクエスト時にサーバーで動的に生成（SSR） ビルド時に静的HTMLを生成（SSG）
パフォーマンス サーバー負荷が増えると低下 CDN配信で高速
セキュリティ サーバー側に脆弱性のリスクがある サーバーレスに近く、リスクが低い
スケーラビリティ サーバーのスケールアップが必要 CDNによる分散配信なのでスケールしやすい
柔軟性

一体化しているため、技術選択が限定される

 フロントエンド・バックエンドが分離しているため柔軟性が高い

個人運営のブログなど、アクセスが少なくセキュリティもそこまで気にする必要がないサイトの場合、WordPressなどの従来型（モノリシック）構成がおすすめです。

しかし、企業が運営するコーポレートサイトや、SEOで上位表示を狙いたいメディアの場合は、Jamstack構成が理想的です。

JamstackとWordPressの違いについては、こちらの記事で詳しく解説しています。

あわせて読みたい

JamstackとWordPressの違いとは？メリット・デメリットを比較

 

この記事を書いた人
BERYL編集部
「BERYL編集部」は、Web制作、CMS関連、Webマーケティング、コンテンツマーケティング、オウンドメディアなど、多岐にわたる分野で専門的な記事を制作しています。デジタル領域における最新の技術動向や実践的な事例を通じて、マーケティング戦略を強化するための情報を発信いたします。 また、SEO対策やコンテンツの最適化にも注力。ユーザー目線でわかりやすく解説し、企業のマーケティング活動やコンテンツ運営をサポートします。