序章

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サイトに統合するサービスも増えています。

JAMstackで構築する方法

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

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

これらを念頭に置いて、次のプロジェクトはではなくJAMstackプロジェクトです。

  • WordPress、Drupalなどのサーバー側CMSで構築されたプロジェクト。
  • PHP、Node、またはその他のバックエンド言語などのバックエンド言語に依存するモノリシックサーバー実行Webアプリ。
  • 実行時にサーバー上にビューを構築するために同形レンダリングを使用するシングルページアプリ（SPA）。

JAMstackを使用してプロジェクトを構築するときは、次のベストプラクティスに留意してください。

  • サイト全体をCDNで提供する必要があります。
  • アトミックデプロイを採用します。
  • インスタントキャッシュの無効化を使用します。
  • すべてがGit上に存在する必要があります。
  • マークアップビルドは自動化する必要があります。

結論

この記事では、JAMstackとは何か、そして次のプロジェクトでJAMstackを検討する理由について学びました。 また、JAMstackサイトのプロジェクト要件についても学びました。 JAMstackで構築されたWebサイトおよびWebアプリの例については、これらの公式の例も参照できます。

JAMstackの詳細については、公式のWebサイトおよびリソースセクションを参照してください。