WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

ヘッドレスCMSが気になってきた

弊社ではCMS開発をする際は100%と言って良いくらいWordPressを使用しています。

開発する際にわからないことがあっても調べれば情報が見つかることが多いし、プラグインも豊富のため多くの制作会社でも未だに支持され続けていることかと思います。

しかし、ここ最近よく耳にするようになったヘッドレスCMSというものが気になってきました。

簡単な紹介を交えて、ほんの少しだけ開発のフローを辿っていきます。

ヘッドレスCMSとは？

見た目の部分（フロントエンド）とコンテンツ管理部分（バックエンド）を分離させたもの。

ヘッド（表示する部分）がない（レス）CMS → ヘッドレスCMSです。

コンテンツの管理はするけど、見た目の表示は別のツールに任せるCMSです。

これとは違ってWordPressはフロントエンドとバックエンドが同じになっているやつですね。

メリット

フロントとバックが分離されるメリットは様々あります。

サイトの表示速度が速くなる

WordPressの場合、ユーザーからのアクセスがあるたびに毎回PHPでHTMLを作るという作業を行っています。

WordPressでは、記事データの管理とHTMLの生成が同じシステムの中で繋がっています。だから記事が更新されるたびに、それを反映したHTMLをその場で作って返す必要があります。

それゆえに、ヘッドレスCMSよりも少し表示がもたつきます。

ヘッドレスCMSだとHTMLを生成するタイミングと記事を管理するタイミングを切り離せます。こうすることで、HTMLを作る作業を記事更新した時だけに済ませられます。つまり、HTMLを事前に作り置きできるようになる、ということです。WordPressみたくアクセスがあるたびにPHPからHTMLを作る必要はありません。

フロントと CMS が別々にメンテできる

WordPressでサイトを運用していて困るのは、↓のようなことだと思います。

• PHP のバージョンを上げたらテーマが壊れた
• プラグイン更新でレイアウトが崩れた
• デザインだけ変えたいのに、CMSやプラグインの設定も触らないと反映できない

ヘッドレスの場合ですと、「コンテンツ管理(バック)」と「見た目(フロント)」が独立しているので、片方を触っても、もう片方には影響しません。これはかなりストレスが減りますね。

同じデータをいろんな場所に使える

ヘッドレスだとコンテンツをAPIで取り出せるので、1つのCMSから色んな場所に同じデータを流せます。

別に運用しているサイトやキャンペーン用のLPなどにも表示させたければ表示させられます。便利ですね！

セキュリティが強くなる

WordPressでサイトを公開すると、テーマやプラグインの脆弱性や管理画面への不正ログインなど、攻撃対象になるものが多いかと思います。

しかし、ヘッドレスの場合、公開したものの中に管理画面もなく、投稿した内容をAPIで呼び出しているだけなのでユーザーから見えているのはただのHTMLのみ。攻撃がしにくくなります。

早速開発してみよう

メリット盛りだくさんでしたね。マスターしてみたい気持ちが強くなってきました。

早速開発していきましょう。

フロントの見た目の部分はReactのフレームワークであるNext.jsを使います。

バックエンドであるコンテンツの管理はmicroCMSを使います。（※今回の記事ではまずNext.js側の準備だけ進めます。microCMSは次回以降に紹介します。）

まずはNext.jsで簡単な見た目の部分を用意してみましょう。

プロジェクトを作る

ご自身のエディタソフトを立ち上げてターミナルを開いてみてください。

私はCursorを使っていますのでそちらから立ち上げます。

そのターミナル内で次のコードを入力してみてください。

npx create-next-app@latest nextjs-practice
//nextjs-practiceのところは任意の名前でOKです。

すると、最新版のNext.jsのプロジェクトを自動で作成してくれます。

エンターを押して実行するといくつか英語で質問されますが、基本はそのままエンターを押してデフォルトのまま進めて大丈夫です。

↑こんな感じでディレクトリが生成されたらOKです！

開発サーバーを起動する

npm run dev

↑のコマンドを入力してローカルでの開発用のサーバーを起動してください。

htmlサイトならlive server、WordPressサイトならlocal by flywheelを使うイメージでしょうか。それと似たようなものです。

このコマンドを入力したら準備は完了です。

http://localhost:3000/

とURLを入力して、↓のような画面が表示されたらOKです。

ここからファイルを編集していくことで自分の好きなようにサイトの見た目を変更していくことが可能です。

まとめ

今回は導入部分までを紹介しました。

また次の記事でも紹介しますが、使う言語のメインがJavaScriptでReact,Next.js,TypeScriptなどモダンなフレームワーク、言語に触れることができるのでやりがいや楽しみを感じます。

ヘッドレスCMSを開発できるようになってレベルアップを図ります。

次回以降の記事も楽しみにしていてください！