React + microCMSでHello microCMS

この記事では、ReactとmicroCMSを使って「Hello microCMS」を実現していきたいと思います。

## microCMSとは
https://microcms.io/
APIベースの日本製ヘッドレスCMSです。
管理画面で入稿したデータをAPIから取得することができます。

## 1. Reactプロジェクト作成
まず、Reactプロジェクトを作成します。
```
npx create-react-app <プロジェクトの名前>
```
ローカルで起動し、下記のような画面になっていたらプロジェクト作成は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/ab59ef66-33f3-e64a-7339-e61c822d6a97.png)

## 2. microCMSのAPI作成
**microCMSを使い始めるために、アカウント登録・ログインをします。**

https://document.microcms.io/manual/getting-started
手順は公式のドキュメントに沿って実施します。
アカウント作成の手順は、ここでは割愛します。


**次にサービスを作成します。**
こちらもドキュメントに沿って実施します。
https://document.microcms.io/manual/create-service

「サービスを作成」の画面に進んだら、「一から作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/b85cf4d9-b2f1-090e-2b03-8c3e732b6bbc.png)

サービス情報の入力します。
今回は、「サービス名」・「サービスID」ともに「hello-microcms」にしています。
サービスIDは管理画面のURL、APIのエンドポイントのサブドメインに設定される値になります。
「サービスを作成する」をクリックすればサービスの作成は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/d25a1fa6-5a96-266c-1cc7-6f5e28c32430.png)

**サービスの作成が完了したら、管理画面からAPIを作成します。**

「APIを作成」の画面に進んだら、「自分で決める」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/261eb1d1-843a-6e64-0b37-6b0e52501859.png)

APIの基本情報を入力を入力します。
今回は、エンドポイントを「hello」にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/ce379c90-96d6-c40d-16e5-cdf1f42161c6.png)

返却値の型を選択します。
今回は、「Hello microCMS」を表示するだけなのでオブジェクト型を選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/5ed4c20c-a882-8f17-7366-e2b1ae35da32.png)

APIスキーマの設定をします。
今回は、APIレスポンスのプロパティ名を「message」としました。
これでAPIの作成は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/b73deef1-1159-3567-b98b-ed42fadbb2b1.png)

管理画面から作成したAPIを選択します。
メッセージに「Hello microCMS」を入力し、「公開」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/93fa8c02-ea0a-fe14-80b8-7e84be5b29c9.png)

公開中になりました。
これで、「Hello microCMS」が返却されるAPIの準備は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/46225f06-f345-6a2d-6baf-5841dba0e22b.png)

## 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`ファイルを以下のように編集しました。

```react: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キー」から確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/0105ba9a-62a6-9e8e-f9e1-6da7dcad715e.png)

ローカルでアプリを起動すると、正常に表示されることを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626030/50e736b3-c7ed-d6a8-cc60-0dbc3f7c3c01.png)

## おわりに
今回microCMSにふれてみて、ドキュメントが日本語なのでとっつきやすかったです。
また、公式のブログも参考になる記事が多かったです。
https://blog.microcms.io/