バックエンドエンジニア視点でヘッドレスCMSの魅力に迫る

2人は最近、ヘッドレス対応になった baserCMS を使ってWebサイト構築したんだよね？実際、どうだった？

ヘッドレスCMS対応になったbaserCMSをフル活用した案件で、とても開発しやすかったです。

特に、フロントのデザイン修正などの情報が届いても細かなところまで気にしなくて良いので、その分バックエンドの開発に集中できました。

なるほどー！

Webエンジニアって、フロントエンドやバックエンドって分けられているけど、従来のCMSはフロント側もバック側も全てを包括したものが一般的だったから、結局のところは、どちらの作業もしなければいけなかったよね。
でも、ヘッドレスCMSはフロントとバックが分かれているから、フロント側の作業をしなくて良くなった。というのは大きい？

そうですね、大きいと思います。バックエンドの開発作業をしていく上で、知っておかないといけない情報量がかなり減ったのかな。っていう感じがしますね。
簡単にいうと、表示する情報などが書かれた設計書さえあれば、デザイン変更があっても開発出来ちゃう。これまでは、共有された情報がどこの分野のもので、自分たちの開発に関係がある or ないの判断が必要でしたが、フロント側との構築が分担されて共有情報が減ったので、その判断がなくなったのは大きいです。

最低限の情報だけで、開発が可能となった。ってことなのかな。
 

フロントの開発は Next.js だったけ？

そうです。
でも、キャッチアップでは全く触ってないです。

ベストなヘッドレスCMS！の使い方。っていう開発だったよね。

実際使ってみて、良かったところとか、楽になったところってある？

baserCMSは、コアプラグインである "お知らせ" などが、すでにAPI対応しているので、その部分を実装しなくていいのは良かったです。

一般的にフロント側で利用するデータっていうのは、もう大体用意されているってこと？

そうです。"お問い合わせ" などのフォームや "固定ページ"、"コンテンツ管理" とかもAPI対応されています。

やっぱり、フロントエンドとバックエンドの作業が完全に切り離せるできる状態になったことですね。
表示部分とシステム開発を分けることによってWebサイト上で不具合があった場合でも、それが見た目の問題なのか、データの問題なのかで修正担当がどちらかわかりやすくもなったと思います。あと、デザイン修正の連絡が来ないので、制作時間も短縮されたと思います。

作業レベルでいうとマークアップを触らなくてよくなったことですね。

逆に大変だった点はある？

エンジニアの作業としては、大変だったことはなかったんですが、ディレクターの方が大変だったんじゃないかと。ヘッドレスCMSを利用する場合、フロントエンドとバックエンドのサーバーが変わることがあるんですよね。なので、ヘッドレスCMSの知見がないと、考え方の切りかえが大変だったんじゃないかなって思いました。

確かに。これまでは、フロントもバックもCMSの中で管理していたけど、フロントが別になったことで、管理サイトのURLのドメインが違うケースは戸惑うよね。

なるほどね。でも、表示されるWebサイトURLと管理画面のURLが違うってことは、セキュリティー面は向上するってことだよね？

そうですね。ただ、制作途中のものをプレビュー表示させようとするのが少し大変。トークン認証が必要なんだよね？

プレビュー用のトークンが必要になりますね。

管理画面でプレビュー用のトークンを発行して、そのトークンをフロントに渡します。フロント側は受け取ったトークンでプレビュー用のデータを取得して、表示させる。っていう感じです。

つまり、表示するためのデータは管理側でつくっていて、それをWebサイトでプレビュー表示させるためには、ちゃんと認証が必要だよ。っていうことだよね。
ヘッドレスCMSって、やっぱりセキュリティ面が強くなったよね。

ヘッドレスCMSって、何で増えていったと思います？

さっきも話したけど、バックエンドとフロントエンドが分離されていることに加えて、マルチデバイスに対応できるってとこじゃないかな。
Webサイト運営者にとって、マルチデバイス対応って魅力的だよね。

確かに。Webサイトだけじゃなくてモバイルアプリとかでも使いやすくなるのは良いですよね。

エンジニア目線でいうと、バックエンドとフロントエンドが並行して開発が進めやすいというのは良いですよね。別々に開発するよりも同時進行できると、リリースまでの時間短縮にもなるので。

ただ、モック(テストデータ)は必須になったよね？

そうですね、フロントエンドと並行して開発していくのであれば、必要になるかと思います。
設計書さえしっかりと作っておけば、時間はそんなにかからない作業ですね。

そうだね。今後、バックエンドエンジニアとしてヘッドレスCMSで開発で必要なことってなんだろう。

• API設計

• セキュリティの知識

• インフラの知識

• フロントエンジニアとのコミュニケーション

 こんな感じかな？

フロントエンジニアとのコミュニケーションの中でも新しい知識も必要になってきますよね。フロント側からAPIでどのようにデータを取得するかとか、フロントエンドって別サーバーにデプロイされるから、そのデプロイ方法とかを知っておいたほうが良いこともあります。

管理画面はバックエンドの仕事だから、マークアップも知っておかないといけないし、、結局のところ全部だ。笑

最後に、キャッチアップのメインプロダクト「baserCMS」についても。

世の中のヘッドレスの流れに「baserCMS」が仲間入りした。と言う感じだよね。
ヘッドレスCMSという言葉が注目されているけど、baserCMSはヘッドレスに対応した。というだけで、これまでみたいに、フロントエンドとバックエンドを一緒に使うこともできる。そういう二刀流ができるCMSって他にない気がする。

確かに。他にないかもしれない！

内野くんは？

「baserCMS」って、他のヘッドレスCMSと比べても自由にカスタマイズできるし、CakePHPを使っているから、保守性も高いし、学習もしやすいっていうところじゃないですかね。

あと個人的には、baserCMS 5系になって、CakePHP４になったのですごく書きやすくなりました。

なるほど、機能が追加されてフレームワークのバージョンアップもしたので良いこと尽くめですね！