クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか

Post on:2019年11月5日

はじめに

最近、静的サイトジェネレーターが非常に普及してきています。静的サイトジェネレーターは使い方が簡単で、最新のテクノロジーとVue.jsやReactなどのJavaScriptフレームワークに基づいて実装されています。静的サイトジェネレーターをはじめ、モダンブラウザ、CDN、APIのおかけで、Web開発者はサーバーサイドからクライアントサイドのアプリケーションへと移行しています。

これを受けて、NetlifyはJAMstackという新しい用語を発表しました。
JAMstackとは何なのか、なぜJAMstackが注目されているのか見てましょう。

JAMstackとは

JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWeb開発アーキテクチャで、Webサーバーには依存しません。

JAMstack

ブログでこんな言葉を見かけました。

JAMstackは静的なHTMLサイトで、コンテンツを更新するたびに自動的に再構築され、CDNに直接デプロイされます。

JAMstackを表現する定義としては、私はこちらの方が良いと思います！
ちなみにJAMstackのJAMは、JavaScript、API、Markupの頭文字です

JavaScript

リクエスト・レスポンスのサイクル中の動的プログラミングは、すべてJavaScriptで処理され、完全にクライアント上で実行されます。これは、どんなフロントエンドのフレームワークやライブラリでもよく、バニラJavaScriptでもかまいません。
APIs

すべてのサーバーサイドのプロセスまたはデータベースのアクションは、再利用可能なAPIに抽象化され、JavaScriptを使用してHTTPS経由でアクセスされます。これらは、カスタムビルドすることも、サードパーティのサービスを活用することもできます。
Markup

テンプレートのマークアップは通常、コンテンツサイト用のサイトジェネレーターやWebアプリのビルドツールを使用して、デプロイ時にあらかじめ構築しておく必要があります。

JAMstackを使用する利点

JAMstackを使用する主な利点は、下記のとおりです。

より高速で、優れたパフォーマンス

JAMstackはデプロイ時に新しいページを生成し、CDNでビルド済みのマークアップとアセットを提供することができます。

低コストで、拡張が容易

開発の複雑さが軽減されることでコストが削減され、静的ファイルのホスティングも低コストまたは無料です。

セキュリティの強化

サーバーサイドとデーターベースの操作を委任することで、脆弱性を心配する必要がなくなります。

開発者エクスペリエンスの向上

フロントエンドの開発者は、フロントエンドとデバッグにのみ集中できます。サイトジェネレーターのCMSオプションの選択肢が広がるため、保守の必要はなくなります。これにより、より迅速で集中的な開発を行えます。

JAMstackのワークフロー

WordPressのサイトにアクセスすると、通常はロードに非常に時間がかかることに気がつきます。この原因はデータベースに対して多くのリクエストをするからです。
JAMstackでは、HTMLがロードされたら個別のAPIを呼び出して、必要に応じて動的データを取得できます。これにより、サイトの速度と効率が大幅に向上します。