Personalize Your Jamstack Site at Scale With Netlify and Uniform Watch On-Demand

By Hiromichi Koga in Opinions & Insights

Headless CMS と Jamstack の解説

このページの利用可能言語

デジタルキューブがNetlify日本語ブログに翻訳記事を寄稿しました。

Headless CMS やデカップルド・アーキテクチャの世界を探求している人なら、”Jamstack” という言葉を目にしたことがあるかもしれません。

オールインワンの Web サイトプラットフォームで Web サイトを構築することに慣れている人にとって、API ファーストのスタックの世界、そして “Jamstack” を説明するための用語は、聞き慣れないかもしれません。

“Jamstack” という言葉は、2015年に Netlify 社の共同創業者兼CEO である Matt Biilmann が、チームが Web を構築する新しい方法を表現するために作ったものです。これは、Headless CMS のようなツールを例とした、アーキテクチャを切り離した(デカップルド・アーキテクチャの)アプローチを指します。

それ以来、Jamstack エコシステムは成長し、優れたWeb 体験を構築するために開発者が採用しているモダンなアーキテクチャを代表する業界全体のムーブメントへと発展しました。今日では、世界中で100万人以上の開発者が Jamstack サイトを Netlify に導入しており、何千もの企業チームが、サイトのスピード、セキュリティ、開発のしやすさなどの利点から Jamstack をベースに構築しています。

デジタルキューブは日本に拠点を置くデジタルエージェンシーであり、このムーブメントのメリットを直接実感しています。この記事では、Jamstack とは何か、WordPress のような CMS がどのような役割を果たしているのか、そしてカスタマーに愛される Web 体験の構築に Jamstack がどのように役立っているのかについて説明します。

Jamstack とは?

Jamstack とは、Web を構築する方法についての考え方です。UI はコンパイルされ、フロントエンドは切り離され、データは必要に応じて取り込まれます。

Jamstack の「Jam」は、その3つのコンポーネントに由来しています。JavaScript、API、そして Markup です。これらのコンポーネントは、超高速、安全、そして SEO フレンドリーなサイトを提供するために使用されます。

Jamstack は、フロントエンドをコンパイルし、エッジで静的アセットを提供するために使用されます。動的データは、必要に応じて API を介してサイトに取り込まれます。拡大し続けるブラウザやデバイスの機能を活用し、独自のサーバーや CDN、ロードバランサーを管理する必要のない開発方法は、かつては実現が困難でした。

しかし、ブラウザの API や JavaScript ランタイムが成熟し、Angular や React などの SPA フレームワークが台頭してきたことで、このアーキテクチャは非常に注目されるものとなりました。クライアントサイドの JavaScript でリッチなインタラクションを実現し、カスタムロジックや API の安全な呼び出しでサイトのユーザー体験を向上させることが可能になったのです。

Jamstack の背後には、プリレンダリングデカップリングという2つの基本原則があります。Headless CMS がどこに当てはまるかを語る前に、この2つのコンセプトを確認してみましょう。

1. プリレンダリング

Jamstack では、フロントエンド全体が、高度に最適化された静的ページやアセットとして、ビルドプロセスの中で事前に構築されます。このプリレンダリングのプロセスにより、CDN から直接配信できるサイトができあがり、重要なインフラであるサーバーのコスト、複雑さ、リスクが軽減されます。

GatsbyHugoJekyllEleventyNext.jsなど、静的サイトを生成するための人気の高いツールが数多くあるため、多くのウェブ開発者は、生産性の高い Jamstack 開発者になるために必要なツールにすでに精通しています。

プリレンダリングは、サイトパフォーマンス、アップタイムメトリクス(稼働時間指標)、Core Web Vitals の向上につながり、スケールアップも容易になります。

2. デカップリング 

デカップリングとは、システムとサービスを切り離すプロセスです。CMS とバックエンド、データベースとフロントエンドのように、サイト運営に必要なサービスを切り離すことで、必要に応じてサービスを入れ替えたり、サイトのすべての機能を自社開発のアプリケーションではなく、専門のサードパーティを使用したりすることが容易になります。

拡大する APIエコノミーは、Jamstack サイトにとって重要な実現手段となっています。API を介して製品やサービスを提供する SaaS やサービスを活用することで、チームは API が提供する機能を自分たちで開発する場合よりもはるかに複雑なアプリケーションを構築することができます。また、認証やアイデンティティ、決済、データサービス、検索、そしてコンテンツ管理などの分野で、最高水準のツールを活用することができます。

そしてこれまでご紹介した Jamstack 、プリレンダリング、デカップリングのメリットを最大化するCMSが、これからご紹介する Headless CMS です。

Headless CMS とは?

Headless CMS とは、サイトの訪問者にビューやページテンプレートを返して管理する作業から切り離されたコンテンツ管理システムのことです。従来のアーキテクチャや「カップルド」 (バックエンドがフロントエンドと深く統合されている)アーキテクチャとは異なり、Headless CMS では、フロントエンドとバックエンドは完全に別のシステムです。

「Headless」という言葉は、「ヘッド」(フロントエンド)と「ボディ」(バックエンド)を切り離すことに由来しています。CMS は、リッチでパワフルなコンテンツ編集や編集管理のワークフローの構築に集中することができ、表示の問題に縛られてサイトが重くなったり、複雑になったりすることはありません。

非常に一般的なパターンではありますが、Jamstack のサイトは常に Headless CMS を備えているわけではありません。好みの JavaScript フレームワークを使って、マークダウンファイルで直接コンテンツを更新することを選択するチームもいます。しかし、多くの Jamstack ユーザーにとって、自分のチームに合った Headless CMS を選ぶことができるのは、主な利点のひとつです。

Headless CMS + Jamstack を選ぶ理由は?

Headless のアプローチにはたくさんのメリットがあります。デジタルキューブでは WordPress を使った仕事が多いのですが、これらのメリットの多くは他の CMS にも当てはまります。ここでは、Jamstack アーキテクチャ上で CMS を選択した場合の主なメリットをご紹介します。 

  • メリット1. コンテンツの編集・開発ワークフローの改善: Jamstack のアプローチは、フロントエンドとバックエンドを切り離すだけでなく、チームのワークフローを切り離すのにも役立ちます。オールインワンのプラットフォームでは、サイトのコンテンツを変更する場合、Web マスターがレビューしてデプロイする必要があります。WordPress のような CMS では、コンテンツ編集者は好きなように変更することができ、開発者は Git ベースのワークフローで WordPress を Netlify に簡単にデプロイすることができます。

  • メリット2. パフォーマンスの向上: Jamstack のサイトは驚くほどパフォーマンスに優れています。フロントエンドの開発者が素晴らしいパフォーマンスを提供するために行った重要な作業は、リクエスト時にサーバー上で非効率的にレンダリングされたり、堅く結合された負荷の高いバックエンドによって損なわれたりすると、台無しになってしまいます。Jamstack のサイトは、ページがその場で作られるのを待つのではなく、デプロイ時に生成されます。最初の1バイトまでの時間を最小限にするためには、CDN で提供されるビルド済みのファイルに勝るものはありません。例えば、Netlify Edge は、複数のクラウドプロバイダーで自動プリレンダリングを行い、グローバルに配信することでこれを可能にしています。

  • メリット3. 高いセキュリティ: サーバーサイドのプロセスをマイクロサービスの API に抽象化することで、攻撃の対象となる領域を減らすことができます。また、専門のサードパーティサービスの専門知識を活用することもできます。

  • メリット4. 安価で容易なスケーリング: デプロイメントが、どこでも提供できるファイルのスタックのようなものであれば、スケーリングは、より多くの場所でそれらのファイルを提供することになります。Netlify Edge のような高機能なコンテンツ配信ネットワークは、このような場合に最適です。

  • メリット5. コラボレーションワークフロー: Web 開発はチームで行うものです。Jamstack は Git ベースです。コラボレーション・ツールや一般的なプロジェクト管理ツールとの統合により、Jamstack チームは開発者のワークフローに合わせて密なフィードバック・ループを作ることができます。重要なディテールが失われる可能性は低く、全員が利益を得ることができます。

このような機能はあらゆる業界にメリットがありますが、特にマーケティングサイトや eコマース(headless コマースとも呼ばれる)における Headless アプローチの増加が目立っています。

Jamstack のもう一つの大きなメリットは、コミュニティです。広がり続けるエコシステムと Netlify のようなパートナーのおかげで、Jamstack は成長し続け、進化し続けています。私たちと一緒に、チーム全員が使いやすい、カスタマー中心のウェブ体験の構築を始めてみませんか?

デジタルキューブは、日本に本社を持つデジタルエージェンシーです。ぜひお気軽に、Netlifyパートナーチーム(partnerteam@netlify.com)を通じてご連絡ください。