ヘッドレスCMSって何？素人でもできんのか？

どうもねくすさんです。

最近、ヘッドレスCMSという単語を聞くことが増えました。前から好きで読んでるブログが実はヘッドレスCMSだったり、WordPressの管理画面だけドメイン分けたいってAIに相談したら「ヘッドレスCMS使えやで(ง ื▿ ื)ว」って言われたり、困っています。

ヘッドレスCMSって何なんだ～～～～～～～～～～～！

追記：SSGでのレンダリングを前提に話していますが、実際にはSSRやCSR、ISRといったレンダリング方法があります。
追記(優しい)：この記事では主に静的な方法でレンダリングする前提で話しています。他の方法を使えば、動的にレンダリングすることもできます。知識不足でした。

ヘッドレスCMSとは
俺にもできんのか？
おわりに

ヘッドレスCMSとは

https://blog.microcms.io/what-is-headlesscms

上の記事を見ました。図解されててわかりやすいので、仕組みやメリットを知りたい方はそっちで多分OKです。

要はWordPressで言う「管理画面+データベース」です

WordPressを使っていると気にしないことですが、WordPressはWebサイトを表示するのに3つの機能をまとめて行っています。Webサイトの情報を書き込む「管理画面」、書き込んだ情報を保存している「データベース」、データベースから情報を取り出して表示する「PHPとWebサーバー」、この３つが一体となったものがWordPressなんですね。

ヘッドレスCMSは、WordPressで言うところの「管理画面」「データベース」の役割を担うもので、表示は別で用意する必要があります。この、別で用意する必要があることにヘッドレスCMSの素晴らしさが詰まっています。

ヘッドレスCMSの素晴らしさ(機能面)

別で用意しないといけないの？めんどいじゃん。って思うんですが、別だからこそ良い。

タイムリーな話題ですが、数日前にPHPのCVEが公開されてみんなパニックでしたよね。WordPressはすべてを一気通貫で行っていて、外部に見えているPHPはそのまま内部にもつながっているのです。PHPに不正な操作が行われると、データベースなどの他に見られたくないものまで見られてしまう可能性があるのです。合ってる？

その点、ヘッドレスCMSは配信にAPIを使います。APIを使うため安全だということです。

静的サイト側がヘッドレスCMSに対してAPIを使用し、必要な時だけヘッドレスCMSから情報を取っていきます。WordPressは一体的ですべてがガチガチなのに対して、ヘッドレスCMSはAPIという一方通行の何かを使います。そもそも攻撃(SQLインジェクションなど)ができない構造なんです。補足でした。合ってる？

わかりやすいのかわかりにくいのかわからない図。

ヘッドレスCMSの素晴らしさ(自由度)

ヘッドレスCMSの素晴らしさとして、自由度があります。

WordPressはテーマの概念があって、色々カスタムできますよね。いやもうヘッドレスCMSはそんなもんじゃありません・・・

フロントエンドは１から自分で作っちゃってもいいんですー！

???「えっ　今日は全員~~カレーライス食って~~フロントエンド作っていいのか!!」

???「ああ…しっかり食え作れ」

もうこれがね、一番のメリットですよ。Next.jsとかReactで自分で作っていいんすよ。WordPressはテーマがたくさんあるにしても、まあすべて同じような感じですよ(過激派)。
ヘッドレスCMSを使うと、自分好みなモダンなUIを実現することができます。

静的サイトのホストも自分で選べます。GitHub PagesやVercelなどで無料でホスティングすることができます。

俺にもできんのか？

→できません

え～～～～～～～～～～～～～～～～～～

あなたは、フロントエンド開発できますか？

うっ・・。

先にヘッドレスCMSの素晴らしさとして自由度を挙げました。自由なんですよ。だからフロントエンドは自分で作らないといけません。そもそも、ヘッドレスCMSは、自分で開発をしたい、開発ができるという実力者向けのものです。

ブルーベリー本さえもモニター裏に隠して忘れようとしている素人ワイには関係なかった話なんやで。

むしろ、フロントエンド開発ができる方にとってはすごく画期的なものです。
フロントエンド開発ができても、WordPressの管理画面やヘッドレスCMSのようなものを自力で開発するのは難しいものです。そこで、表示側の見える部分は自分で好きな感じで製作し、記事作成や管理はヘッドレスCMSに頼むというハイブリッドでクレバーな仕組みが生まれたのです。