【へっどれすあーきてくちゃ】

ヘッドレスアーキテクチャ とは?

最終更新:
💡 表示をAPIでつなぎ、別に作れるアーキテクチャ

データ管理などのバックエンドと、利用者向けの表示を担うフロントエンドを切り離し、APIでつなぐ設計。表示側を別に開発できるが、APIの仕様や認証などを合わせる必要がある。

📌 このページのポイント
表示とデータ管理の結び付き 一体の構成 利用者向け表示 データ管理 テンプレート等と連携 ヘッドレス構成 Web アプリ データ管理 APIで表示側と接続 APIの仕様・認証などを合わせる必要がある 編集用の管理画面も持てる
表示を一体で提供する構成と、APIで別の表示につなぐ構成の比較。
ひよこ ひよこ
ヘッドレスって頭がないってこと?
ペンギン先生 ペンギン先生
ここでは頭を利用者向けの表示にたとえるよ。データを管理するバックエンドと表示側を切り離し、APIでつなぐ設計なんだ。編集用の管理画面まで消す、という意味ではないよ。
ひよこ ひよこ
従来のCMSとどう違うの?
ペンギン先生 ペンギン先生
データ管理と表示テンプレートを組み合わせる構成に対し、ヘッドレスではAPIを使って表示側を別に作るよ。WordPressにもREST APIがあり、データを別のアプリへ渡せる。製品名だけで従来型かヘッドレスかが決まるわけではないんだ。
ひよこ ひよこ
どんなメリットがあるの?
ペンギン先生 ペンギン先生
同じデータをWebサイトやスマホアプリなどで利用できるよ。表示側の技術を別に選べるので、バックエンド全体を作り直さず表示を変更できる場合もある。ただしAPIのデータ形式や認証などに合わせる必要はあるんだ。
ひよこ ひよこ
フロントエンドやプレビューは全部自作するの?
ペンギン先生 ペンギン先生
必ずではないよ。ShopifyのHydrogenのようなフレームワークや用意された部品を使える場合があるし、CMS側のプレビュー支援もある。ただし表示側との連携や運用の設計は必要。費用や難しさが必ず増えると決めつけず、必要な機能で比べよう。
もっと詳しく知りたい人へ

編集用の管理画面やプレビューも、あってはいけない?

そうではない。分離するのは利用者向けの表示との結び付きで、編集用の管理画面を持つ製品もある。たとえばSanityはStudioと表示側を連携させるVisual Editingを提供する。ただしプレビューには表示側との設定や連携が必要になる。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ヘッドレスアーキテクチャ」って出てきたら「表示とデータ管理を切り離し、APIでつなぐ設計」と思えばだいたいOK!
📖 おまけ:英語の意味
「Headless Architecture」 = 頭のないアーキテクチャ
💬 ここでは「頭」を利用者向けの表示にたとえるよ。表示側を一体で持たず、APIで別の表示につなぐイメージなんだよ

参考資料

← 用語集にもどる