はじめに
今回、新規プロダクトのメディアサイト開発に携わることになりました。
WordPressとAstroというフレームワークを組み合わせたヘッドレスCMSで実装することになったのですが、そもそもヘッドレスCMSについて知らなかったのでできる限り噛み砕いてまとめてみます。
私と同じようなプログラミング初心者の方の参考になれば嬉しいです。
自己紹介
私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
ヘッドレスCMS
まず従来のCMSとは、「Contents Management System」 の略で、Webサイトのコンテンツを構成する画像やテキスト、デザイン・レイアウト情報を一括で管理・保存する仕組みです。バックエンド（コンテンツの管理）もフロントエンド（コンテンツの表示）もどちらも一括で管理します。代表的なCMSがWordPressです。
（ここで補足なのですが、転職活動時のポートフォリオで作成したWEBアプリケーションは、Railsを使ってバックエンドもフロントエンドも管理していますが、CMSとは呼びません。あくまで、ブログやメディアサイトなど、管理者がいて管理者が投稿、編集したものをユーザーさんに見せているようなWEBサイトが対象です。）
一方ヘッドレスCMSとは、ヘッド（フロントエンド）がないCMSです。フロントエンドはバックエンドと切り離して、別で作ります。言い換えると、コンテンツを管理するためだけに作られた仕組みと言えます。
作成されたコンテンツはAPIを通じて、別で作ったフロントエンドに表示します。それぞれバックエンドとフロントエンドの機能が独立しているのがヘッドレスCMSの最大の特徴です。
以下に特徴をまとめます。
| 一般的なCMS | ヘッドレスCMS | |
|---|---|---|
| フロントとバッグエンドの関係性 | 密接 | 独立 |
| フロントエンド（コンテンツの表示） | ◯ | ✕ |
| バックエンド（コンテンツの管理） | ◯ | ◯ |
| 表示速度 | 遅い | 速い |
| フロントエンド開発の自由度 | 低い | 高い |
| サイバー攻撃 | 受けやすい | 受けにくい |
ヘッドレスCMSのメリット
- 表示が速い
- フロントエンド開発の自由度が高い
- セキュリティが強い
- フロントエンドの改修を行いやすい
表示が速い
フロントエンドであらかじめWEBサイトで表示するデータを作っておくため、毎回データベースを読み込んでページを呼び出す必要がない分速いです。
フロントエンド開発の自由度が高い
通常のCMSの場合、例えばWordPressはPHPベースのCMSなのでPHPベースで作る必要があります。
一方ヘッドレスCMSでは、APIを通じてコンテンツをフロントエンドに配信するため、フロントエンドのプラグラミング言語は自由に決められます。
セキュリティが強い
動的コンテンツの方がサイバー攻撃で狙われやすいそうです。
ヘッドレスCMSではフロントエンドには静的ファイルのみが置かれるため、CMSに比べてセキュリティが強いと言えます。
動的とか静的とかよくわかんないですね。誰がみても同じで変化がないのが静的と私は解釈しています。
フロントエンドの改修を行いやすい
ヘッドレスCMSは、UI（見た目）となるフロントエンドと、コンテンツを管理するバックエンドが互いに独立しています。そのため、フロントエンド部分を改修してもバックエンドには影響がなく、自由にフロントエンドの改修を行えます。
ヘッドレスCMSのデメリット
- 求められる知識・経験が幅広い
- 動的な機能には別途外部ツールが必要
求められる知識・経験が幅広い
要は難しいし大変ってことです。
導入するには、専門的なフロントエンドの知識を持ったエンジニア、API設計ができるエンジニアが必要です。外注しても雇ってもコストがかかってしまいます。
動的な機能には別途外部ツールが必要
全て静的なページだったらいいのですが、そうもいかないことがあります。問い合わせフォームなどが当てはまります。必要な機能やUIを洗い出し、フロントエンドや外部ツールも含めて設計する必要があります。
WordPressをヘッドレス化
WordPressは代表的なCMSの1つですが、WP REST APIを利用することでヘッドレス化が可能です。
私の会社では、メディアに掲載する記事を書くチームがWordPressを利用しています。プログラミングの専門的な知識がなくても、簡単に記事を編集し、管理することができます。
一方で、フロントエンドはAstroというフレームワークで実装することになりました。Astroで静的なコンテンツを作成し、必要なところだけWP REST APIを叩いてデータを取得します。こちらは専門的な知識が必要なため、エンジニアチームが担当します。
多くの人が閲覧するメディアページでは、読み込みが遅いとユーザーさんは離れてしまうので、とにかく速く情報を表示することが求められます。ヘッドレスCMSを使うことで、管理側はメンテナンスもしやすく、ユーザーさんにも優しいというメリットがあることがわかりました。
終わりに
これまでポートフォリオや自社プロダクトにおいて、WEBアプリケーションしか作ったことがなかったのですが、新しくWEBサイトになり、仕組みや求められることを学ぶことができました。
WEBサイトでは、基本的にはすべてのユーザーさんに同じものを見せればいいからできる限り速く表示したい、また管理する側としても簡単でコストがかからない手段をとりたい、それを実現するためにヘッドレスCMSを選択したのだと思いました。
仕組みを知ると、なぜその技術選定を取ったのかを理解できて面白いですね。これからも色々な開発に携わりたいです！
参考記事