Help us understand the problem. What is going on with this article?

JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ

More than 1 year has passed since last update.

JAMstackの概要を意訳しました。
誤りやより良い表現などがあればご指摘頂けると助かります。

原文: https://jamstack.org/


「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプログラミング言語やデータベースについてはもう触れる必要はありません。

JAMstackは特定のテクノロジーではありません。これは、高速化、堅牢なセキュリティ、スケーリングコストの低減、そしてより良い開発者体験をもたらすWebサイトやアプリケーションを構築する新たな手法です。

JAMstackとは?

下記3点の基準を満たせばJAMstackで構築されたと言って良いでしょう。

1. JavaScript

リクエスト/レスポンスサイクル中の動的プログラムは全てクライアントサイドのJavaScriptによって制御されます。フロントエンドのあらゆるフレームワーク、ライブラリ、そしてバニラJSでさえも実現可能です。

2. API

全てのサーバサイドの処理やデータベースアクションは再利用可能なAPIに抽象化され、JavaScriptによるHTTP経由でアクセスされます。これはカスタムビルドもしくはサードパーティのサービスを利用可能です。

3. Markup

テンプレート化されたマークアップはデプロイ時に事前ビルドされる必要があり、通常はコンテンツサイト用のサイトジェネレータやWebアプリケーション用のビルドツールを使用します。

事例集はこちら

JAMstackに該当しないパターン

クライアントとサーバが密結合しているあらゆるプロジェクトはJAMstackで構築されたとは言えません。下記のものが含まれることが多いです。

  • WordPress、Drupal、Joomla、そしてSquarespaceのようなサーバサイドCMSで構築されたサイト
  • Ruby、Nodeや他の言語に依存するモノリシックなサーバが動作するWebアプリケーション
  • 実行時にサーバ側でアイソモーフィックレンダリングでビューを構築するSPA

JAMstackを採用する理由

高速化

デプロイ時にページを生成できるようになった今、その場でページが構築されるのを待つ理由がありますか?初期読み込み時間の最小化に関しては、CDNで提供される事前ビルドされたファイルに勝るものはありません。

堅牢なセキュリティ

サーバサイドの処理がマイクロサービスのAPIに抽象化されることで、攻撃対象が縮小されます。ドメインに特化したサードパーティサービスを利用することも可能です。

スケーリングコストの低減

デプロイが場所を問わない大量のファイルになってくると、スケーリングはより多くの場所でファイルを提供することが重要な課題となります。CDNが完全にこの役目を果たします。また、通常はスケーリングは全てのプランに含まれます。

より良い開発者体験

疎結合と制御の分離によって、より照準を絞った開発とデバッグが可能になり、サイトジェネレータとしてのCMSの選択肢が増えることで、コンテンツとマーケティングのための別のスタックを維持する必要がなくなります。

ベストプラクティス

CDN上の完全なプロジェクト

JAMstackはサーバサイドのコードに依存しないため、単一のサーバに同居する代わりに配布されます。CDNから直接提供されるため、無類のスピードとパフォーマンスを発揮します。アプリケーションを限界まで追い込めば追い込む程、より良いユーザー体験に繋がります。

全てがGit内で完結する

JAMstackプロジェクトでは、誰もがgit cloneでき、標準的な手順(npm installのような)であらゆる依存関係をインストールでき、また完全なプロジェクトをローカル環境で実行可能です。クローンするデータベースもなく、複雑なインストールも不要です。コントリビュータの苦労を減らし、ステージングとテストのワークフローを簡略化します。

モダンなビルドツール

モダンなビルドツールの世界を活用してください。ジャングルのようで素早く変化し続ける空間のようですが、未来のWeb標準を未来のブラウザを待たずに利用したくなるでしょう。Babel、PostCSS、Webpackなどが利用可能です。

自動化されたビルド

JAMstackのマークアップは事前ビルドされているため、コンテンツの変更は新たなビルドを実行するまで反映されません。このプロセスの自動化は多くの不満が解消されます。Webフックを使って自前で実装しても良いですし、自動サービスを含むパブリッシングプラットフォームを利用しても構いません。

アトミックなデプロイ

JAMstackプロジェクトが成長すると、新たな変更が数百ファイルの再デプロイを必要とするかも知れません。これらのファイルを一度にアップロードすると、プロセス完了までの間に状態の不整合が起こる可能性があります。これを回避するため、全ての変更がアップロードされるまで反映されない「アトミックなデプロイ」を行うシステムが必要です。

即時キャッシュ無効化

ビルドからデプロイのサイクルが定常化すると、デプロイ実行時にそれが実際に反映されることを知る必要があります。CDNが即座にキャッシュを無効化できることを知って迷いを消し去りましょう。

ossan-engineer
フロントエンドエンジニア/ React / TypeScript / GraphQL / OOUI
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした