はじめに
初心者でも直感的に操作でき、柔軟なカスタマイズが可能の「baserCMS」の
baserCMS 5系から追加されたヘッドレス機能を使って、モダンなフレームワークReactと連携方法をステップバイステップでご紹介します。
ヘッドレスCMSとは？
ヘッドレスCMSは、コンテンツを管理する部分と、表示（フロントエンド）の部分を分離することができます。
CMSはコンテンツ管理に特化して、フロントエンドは自由なフレームワークを活用できることが特徴です。
ヘッドレス機能を使って、baserCMSとReactを連携
1. 前準備
2. web APIを有効にする
ヘッドレス機能を使用するには、Web APIを有効にする必要があります。
.envファイルを開いて、USE_CORE_APIとUSE_CORE_ADMIN_APIをtrueに変更してください
これをbaserCMSのbaser APIを利用して取得して見ます。
この情報を使ってReactの方で出力させます。
3. Reactローカル環境構築をしてみる
1. ターミナルでnodeとnpmがダウンロードされていることを確認してください。
2. 次のコマンドで、Reactアプリをダウンロードしてください。
Happy Hackingという文字が出たらプロジェクトを作成できています。
3. プロジェクトフォルダに移動して、コマンドを入力してローカル環境を立ち上げてください。
Compiled successfully!という文字が出たら成功です。
Local: http://localhost:3000と書いてありますので、http://localhost:3000にアクセスしてみてください。
アクセスに成功すると、画像２枚目のようなページに遷移するはずです。
4. Reactでブログ記事を表示してみる
今回はsrc/App.tsxを編集してみましょう。
編集すると、画像のように表示画面も変わるようになっています。
App.tsxにサンプルでコードを記述しました。主な処理として以下の通りです。
・BlogPostsオブジェクトを格納するための型を定義しています。 （5行目〜11行目）
・fetchでブログ記事一覧データを取得するAPIのURLを指定してブログ記事一覧データを取得しています。 （19行目）
フロント画面への表示箇所
先ほどfetchで取得したposts 配列の各要素を post という変数に代入して繰り返し処理します。
今回はid、_eyecatch、createdのデータを使用しています。
※スタイルはTailwind CSSを利用しています。
5. 完成
管理画面からブログの数を増やした時でも、Reactの方に反映もされるようになっています！
最後に
これにより、コンテンツ管理と開発を効率よく分離できるモダンな構成が可能になりました。
baserCMSではbaser APIとして、コンテンツの取得やブログの取得などさまざまなAPIが用意されています。
詳しくは下記URLを参照ください
https://baserproject.github.io/5/web_api/baser_api/
分からないことがあれば、ドキュメントやユーザーズフォーラムが助けになると思います。
次回も役立つ情報をお届けするので、ぜひチェックしてみてください！
ドキュメント: https://baserproject.github.io/5/
ユーザーズフォーラム: https://forum.basercms.net/
