×

Jamstackが注目を集める理由とは?メリット・デメリットをわかりやすく解説

2022/02/28

ウェブ制作の新しい標準アーキテクチャになると注目されているJamstack(ジャムスタック)。Jamstackにはどのようなメリットがあり、どのようなウェブサイト作りに向いているのか、この記事の中で解説していきます。

 

Jamstackとは

JamstackはWordPressのように特定のサービスやソフトウェアを指す言葉ではありません。Jamstackの冒頭3文字はJavaScriptの”J”、APIの”A”、Markupの”M”を並べたもので、つまりJamstackとはこれらの3つの技術を利用し、Webをより速く、より安全に、そしてより簡単に拡張できるように設計されたアーキテクチャです。

どのように実現するかというと、Jamstackは、pre-rendering(事前生成)とdecoupling(分離)という2つの原則で定義されています。

pre-rendering(事前生成) は、サーバーでHTMLを作らずSSG(Static Site Generator)で静的HTMLをビルドしCDNで配信します。
もう一つの原則、decoupling(分離)ですが動的コンテンツはJavaScriptとAPIに分離するというものです。 これによりWebをより早く、より安全に、より簡単に実現することができます。その仕組みについてもう少し解説していきます。

 

Jamstackの仕組み

Jamstackの仕組みは従来のウェブページ生成の仕組みと比べて非常にシンプルです。
ここでは一般的なウェブ制作方法であるサーバーサイドレンダリング、クライアントサイドレンダリングとの比較で説明しましょう。

従来のウェブ

【サーバーサイドレンダリング(SSR)

 

まずサーバーサイドレンダリングは、以下の仕組みです。

①閲覧者がウェブサーバーにアクセス

②ウェブサーバーがデータベースにアクセスしてウェブページを生成

③それを閲覧者のブラウザに返す

 

【クライアントサイドレンダリング(CSR)

 

クライアントサイドレンダリングはもう少し複雑です。

①閲覧者がストレージからHTMLやJavaScriptが記述されたページを取得

②ページ内のJavaScriptを実行してウェブサーバーにデータを要求

③要求を受けたウェブサーバーがデータベースからデータを取得

④そのデータを閲覧者のブラウザに返す

 

Jamstack

【Jamstack(フロントエンド)

 

これに対しJamstackの仕組みは、

①閲覧者がストレージにアクセス

②ストレージが閲覧者にウェブページを返す

というものです。この方法では、ウェブページの要求から閲覧までの過程にウェブサーバーは介在しません。

 

【Jamstack(バックエンド)

 

ただしJamstackに「ウェブサーバーは一切必要ない」と考えるのは間違いです。
ウェブページの準備段階(バックエンド)では、Jamstackも上図のようにウェブサーバーでウェブページを生成しています。
サーバーサイドレンダリングとの違いは、生成したウェブページを閲覧者のブラウザに送る代わりに、いったんストレージに配置するという点です。

 

Jamstackのメリット

Jamstackには、ウェブページ生成の仕組みと比べてさまざまなメリットがあります。

高パフォーマンス

最大の(わかりやすい)メリットといえるのがパフォーマンスの高さです。Jamstackでは閲覧者の要求に対して静的ページを返すだけなので、CDNで配信できることで、レスポンスが早く、アクセスが極端に集中してもパフォーマンスが落ちません。

 

ユーザーエクスペリエンス

レスポンスの速さは閲覧者のユーザーエクスペリエンスを向上させます。一般にページ表示速度が遅くなると直帰率や離脱率が増えるといわれるため、これはサイト運営者にとっても大きなメリットです。

なお動画のトランスコードはクラウド上のサービスやCDNプロバイダーに任せることもできます。設備投資のコスト削減やスピーディーな配信のために、こうしたサービスを活用するのもお勧めです。

 

SEOに有利

高いパフォーマンスとユーザーエクスペリエンスの向上はGoogleに高く評価されるポイントです。このためJamstackはSEO対策においても有利になります。

 

高いセキュリティ

Jamstackは静的なのでクロスサイトスクリプティング(XSS)などのユーザー入力の影響や個別サーバーの脆弱性の影響を受けにくいため、セキュリティ面でも強化されます。但し、APIについては従来通りのため、APIセキュリティについては、引き続き、考慮する必要があります。

 

高い拡張性

JamstackのフロントエンドはCDNサービスとの相性が良く、またバックエンドのウェブサーバーと完全に切り離されているため拡張が容易です。

 

メンテナンス性

Jamstackではどれだけフロントエンドを拡張しても、ウェブサーバーは基本的にそのままの規模で運用できます。サイトの規模に関係なく、高いメンテナンス性を維持こともメリットのひとつです。

低コスト

攻撃を受けるリスクが低いこと、システムの拡張に低コストのCDNを利用できること、メンテナンス性が高いことなどは、いずれも運用コストの低さに直結します。

 

Jamstackのデメリット

ここまで Jamstack の様々なメリットについて説明してきましたが、もちろん Jamstack も万能ではありません。上述の SSG による Web ページの事前生成はJamstack を構成する主要な技術スタックですが、これらは静的サイトであるがゆえ、動的なコンテンツにはフォーカスしていません。しかし最近は、Layer0 by Limelight のように、Jamstack に対応しながら、動的コンテンツの配信も得意とするプラットフォームも存在しています。

 

Jamstackの得意分野

Jamstackは静的ページ、たとえばコーポレートサイトやサービスサイトなど、頻繁に更新する必要のないウェブページの配信に向いています。

 

まとめ

Jamstackで利用できる各種ウェブサービスはここ数年急速に成長しており、いずれはJamstackがウェブ制作の主流となる可能性もあります。しかしJamstackと従来のウェブページ生成の仕組みは、決して排他的なものではありません。どちらにも一長一短があるため、目的に応じて使い分けていくことが重要です。