ヘッドレスなCMSが作る未来を考えてみる

昨今、ヘッドレスCMSが注目を集めてきているのかなと思います。
日本で注目されてきたのはｈデジタル庁でヘッドレスCMSが挙げられてきたあたりから注目度が上がってきたかなと思います。
私は5年ぐらい前からデカップルドアーキテクチャに興味を持っていて、その中でこれまでのCMSがTraditional CMSと呼ばれていてHeadless CMSという存在を知りました。
※Traditional CMSで検索するとTraditional CMS vs Headless CMSでの記事がいくつも見つけることが出来ます

## ヘッドレスCMSってなに

あらためての説明になりますが、
これまでのCMSが以下だとすると

![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15995/65fe5f4a-fe2e-657b-36d1-d7ff92e51aca.png)

配信できるデバイスはPC / SPのみ。CMS上のテンプレートによってHTMLを返すタイプ

↓

![qiita-ヘッドレス.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15995/a9e6a337-f278-e34d-0288-d6f98cacd596.png)


REST API(もしくはGraphQL)によって多様なデバイスへの配信が可能となります。
これはテンプレートのプレゼンテーション層とデータ層を分けるというヘッドレスCMSの特長がWebサイトだけでなくウェアラブル端末やアプリなどに配信が出来ます。
そして、APIを通じてフロントエンドを管理することから、フロント側のプラグラミング言語に制約はありません。

## 導入するメリット

よく言われているのが、色々なデバイス(ウェアラブル端末とか)に提供できる所などが挙げられますが、Webサイトを構築したい考えるWeb担当者の方は、色々なデバイスに配信できることをメリットとは考えていません。
そんな中で私が考えるヘッドレスCMSのメリットは２つです。

+ セキュリティの高さ
WordPressを含めた多くのCMSはWebサーバにCMSをインストールタイプのものです。そのためセキュリティの危険にさらされることが多いです。これが、ヘッドレスCMSになるとWebサーバ(Front end)とREST APIを提供するサーバが分離しているので、セキュリティのリスクが少なくなります。
WAFの導入やセキュリティにおける設定を行うことで通常のCMSでもセキュリティを高めることが出来ますが、そもそもヘッドレスCMSという仕組みを利用するだけでセキュリティが高い状態にできるのはメリットだと思います。

+ 多様な作り方
これまでCMSに合わせた構築を行っていたと思いますが、汎用的なREST APIを介して登録したコンテンツデータの取得ができるため、特定の技術に縛られることがありません。WordPressであればPHP+WordPressの仕組みについて知らないといけませんが、ヘッドレスCMSではあればHTML+JavaScript+cssのみを知っていれば構築可能になります。
例えば、PHPで作られたヘッドレスCMSに対して構築側をNext.js(もしくはhugo / Gatsby)などで作成することが出来ます。
このようにWebサイトの作り方自体に対して選択肢が豊富の他に、ヘッドレスCMSを提供しているCaas(CMS as a Service)の提供も豊富です。
これまでWordPressで構築後、WordPressのバージョンアップ作業などを行っていると思いますが、CaasのヘッドレスCMSを利用している場合、そのような作業は不要になります。

## デメリット

良い面の一方でデメリットとしては以下があると思います。

+ 普通に構築するよりもコストがかかる
 1.　CMSの独自の記法が使用できず1からフロントエンドロジックを実装する必要がある
 例えば、WordPressであればSEO関連のマークアップなどプラグインで実装できた部分などをヘッドレスCMSの場合は、1からその部分のロジックを作る必要があります。

 2.　プレビュー環境を自前で作成する必要がある
通常のCMSであれば必ず存在している機能ですが、ヘッドレスCMSが提供しているのは先の図にあったコンテンツ管理とコンテン配信するREST API部分となっているのでプレビュー環境の準備が必要となります。



## Caas(CMS as a Service)型のヘッドレスCMS

実際の案件ではWebサイトの構築をお願いされるので、普通に構築するよりもコストがかかるというのは無視できませんが、コストは運用費含めてトータルで考えるべきなので開発だけでなく運用フェーズのことを考えるとCaasが豊富にあるのは良いですね。
通常であれば必要なCMSのバージョンアップなどの保守運用がCaasで担保されるので運用費の削減に貢献できます。

1. [Contentful](https://www.contentful.com/)
1. [Hygraph](https://hygraph.com/)
1. [Storyblok](https://www.storyblok.com/)
1. [MicroCMS](https://microcms.io/)
1. [kuroco](https://kuroco.app/ja/)
1. [Newt](https://www.newt.so/)

4〜5は国産のヘッドレスCMSになります。
私が、ヘッドレスCMSで重要視しているのは柔軟な入力フィールドを定義することが出来るかです。
例えば、入力フィールドの構造化(定義した入力フィールドをコンポーネントという単位で構造化して同じ定義はそのコンポーネントを呼び出すのみ)、フィールドの繰り返しなどが可能なのかを重要視しています。
上記でいうとHygraph、Storyblokがこのあたりが充実していると思います。

## その他のヘッドレスCMS

Caas以外にも以下のような方法があります。

+ WordPressをヘッドレス化する

サーバを準備してインストールする事になります。WordPressの管理画面を拡張するプラグインはヘッドレス化しても使用できるので、
例えば、[Admin Column Pro](https://www.admincolumns.com/)で管理画面を使いやすくカスタマイズするなどがCaas型に比べて柔軟に出来ます。

## どういうときにヘッドレスCMSを選択するべきか

どんなサイトもヘッドレスCMSで作成したほうが良いと言えると良いのですが、、、
単純なWebサイトでは費用面のデメリットが目につくと思います。
ただ、CMSで登録したコンテンツをWebサイト以外にも使用したいや他システムとの連携を考えている場合は、
ヘッドレスCMSのREST API(GraphQLも可)によって連携がしやすいので、どのようなニーズがある場合はヘッドレスCMSを使用すると良いと思います。
また、昨今のDXの流れの中にはデータがさまざまな部署に分散されている状態(サイロ化)のため、データが活用できないという問題があります。
現在のヘッドレスCMSはWebサイト構築という文脈で語られていることが多いですが、ヘッドレスという思想によってサイト間のデータ共有なども可能になり、しいてはDXにも貢献できる武器になると思います。

## さいごに

デメリットもありますが、ヘッドレスCMSを使用するとモダンな開発手法を学ぶことになります。
エンジニアとしては、常に新しい技術で開発を行っていきたいのでヘッドレスが主流になると良いなと思います。