JAMstackとは？

JAMstackとは？

JAMstackは、フロントエンドのWeb開発（ユーザーが操作するコンテンツやインターフェースの構築）に対するアプローチです。これにより開発者は、静的なWebサイトを素早く作成し、効率的にユーザーに提供することができます。

JAMstackのWebアプリケーションには、可能な限り多くのHTMLが事前に構築され、コンテンツ配信ネットワーク（CDN）に保存されています。サーバー側でモノリシックなバックエンドアプリケーションを実行して動的コンテンツを生成する代わりに、アプリケーションの動的コンポーネントはAPIに基づいたものになっています。ユーザーエクスペリエンスが大幅に高速化され、開発者のエクスペリエンスも大幅に簡素化されるため理想的です。

「JAMstack」は何の略ですか？

JAMは、JavaScript、API、Markupを略したものです。

• JavaScriptとは、Webアプリケーションで使用されるプログラミング言語のことです
• API（アプリケーション・プログラミング・インターフェース）とは、他者が構築したプログラムやアプリケーションからデータを要求する方法のことです
• マークアップとは、ブラウザに書式を指示するためのコード（HTMLやCSS）のことです

スタックとは、開発者がアプリケーションやWebサイトを構築できるように、これらすべてを組み合わせて使うことを指します。

JAMstackのWebサイトやアプリケーションは、この3つの要素だけで構成されています。ユーザーが見る静的なウェブサイトは、HTMLとCSSのマークアップコードから構築されます。JavaScriptは、必要な動的機能と、APIの呼び出しに使用されます。APIは、アプリケーションのバックエンドを提供します。

ボブが欧州サッカーのスコアに関する最新情報を提供するWebアプリケーションを構築するときのことを考えてみましょう。ボブは、自身が運営するサーバ上で動作する最新の試合のスコアを定期的にチェックするバックエンドアプリケーションを作成します。ユーザーがWebアプリケーションを開くと、ボブのサーバーはそのスコアを表示するHTMLページを生成し、そのページをユーザーに送信します。しかし、このWebアプリケーションは、バックエンドアプリケーションの実行時間、HTMLの生成時間、そしてユーザーの端末に届くまでの時間にやや待ちが発生します。

次に、ボブがJAMstackのアプローチでWebアプリケーションを再構築したきを考えます。バックエンドアプリケーション全体を書く代わりに、彼は一連の軽量なHTMLページを作成し、CDNに保存します。ユーザーがアプリケーションを開くと、CDNは対応するHTMLページを即座にユーザーに配信します。これはCDNがボブのサーバーよりもはるかにユーザーに近い場所にあるためです。また、このアプリケーションは、サッカーの試合のライブスコアをページ上に記入するためにAPIを呼び出します。ボブのWebアプリケーションは、ユーザーにとって非常に速く読み込まれるようになり、ボブの視点からは、スコアを更新するバックエンド、サーバーサイドの作業を処理するコードを書く必要性が大幅に減ったことになります。

静的Webサイトとは？

静的Webサイトは、1つまたは複数の静的ウェブページ（誰がファイルを読み込んでも同じようにブラウザで読み込まれるHTMLファイル）で構成されたものです。静的WebページはHTMLのみで構成され、ブラウザで実行する必要がある追加のコードがないため、非常に高速に読み込むことができます。（Chromeブラウザーを使用している場合、HTMLのコードを見るには、ウェブページを右クリックして「ページのソースを表示」をクリックします）

これに対し、動的Webページとは、読み込むたびに異なるページが表示されるものを指します。よりインタラクティブでパーソナライズされたユーザー体験を提供するため、動的なWebページは、ページを開いたユーザー、ページを読み込んだ場所、時間帯、その他多くの変化するデータの入力に基づいて変化します。動的なWebページが読み込まれる際には、WebページをホストするWebサーバーまたはユーザーのブラウザ内でコードを実行する必要があります。このようにコードを実行することに依存すると、ユーザーエクスペリエンスが低下する可能性があります。

動的なWebページだけが、現代的なユーザー体験を実現する唯一の方法というわけではありません。ほとんど静的なJAMstackのWebサイトでも、時々新しい静的コンテンツを生成したり、APIを呼び出して更新されたコンテンツを記入することで、ユーザーに動的かつパーソナライズされたエクスペリエンスを提供することは可能です。

JAMstackアプリケーションはバックエンド機能をどのように処理するか？

アプリケーション開発において、バックエンドとは、サーバーの裏側で実行されるコードのことを指します。通常、ユーザーはWebサイトやアプリケーションを使用している間、バックエンドで何が起こっているのか意識することはありません。JavaScriptとマークアップは、JAMstackのアプリケーションをユーザーに対してどのように表示するかを決定しますが、それでも動作するためにはバックエンドの機能が必要です。JAMstackは、JavaScriptを使用してAPIを呼び出すことでこれを処理します。

APIを使用することで、JAMstackの開発者は独自のバックエンドアプリケーションを構築する必要がなくなります。JAMstackの開発者はWebサイトやアプリ動作させるために既存のAPIを利用して構築することができます。

開発者がアプリケーションに使用する独自の機能を構築したい場合、新しいAPIを作成することができます。APIは様々なコンテキストで再利用できるため、開発者がバックエンド用に独自のAPIを構築する場合、その機能を一度構築するだけで将来のアプリケーションでも使用できるようになります。

JAMstackとマイクロサービスとの関連は？

APIを使用することで、JAMstackの開発者はバックエンドに対してマイクロサービス的なアプローチを取ることができます。マイクロサービスアーキテクチャでは、アプリケーションのバックエンドはコマンドで実行される小さなチャンクに分解されます。これは、JAMstackアプリケーションが必要に応じてさまざまなAPIを呼び出すのと同様ですが、それ以外の場合はバックエンドのサポートは必要ありません。

また、部分的または完全なサーバーレスバックエンドを使用するJAMstackアプリケーションを構築することも可能です。サーバーレス関数は、オンデマンドで実行される、再利用可能な小さなコードスニペットです。しかし、サーバーレスアーキテクチャは、多くの場合APIを呼び出すのではなく、基本的にバックエンドアプリケーションを自分で構築するため、多くの場合開発者はバックエンドに対してより実践的なアプローチをとる必要があります（ただし、サーバーのプロビジョニングについては心配する必要はありません）。

JAMstackを使用する利点とは？

• パフォーマンス：JAMstackアプリケーションのほぼすべてのコンテンツは、CDNから提供される静的なHTMLファイルで構成されています。これは、エンドユーザーにWebコンテンツを配信するための最速の方法です。
• スケーラビリティ：アプリケーションが「スケーラブル」であるということは、使用量の大幅な増加に適切に対応できることを意味します。JAMstackのフロントエンドは高速であり、バックエンドは軽量であるため、多くの場合JAMstackアプリケーション非常にスケーラブルなものになっています。
• 開発者のエクスペリエンスを向上：JAMstackを使用することで、開発者はバックエンドやパフォーマンスの問題を気にすることなく、魅力的なフロントユーザーエクスペリエンスの構築に集中することができます。

Cloudflareを使用することで、開発者はCloudflareのグローバルCDNに直接ホストされるアプリケーションを構築することができます。静的Webサイトを構築するためのJAMstackプラットフォームであるCloudflare Pagesの詳細についてご覧ください。Cloudflare Pagesを使用したGatsbyサイト、Hugoサイト、Reactアプリケーション、その他の構築方法に関する詳細や、調査会社であるRedmonkによるCloudflare Pagesの概要の動画もご覧いただけます。