この記事では、ReactとmicroCMSを使って「Hello microCMS」を実現していきたいと思います。
microCMSとは
https://microcms.io/
APIベースの日本製ヘッドレスCMSです。
管理画面で入稿したデータをAPIから取得することができます。
1. Reactプロジェクト作成
まず、Reactプロジェクトを作成します。
npx create-react-app <プロジェクトの名前>
ローカルで起動し、下記のような画面になっていたらプロジェクト作成は完了です。
2. microCMSのAPI作成
microCMSを使い始めるために、アカウント登録・ログインをします。
https://document.microcms.io/manual/getting-started
手順は公式のドキュメントに沿って実施します。
アカウント作成の手順は、ここでは割愛します。
次にサービスを作成します。
こちらもドキュメントに沿って実施します。
https://document.microcms.io/manual/create-service
「サービスを作成」の画面に進んだら、「一から作成」を選択します。
サービス情報の入力します。
今回は、「サービス名」・「サービスID」ともに「hello-microcms」にしています。
サービスIDは管理画面のURL、APIのエンドポイントのサブドメインに設定される値になります。
「サービスを作成する」をクリックすればサービスの作成は完了です。
サービスの作成が完了したら、管理画面からAPIを作成します。
「APIを作成」の画面に進んだら、「自分で決める」を選択します。
APIの基本情報を入力を入力します。
今回は、エンドポイントを「hello」にしました。
返却値の型を選択します。
今回は、「Hello microCMS」を表示するだけなのでオブジェクト型を選択しました。
APIスキーマの設定をします。
今回は、APIレスポンスのプロパティ名を「message」としました。
これでAPIの作成は完了です。
管理画面から作成したAPIを選択します。
メッセージに「Hello microCMS」を入力し、「公開」ボタンをクリックします。
公開中になりました。
これで、「Hello microCMS」が返却されるAPIの準備は完了です。
3. データ取得し、Hello microCMS
ReactアプリケーションでmicroCMSからデータを取得し、表示していきます。
作成したReactプロジェクトにmicroCMSのAPIとの通信を行うためのSDK（microcms-js-sdk）のインストールを行います。
https://www.npmjs.com/package/microcms-js-sdk
npm install microcms-js-sdk
App.jsファイルを以下のように編集しました。
import "./App.css";
import React, { useEffect, useState } from "react";
import { createClient } from "microcms-js-sdk";
const client = createClient({
serviceDomain: "<service-domain>",
apiKey: "<api-Key>",
});
function App() {
const [message, setMessage] = useState("");
useEffect(() => {
client
.get({
endpoint: "hello",
})
.then((res) => setMessage(res.message))
.catch((err) => console.log(err));
}, []);
return (
<div className="App">
<h1>{message}</h1>
</div>
);
}
export default App;
service-domainは、作成したサービス「XXXX.microcms.io」のXXXX部分を設定します。
api-Keyは、自動で作成されたAPIキーの文字列をコピーして入力します。microCMS管理画面の左のサイドバーの「一個のAPIキー」から確認することができます。
ローカルでアプリを起動すると、正常に表示されることを確認できました。
おわりに
今回microCMSにふれてみて、ドキュメントが日本語なのでとっつきやすかったです。
また、公式のブログも参考になる記事が多かったです。
https://blog.microcms.io/