JamstackによりWebサイト構築のあり方が一変する可能性
Webサイト制作ワークフローの刷新
企業も開発者も皆、どんなデバイス上でも読み込みが速く見た目が洗練されたWebサイトを望んでいます。わずかでも読み込みが遅ければ、ユーザーはさっさとページを離れ、Webサイトのコンバージョン率を下げかねません。Webサイトのスピードは検索エンジンのランキングにも影響します。脅威の状況が複雑さを増す中で、悪性ボットを払いのけ、ユーザーデータを攻撃者から保護するために、企業はサイトセキュリティの強化方法を探しています。
従来、高速性、安全性、可用性、拡張性を備えたWebサイトの構築は大仕事で、開発者にとってはマイナスの影響もありました。開発者リソースの需要と供給が乖離しているため、Webサイト開発の改善方法を見つければ企業や収支へ の負担を和らげることができます。
一つの方法は、以下のような時間のかかるタスクを開発工程から排除することです。
インフラやクラウドサービスに費やす費用を最小限に抑えつつ、Webサイトがダウンタイムを生じさせることなくトラフィックスパイクを確実に管理
ページ更新時に予期せぬことが起こり、ページが破損したり正しく表示されなかったりした際に迅速に対応
Webサイトのバックエンド部分とフロントエンド部分を結合
ステークホルダーからのフィードバック収集など、複雑なワークフロー
企業は、Jamstackと呼ばれるWebサイト構築への新たなアーキテクチャアプローチをとることによって、こうした難題を解決しやすくなります。
静的サイトに動的機能を追加
Jamstackは、静的サイトの考え方（現実的に可能な限り予め制作しておくこと）から出発し、動的な 要素を組み入れて、攻撃ベクトルの少ない高速Webサイトを実現します。2015年に「JAMstack」として造られたJamstackという用語の成り立ちは、
J = JavaScript、Webサイトのプログラミング言語
A = APIs、本来静的なページ上に動的コンテンツを載せることを可能にするもの
M = Markup、ブラウザにフォーマットに関する指示を与えるHTMLとCSSコード
これら３つの要素を合わせたJamstackによって、開発者はユーザーへ効率的に配信できるWebサイトをすばやく制作し、保守することができます。モバイル、Web、動画でうまく表示される静的サイトをローンチし、動的機能はAPI経由にすることで、プロセスを加速することができます。サイトの内容をできるだけ予め制作して、ページをコンテンツ配信ネットワーク（CDN）経由で世界中のユーザーに配信することによって、高いページ速度を実現できるのです。ユーザーがWebサイトを訪問する際は、CDNで配信されるプレレンダリングされたページ を見ます。専用サーバーは不要です。
ページが静的性質のものであっても、コンテンツが静的でなければならないということではありません。GoogleやFacebookのアクセス資格情報を使ってサイトにログインできるような第三者APIにより、検索、支払処理、リアルタイムデータといった動的コンテンツが可能になります。このモジュラーアプローチには柔軟性があり、ベンダーロックインを回避できます。テクノロジーが変化して新たなツールが利用できるようになれば、別のAPIへ容易にスワップアウトできます。サーバーレス機能と統合できるため、Jamstackによるサイトは動的要素が豊かなものになります。
Webアプリケーションサーバーやデータベースサーバーが不要なJamstackページは、訪問者の増加につれて拡張しやすく、ビジターエクスペリエンスと企業の収支の両方を改善します。
基本的に、Jamstackサイトは開発者による管理が必要なバックエンドがありません。ページの静的性質は、Webサイトとデータベースの間にリンクがなく、セキュリティ面の脆弱性が少ないことを意味します。サイトの全要素がCDNまたはAPI経由で配信されるため、潜在的な攻撃者はWebアプリケーションサーバーやデータベースサーバーにアクセスすることができません。
企業がこのアプローチでWebサイトを制作すれば、保守管理すべきサーバーも創出すべきステージング環境もないため、複雑なDevOps（開発・運用）リソースの必要性も減ります。Jamstackはシンプルで、従来のサイトに比べて可 動部分が少ないため、エラーの余地も少なくなります。このようなフロントエンドとバックエンドのカップリングにより、Jamstackサイトはすばやくローンチでき、信頼性も高いのです。
静的セットアップのもう一つの利点は、ページの旧バージョンへ簡単に戻せることです。これを可能にするのは、サイト全体が一度に更新されて新バージョンができるという原子性デプロイという概念です。Jamstackを使えば、開発者はもっと自由に新たな試みができ、従来のサイトにような試行錯誤の繰り返しを避けることができます。何かが意図した通り表示されなくても、サイト全体を容易く前のバージョンに戻すことができます。
Jamstackツールキットの組み立て
Jamstackのツール、プロセス、ベストプラクティスは急速に進化しています。導入にあたって重要なのは、実験に対してオープンな姿勢を保ち、新たな展開に目を配ることです。Jamstackは既存のワークフローに統合できるため、導入はシンプルです。多くの企業が既にベンダーと関係を築き主要テクノロジーの提供を受けていますから、速やかな意思決定が可能です。主要テクノロジーは以下など。
CDN： ユーザーに近いロケーションからページを配信する技術。高速パフォーマンスの実現に必要です。
静的サイトジェネレーター（SSG）： 生データとテンプレートを使ってサイトを作成する技術。コーディングのプロセスを自動化し、ページが予め制作されユーザーが使える状態になっているようにします。
コンテンツ管理システム（CMS）： コンテンツリポジトリとして機能。Jamstackを使ったWebサイトのCMSは「ヘッドレス」と呼ばれます。コンテンツがコードベースの外に格納され、API経由で配信されるため、デバイスを問わず、シームレスなディスプレイが可能になります。
Jamstackの価値拡大
現在はまだ、Jamstackの成熟過程の早期であり、すべてのデプロイメントが等しく効果的なわけではありません。たとえば、Jamstackプラットフォームの多くが中央集中型データセンターの外でホストされているため、サイトをエッジから配信するのに比べてパフォーマンスが遅くなっています。デベロッパーシートの追加に追加料金を課す場合もあるため、大規模チーム間のコラボレーションがしにくく、価格の予想がつかないということになりかねません。
Cloudflareはこれらの問題の解決に取り組むと同時に、保護された共有部レビューリンクを使うなど、コラボレーションプロセスのセキュリティ強化策を模索しています。Cloudflare Pagesは、Jamstackデプロイメントのプラットフォームで、サイトの構築とホスティングを、コードを書いたり「git push」を実行したりするのと同じくらいシンプルにします。Pagesはそこから、Cloudflareのグローバルエッジネットワーク上のデプロイメントを行います。サイトは、世界中のユーザーから数ミリ秒内の同ネットワーク上で運営されます。Pagesはフロントエンドの開発者を念頭に構築されており、設定は最小限にし、コラボレーションしやすくしてイテレーションをスピードアップします。
Cloudflare Pagesの主たるメリットは次の通り。
コラボレーターの追加が無料・無制限で、プレビューへの安全なアクセスを確保
Webフック機能による自動デプロイメント
無料のWeb分析をビルトイン
自動拡張機能のあ るグローバルサーバーレスプラットフォームCloudflare Workersと統合することにより、カスタムAPIの生成が可能
250以上の都市にデーターセンターを擁するグローバルCDN
この記事は、技術関連の意思決定者に影響を及ぼす最新のトレンドとトピックについてお伝えするシリーズの一環です。
記事の要点
この記事を読めば、以下が理解できます。
Jamstackがどのように開発者の体験を向上させるかをご覧ください。
このアーキテクチャアプローチで、モバイル、Web、動画のサイト応答性がいかにシンプルになるかを説明
Jamstackサイトがすばやくローンチできる理由を説明
関連リソース
このトピックを深く掘りさげてみましょう。
「Forrester New Wave™: Edge Development Platforms, Q4 2021」レポートをダウンロードし、Cloudflareと他のクラウドエッジ開発プラットフォーム８つの比較をご覧ください。