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

静的サイトジェネレーターが最近、非常に普及してきました。
それに合わせて注目されているのが「JAMstack」です。JAMstackとは何なのか、なぜJAMstackが人気になっているのかを紹介します。

サイトのキャプチャ

Why JAMstack is Becoming so Popular
by Luca Spezzano

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

これを受けて、NetlifyJAMstackという新しい用語を発表しました。
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のワークフロー

JAMstackのワークフロー

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

JAMstackはなぜ人気があるのか

これは主に3つの理由があると思います。

  • まずは、上記の利点のリスト。
  • 開発者が最新ののJavaScriptフレームワークでWebサイトを構築するのに役立つ静的サイトジェネレーターを使用する機会が得られる。
  • APIを介してコンテンツにアクセスできるヘッドレスCMSの驚異的な増加。

まとめ

JAMstackを使用する可能性は、無限にあります。CMSを必要とする単純なブログやサイトをはじめ、eコマース、さらに複雑なWebアプリまで。この記事では、JAMstackを使用する利点となぜ人気があるのかについて説明しました。

JAMstackはあなたのニーズを満たすことができるので、もっと学ぶことを強くお勧めします。

静的サイトジェネレーター

最も人気のある静的サイトジェネレーターには、Nuxt.js(Vue.js)、Gridsome(Vue.js)、Next.js(Next.js)、Gatsby(React)、JekyllHugoなどがあります。

バックエンド機能用のヘッドレスCMS

最も人気のあるヘッドレスCMSには、NetlifyContentfulStrapiGhostPrismicなどがあります。

JAMstackの有用なリソース

JAMstack用のテーマファイルも豊富にあります。

サイトのキャプチャ

JAMstack Themes

sponsors

top of page

©2020 coliss