JAMstack: The What, the Why and the How

getdocs

2年前

序章

Web開発では、LAMPスタック、MEANスタック、MERNスタックなど、さまざまな開発スタックを使用することがよくあります。 JAMstackは、開発者にいくつかの独自の利点を提供するもう1つのスタックです。この記事では、JAMstackの概要を説明するために、これらの利点といくつかの一般的な定義および用語について説明します。

JAMstackとは何ですか？

静的なWebサイトは、最近使用と機能が拡大しています。 HTMLおよびCSSファイルのコレクションではなくなり、静的Webサイトは支払いの処理、リアルタイムアクティビティの処理などを行います。これらのサイトを「静的」と呼ぶことは、それらの機能を弱体化させ、説明しません。したがって、用語JAMstack。

JAMstackは、 J avaScript、 A PI、および Markupの略です。公式のウェブサイトによると、JAMstackは次のことを意味します。

クライアント側のJavaScript、再利用可能なAPI、および事前に構築されたマークアップに基づく最新のWeb開発アーキテクチャ。

この用語は、Netlifyの共同創設者であるMathiasBiilmannによって造られました。

JAMstackを使用すると、オペレーティングシステム、Webサーバー、バックエンドプログラミング言語、データベースなどの特定のテクノロジについて話す必要がなくなります。これは、より優れたパフォーマンス、より高いセキュリティ、より低いスケーリングコスト、およびより合理化された開発者エクスペリエンスを提供するWebサイトおよびアプリを構築する新しい方法です。

なぜJAMstackなのか？

JAMstackの使用をいつ検討する必要がありますか？ JAMstackを検討する理由は次のとおりです。

より高速なパフォーマンス： JAMstack Webサイトは事前に構築されたHTMLとアセットであるため、CDNを介して提供できます。
より高いセキュリティ： JAMstack Webサイトは、サーバーとデータベースの表面領域の脆弱性を軽減します。
低コスト： JAMstack Webサイトを実行するコストは、使用するリソースが少ないため、一般的に同等の代替手段よりも低くなります。
開発者エクスペリエンスの向上： JAMstackを使用すると、アプリケーションのバックエンドとフロントエンドの間に緊密な結合はありません。これは、さまざまなCMSおよびコンテンツインフラストラクチャオプションから選択できることを意味し、コンテンツを維持および提供するための個別のスタックの必要性を排除します。 JAMstackを使用すると、AlgoliaやNetlifyFormsなどのサードパーティサービスを使用するプロセスも簡素化されます。

次のような動的機能をJAMstackWebサイトに統合するサービスも増えています。

Netlify Identity 。これにより、サインアップ管理、ログイン、パスワード回復などが可能になります。
AlgoliaおよびLunr.jsを使用した全文検索。
FormspreeまたはNetlifyFormsを使用したフォーム処理。

JAMstackで構築する方法

JAMstackを使用してプロジェクトをビルドするには、次の基準を満たしている必要があります。

JavaScript：要求/応答サイクル中の動的プログラミングはJavaScriptによって処理され、完全にクライアント上で実行されます。これは、 Vue.js 、 React 、Anglerなどのフロントエンドフレームワークである可能性があります。またはバニラJavaScriptですら。
API：すべてのサーバー側プロセスまたはデータベースアクションは、JavaScriptを使用してHTTP経由でアクセスされる再利用可能なAPIに抽象化されます。これらはカスタムビルドすることも、サードパーティのサービスを活用することもできます。
マークアップ：テンプレート化されたマークアップは、通常、 GatsbyJS 、 Nuxt.js 、 Hugo などのサイトジェネレーターを使用して、デプロイ時に事前にビルドする必要があります]コンテンツサイトの場合はWebpack、Webアプリの場合はParcelJSなどのビルドツール。