Qiitaの10日目の記事です。Biilmann氏が提唱した新しいフロントエンドスタックです。リクエストを受けてからサーバー上で処理を行いレスポンスを返す従来のWebサイトの配信方法とは異なり、JAMstackでは事前にビルドされたHTMLをCDN上で配信します。最近、特に注目が集まっているこのJAMstackについて、基礎知識編と構築編の2回に分けてご紹介したいと思います。servers.(JavaScript、API、およびプリレンダリングされたマークアップで構成された、サーバーレスで提供される高速かつ安全なサイトと動的アプリを作成するモダンなアーキテクチャ)とあります。これだけを見ると少し難しく感じますが、ざっくり言ってしまうと「動的なデータコンテンツを扱う静的サイトを作る技術の総称」と個人的に解釈しています。JAMstackはJavaScript、API、Markupの頭文字を取ったもので、それぞれ以下のような役割を担っています:JavaScript+API:動的データコンテンツの取り扱いリクエスト/レスポンスサイクル中の動的プログラムの制御(JavaScript)すべてのサーバーサイドの処理やデータベースへのリクエスト(API)Markup:静的データコンテンツの取り扱いデプロイ時にビルドされるテンプレート化されたマークアップつまりあらかじめマイクロサービスのAPIを利用してデータを取得し、ページ内容を静的なHTMLとして書き出しておくことで即座にレスポンスを返却することが可能となります。現在利用されているサーバー技術がフロント側に移ったことで、より速く、安全で低コストなWebサイト運用が実現できます。JAMstackを導入する利点について、公式サイトでは以下の点が挙げられています:高パフォーマンスWebサーバーが不要なため、JAMstackでは静的ページをCDNで配信します。デプロイ時にページをあらかじめ生成するためページの構築を待つ必要がなく、CDNでファイルを提供しているので初期読み込み時間が最小になり、より高いパフォーマンスが期待できます高いセキュリティサーバー側のプロセスがマイクロサービスAPIに集約されるため脆弱性に対する攻撃対象の減少が期待できます低コストなスケーラビリティコンテンツ配信の手段として利用するため、安価でかんたんにスケーリングできますよりよい開発者体験Webサイト運用に関わるそれぞれの技術が疎結合化されるため、よりターゲットを絞った開発とデバッグが可能になります。APIでデータを扱うWebアプリのフレームなどへの導入が考えられます。逆に、ユーザーごとに別コンテンツを表示する、などコンテンツの変化が激しいサイトはビルドの負荷が高まるため向いていません。概要を把握したところでJAMstackを構築するための具体的な技術を見ていきましょう。CMSコンテンツデータの管理を行うシステム。GUIを持たず、APIを通してデータ内容を入出力するホスティングビルド、静的コンテンツをCDN上にデプロイそれぞれに該当する技術が複数あるため、JAMstackを構築するにあったってまずは要件に応じた技術選定からはじめなくてはなりません。CMS、Netlifyでしょうか。単純にサイトを公開するだけならボタンを何度かクリックするだけで完了してしまうので、デプロイまでに3分もかかりません。CMSを利用したJAMstack構築の関連ドキュメントなども検索すればたくさん見つけられます。JAMstackのエコシステムは千差万別なので、独自のベストプラクティスを見つけるまでは何を選定すればよいか迷うかもしれません。Services)で完結する環境」というルールを設け、JAMstackなBlogサイトを構築する構成を考えてみたいと思います。Services)とはAmazonが提供しているクラウドサービスの総称です。Amazonが保有するコンピューターリソースを、使用量に応じた従量課金制で使用できます。AWSを利用することで、オンプレミスなサーバーのように先行して設備を構築する時間やコストを大きく下げることが可能であり、また世界中に多数のデータセンターが存在するため物理障害にも強いのが特徴です。AWSのサービスはカテゴリーだけでも21あり、サービス総数は100を超えます。AmplifyAWSを利用するWebアプリケーション向けのJavaScriptライブラリ。CodeCommitが利用できそうです。基礎知識編は以上です。構築編ではAWSのサービスを用いて実際にJAMstackなBlogサイトを作成する方法をご紹介したいと思います。