Web 技術関連のキーワードについて（中編）

こんにちは、サイトコアの原水です。前回は Web 関連のキーワードということで、Jamstack を中心に JavaScript 関連の現状を少し紹介をしました。JavaScript は今でもフレームワークとして強化されており、便利なフレームワークが出てきていることを紹介しました。

今回はヘッドレスと合わせて利用されるいくつかのキーワードに関して紹介をしていきます。

ヘッドレスとは？

ヘッドレス CMS やヘッドレスコマースなど、ヘッドレスというキーワードが最近出てきています。このキーワードを理解するためには、ヘッドレスではない仕組みと比べてみるのがわかりやすい形です。今回は CMS を例にとって紹介をしていきます。

モノリシック

早速キーワードをタイトルに使いましたが、従来の CMS の多くがモノリシックな CMS として表現されます。モノリシックは英語で Monolithic、日本語に訳すと一枚岩、一体になっている、という意味合いがあります。動的 CMS で説明をすると以下のようなイメージです。

モノリシック CMS

CMS が HTML なども生成して Web ページを表示する形です。このレンダリングするところで PC 向け、スマートフォン向けといった形のものを用意すれば別々のデザインで表示することも可能です。とはいえ、最近はレスポンシブデザインで1つのデザインで対応する形が一般的ではあります。

ヘッドレス

これとは別に、CMS はコンテンツの管理に集約して、レンダリングの部分が分離する形式で提供するものがヘッドレスCMSとなります。Web サイトに対して API 経由でコンテンツを提供します。上記の図をヘッドレスに書き換えたイメージ図は以下の通りです。

ヘッドレス CMS

この Web サイトの部分が前回紹介をした React や Next.js といったフレームワークで作ることが出来るようになります。メリットとしては以下のような内容が上げられます。

• 静的サイト生成（ Static Site Generator - SSG ）の仕組みを採用することで、サイトのデータを HTML として保持できます

• グローバルサイトやトラフィックの増減の多いサイトに対して、 CDN と組み合わせることでスケーラビリティを確保することが簡単にできます

• CMS と連携することで、コンテンツの制作においてワークフロー、権限設定なども可能となります

• デザインとコンテンツの分離がこの仕組みではより明確になり、実装がシンプルになります

ヘッドレス CMS のデメリットとしては、みたまま編集が提供されないケース、プレビューが出来ないケースなどもありますが、この部分は後日紹介しますがが Sitecore の場合はこの2点は従来の CMS と同様に利用することが出来ます。

API 連携のキーワード

ヘッドレス CMS の紹介のところで API と簡単に記載しました。API は Appplication Programing Inteface の略で、Windows やスマートフォンのアプリケーションも OS が提供する API を利用して実装されています。Web で利用される API として今回紹介するキーワードは2つです。

REST

ブラウザがデータを取得するための仕組み HTTP を利用してデータを取得することが出来る API の１つとして REST があります（RESTful API と記載されることもありますが、ここでは REST と記載します）。サーバーに対してリクエストをするとデータが返ってくる内容が、HTML ではなく XML や Json のデータを返す仕組みになっていると理解してください。

例えばユーザーに関する情報を取得したい場合、以下の URL にリクエストをして情報を得るという形となります（以下は架空の URL です）。

https://sitecorecloud.io/userinfo/1

システムが提供する情報に HTTP を利用してアクセスが出来るようになります。実際には REST にデータを渡す仕組みがあるため、POST の処理でほしい情報の付加情報を与えてアクセスをして結果を得る形となります。

GraphQL

API として REST を利用する場合に、必要となるデータを揃えるために複数回 API を呼び出すことになったり、連携するサービスによって API の URL や挙動が異なるなどの課題が出てくる形となります。

このような問題を解決することが出来る仕組みとして、API にデータベースのように問い合わせをすると、必要となるデータを取得することができる仕組みとして GraphQL があります。

GraphQL でのメリットは以下のような点があります。

• 取得したいデータ構造をクエリ言語で定義できる

• データを取得する API の問い合わせ先を統一することが出来る（エンドポイント、例えば 以下のような URL を利用。

http://sitecorecloud.io/api/edge

• コンテンツ管理のデータ構造を活用して、複数のデータを取得することも可能（ニュース一覧など）

実はヘッドレスCMSとして利用する際に、この GraphQL に対応しているかどうかがポイントとなります。もちろん、REST でもデータを取得することは可能ですが、GraphQL を利用することで CMS から取得するデータ構造を制御しやすくなるためです。

詳しくは GraphQL に関して様々なブログがありますので、興味がある方は読んでみてください。

ヘッドレス CMS の選択

今回お伝えしたかった点はまさに最後の GraphQL 対応の重要性となります。ヘッドレス CMS として利用する上で、GraphQL の仕組みがあるのと無いのでは、実装の難易度が変わってきます。ヘッドレス CMS が最近はキーワードとなりつつありますが、その中には REST に対応しています、と記載されている製品は、GraphQL を利用できない可能性があります。

Sitecore が提供するヘッドレス CMS の機能に関しては、GraphQL の機能も当然提供しており、またこのエンドポイントとなる部分を SaaS で提供する Sitecore Experience Edge というサービスも提供しています。

まとめ

今回はヘッドレス CMS に関してのキーワードを少し取り上げて紹介をしました。前回と今回の記事を参考にしていただき、ヘッドレス CMS として機能が不足している製品を選ばない、これが重要なポイントになると考えてください。

次回は、サーバー関連のテクノロジーに関してのキーワードを後編としてお届けします。