これまでのホームページ制作では、WordPressや他のCMS（コンテンツ管理システム）でホームページを構築することが一般的でした。
しかし近年では、新たな開発手法として「Jamstack（ジャムスタック）」が注目されています。
そこで今回の記事では、当ホームページでも使用しているJamstackの基本的な概念やメリット・デメリットについて解説します。
非エンジニアの方でも理解しやすいように分かりやすく解説していきますので、ぜひ最後までお読みください。
そもそもJamstackとは？
まずは"Jamstack"という言葉の意味から見ていきましょう。
Jamstackは、定義された2016年ごろと現在では少し意味が異なりますので、まずはその違いから説明していきます。
以前のJAMstack(2016年頃)
Jamstackは主に3つの技術から構成されており、JavaScript・API・Markupの頭文字を取って"JAMStack"と名付けられました。
- JavaScript
開発に使用されるプログラミング言語 - API
データをやり取りするための仕組み - Markup
ページを表示する役割をもつ言語（HTML）
定義された当初は、これらの3つの技術構成（Stack）でホームページやアプリを構築する手法をJAMStackと呼んでいました。
現在のJamstack
現在のJamstackは、元々の技術セット（JavaScript、API、Markup）に限定されず、より幅広い意味で「静的ファイルを利用し、フロントエンドのパフォーマンスを重視する技術構成」を指すようになっています。
具体的には、サーバーで動的にページ生成をすることなく、事前に生成されたページ（静的ファイル）を高速で配信する構成がJamstackとされています。
このように、JavaScriptやAPIの使用が必須ではなくなり、技術の選択肢が広がったことで、かつての「JAMStack」から「Jamstack」へと名称も変わりました。
静的・動的サイトの違いとは？
静的サイトと動的サイトの主な違いは、ページを生成するタイミングにあります。
- 静的サイト
ユーザーがページをリクエストするよりも前に、あらかじめページを生成しておく - 動的サイト
ユーザーがページをリクエストした後に、ページを生成する
お弁当屋さんを例に分かりやすく説明すると、静的サイトは「事前に作ったお弁当を販売するお店」、動的サイトは「注文を受けてからお弁当を作るお店」といったイメージです。
Jamstackの4つのメリット
Jamstackには、主に以下の4つのメリットがあります。
- 表示速度が速い
- セキュリティ性が高い
- 柔軟な開発環境
- 大量のアクセスにも強い
上記について、それぞれ詳しく解説していきます。
表示速度が速い
まずJamstackの大きな特徴として、ページの表示速度が非常に速いです。
その速さの要因としては、以下の2つが挙げられます。
- 静的ファイルを事前に生成する（SSG）
- CDN（コンテンツデリバリーネットワーク）を利用する
静的ファイルを事前に生成（SSG）
従来の手法では、ユーザーがページをリクエストするたびに、サーバーでページを「動的に」生成してからブラウザで表示するという流れでした。
一方Jamstackでは、「静的に」ページを事前生成しておき、ユーザーのリクエストに応じて完成したファイルをそのまま返します。
ここでの大きな違いは、サーバーでページを生成する必要がないという点です。
Jamstackでは、SSG（Static Site Generation）と呼ばれる手法を用いて、事前にページを生成しておくことで、ページの表示速度を大幅に向上させています。
CDN（コンテンツデリバリーネットワーク）を利用
また、JamstackではCDN（コンテンツデリバリーネットワーク）を利用することで、ページの表示速度をさらに向上させています。
CDNとは、世界中に分散されたサーバー群を利用して、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。
従来の方法では、基本的には1つのサーバーから配信されるため、サーバーから物理的に距離がある場合や、サーバーの負荷などによって表示速度が遅くなることがありました。
CDNを利用することで、ユーザーの最寄りのサーバーからキャッシュされたコンテンツを配信することができるので、表示速度が大幅に速くなります。
まとめると、
- 静的ファイルを事前に生成（SSG）
- CDNで最寄りのサーバーから配信
という2つの要因により、表示速度の高速化を実現しています。
セキュリティ性が高い
次にJamstackのメリットとして、セキュリティ性が高いという点が挙げられます。
主な要因は、以下の2つです。
- 静的サイトなので攻撃されにくい
- CDNの利用によるDDoS攻撃対策
静的サイトなので攻撃されにくい
Jamstackでは、事前に生成した静的ファイルをCDNから配信するので、サーバーを介さずにコンテンツを配信することができます。
これにより、データベースやサーバーの脆弱性を狙った攻撃を回避することができます。
静的サイトでは、サーバーサイドでのコード実行やデータベースへのクエリが行われません。そのため、SQLインジェクションやクロスサイトスクリプティング（XSS）などの攻撃リスクが大幅に減少します。
CDNの利用によるDDoS攻撃対策
Jamstackのサイトは、静的ファイルを世界中にある複数のサーバー（CDN）から配信します。そのため、特定のサーバーに負荷が集中することがなく、攻撃を受けても他のサーバーが代わりにファイルを配信できます。
これにより、サーバーがダウンしにくく、DDoS攻撃（大量のリクエストを送りつける攻撃）などにも強い仕組みになっています。
まとめると、
- サーバーを介さずにコンテンツを配信可能
- CDNでアクセスの負荷を分散可能
という2つの要因により、セキュリティ性の高さを実現しています。
大量のアクセスにも強い
Jamstackの3つ目のメリットとして、大量のアクセスにも強いという点が挙げられます。
上記で説明したように、JamstackではCDNを利用することで、世界中に分散されたサーバーからコンテンツを配信することができます。
そのため、大量のアクセスが集中しても、リクエストが特定のサーバーに集中することがなく、全体の負荷が分散されます。
従来のサーバーサイド技術では動的にページを生成するため、アクセスが集中するとサーバーにかなりの負荷がかかります。その結果、ページの表示速度が遅くなったり、サーバーがダウンしてページを表示できないなどの問題が発生します。
しかしJamstackでは、そもそも静的ファイルをそのまま配信可能（リクエストのたびにページを生成する必要がない）なことに加え、CDNがアクセスの負荷を分散するため、結果として大量のアクセスにも強いということになります。
モダンで柔軟な開発環境
Jamstackは比較的新しい技術構成であるため、エンジニアにとっては最新かつ柔軟性の高い開発環境で制作することができます。
これにより、開発スピードの向上や開発の効率化が期待できます。
モダンな開発環境
Jamstackのモダンな開発環境では、Next.jsなどの最新フレームワークを利用することが一般的です。これらのツールは、高速なビルドやデプロイ、ホットリロード機能などを備えており、エンジニアが効率よく作業できるように設計されています。
また、Jamstackではサーバーの管理がほとんど必要なく、インターネット上の複数のサービスを簡単に利用できるため、新しい機能を短時間で追加できる点が大きな強みです。
結果として、開発スピードが速く、ウェブサイトの更新や修正も迅速に行うことができます。
柔軟な開発環境
Jamstackの開発環境は非常に柔軟であり、特定のプログラミング言語に縛られません。
例えば、WordPressではPHPをベースにしているため、開発者は必然的にPHPを使う必要があります。
一方Jamstackでは、ReactやVue.jsなどのJavaScriptフレームワークをエンジニアが自由に選んで使用できます。これにより、プロジェクトに応じて最適な技術を選択でき、開発の幅が広がります。
さらに、フロントエンドとバックエンドが分離されているため、異なる技術スタックを組み合わせて使うことができます。
必要に応じてサービスを簡単に拡張したり変更したりできる点も大きなメリットです。
Jamstackの3つのデメリット
Jamstackのメリットについて解説してきましたが、以下のようなデメリットも存在します。
- リアルタイムでの更新が難しい
- 開発コストが高い
- 大規模サイトだとビルドに時間がかかる
リアルタイムでの更新が難しい
Jamstackは、静的ファイルを事前に生成しておくという性質上、リアルタイムでの更新が難しいというデメリットがあります。
- 会員制サイト
- 通販サイト
- Twitterのようなアプリ
など、ユーザーごとに表示内容を変える必要があるサイト、リアルタイムでの頻繁な更新が必要なサイトには向いていません。
Jamstackが真価を発揮するのは、コンテンツが頻繁に変更されない、情報発信型のサイトであると言えます。
専門的な知識が必要
Jamstackは、従来の開発手法に比べて開発難易度が高く、専門的な知識が必要です。
Jamstackでサイトを制作する場合、最新のJavaScriptフレームワーク（例えばNext.jsやGatsby）、APIベースのシステム、サーバーレスアーキテクチャなどを活用します。これにより、開発者はこれらの技術やツールの理解が求められます。
WordPressのようなCMSでは、テーマやプラグインを利用することで非エンジニアでも簡単にサイトを制作可能ですが、Jamstackではエンジニアが中心となって開発を進める必要があります。
大規模サイトだとビルドに時間がかかる
Jamstackでは、公開前に全てのページを静的ファイルとして生成します。このプロセスをビルドと呼びますが、大規模なサイトだとビルドに時間がかかるというデメリットがあります。
ただし、この問題に関しては、ISR（Incremental Static Regeneration）などの新しい技術が登場しており、ビルド時間の短縮やパフォーマンスの向上が進んでいます。
従来では、少しの変更でも全ページを再ビルドする必要がありましたが、ISRを利用することで変更があったページだけを再ビルドすることが可能になり、ビルド時間の短縮が期待できます。
主要な静的サイトジェネレーター（Next.js、Gatsbyなど）は、ISRをサポートしているため、現在では大規模サイトでも効率的に開発を進めることができます。
Jamstackのメリット・デメリットまとめ
今回は、Jamstackの基本的な概念やメリット・デメリットについて解説しました。
Jamstackのメリットをおさらいすると、以下の通りです。
- 表示速度が速い
- セキュリティ性が高い
- 大量のアクセスにも強い
- モダンで柔軟な開発環境
パフォーマンスやセキュリティ性の向上、また柔軟な開発環境など、従来の手法よりも優れた点が多くあることがわかっていただけたかと思います。
また、デメリットとしては、以下のような点を挙げましたが、適切な場面でJamstackを活用すること、また新技術の導入により解決することができます。
- リアルタイムでの更新が難しい
→コーポレートサイトやメディアサイトなどに最適 - 専門的な知識が必要
→エンジニアに任せることで開発可能 - 大規模サイトだとビルドに時間がかかる
→ISRなどの新技術で解決
当記事を参考に、Jamstackを活用したサイト制作に興味を持っていただければ幸いです。
Jamstackのサイト制作ならHIVEにお任せください
HIVEでは、Jamstackを活用したサイト制作を得意としております。
格安でJamstack製のホームページを制作するサービス「Jam Factory」や、Jamstackのコーディング代行も対応可能な「CodeHive」を提供しておりますので、お気軽にご相談ください。
