Try T.M Engineer Blog

多摩市で生息するエンジニアが「アウトプットする事は大事だ」と思って始めたブログ

ヘッドレスCMSとは?ヘッドレスCMSの概要について調べてみた

私は、CMSWordPress等)を使って仕事をすることがあるのですが、社内であまり聞き慣れない「ヘッドレスCMS」という言葉を耳にしたので、少し調べてみることにしました。

ヘッドレスCMSとは?

ただのCMSとは異なるアーキテクチャで作られたCMSのこと。 CMSWordPress等)は、Webページ(フロントエンド)と管理(バックエンド)が1つに統合されています。

しかし、ヘッドレスCMSはそのWebページ(フロントエンド)と管理(バックエンド)を分けようという構造(アーキテクチャ)から産まれたCMSです。そのため、バックエンドとフロントエンドは各々の開発に集中することができ、CMSもページを管理しないことで、CMS本来の目的であるコンテンツ管理に重点を置くことができます。

このフロントエンドとバックエンドの分けようという構造(アーキテクチャ)を「デカップルド・アーキテクチャ」と呼ぶそうです。

カップルド・アーキテクチャの名前の由来

これがなかなかユニークでおもしろいです。
「2つの〜、結びつける〜」の意味を持つ"couple"(カップル)に否定の"de"をつけて「デカップル」(decouple)という言葉からこの名前が産まれたそうです。 この"couple"(カップル)を指すのは、フロントエンドとバックエンドの事ですね。

詳しくはここを読ませていただきました。
「ヘッドレス」とは?Drupalにおけるデカップルド・アーキテクチャについてご紹介。 | さくらのナレッジ

フロントエンドとバックエンドを分けて考えるとは?

一番オーソドックスな考え方は、バックエンドでAPIを実装して、そのAPI経由でフロントエンドにデータを渡す方法です。
RESTful APIやGraphQL APIを使う方法ですね。
そのため、CMSでよく利用されるテンプレートの用意は必要無く、フロントエンドは自由にWebページを作ることができます。
バックエンドもフロントエンドを意識する必要が無く、開発できます。

上記までの内容を纏めてイメージ図で書いてみると、こんなイメージ。

f:id:special-moucom:20190423230030p:plain

ヘッドレスCMSのメリット・デメリットを考えてみる

個人的に色々と考えてみたのですが、以下メリット・デメリットがあるように思えました。

メリット

  • フロントエンドとバックエンドが並行して作業が可能。
  • 上記にも書きましたが、バックエンドとフロントエンドが各々の開発に集中することができる。
  • テンプレートを意識した設計をしなくて良い(SPA等のフロントエンドモダンな設計も可能)

デメリット

  • テンプレートを使用しないため、開発難易度・コストは高い。
  • APIに対する知識、とくにセキュリティ周りには気を配る必要がある。

ヘッドレスCMSの種類

「ヘッドレスCMS」の種類はこちらで紹介されています。

headlesscms.org

Contentfulなどは、名前だけは聞いたことがあるのではないでしょうか。
あと、CMSの代表であるWordPressにもREST APIの機能を備えているので、ヘッドレスCMSとしても使うことが可能です。

というわけでヘッドレスCMSを使ってみよう!

こちらは次回に書きたいと思います。使ってみるのは「Strapi」です。