繰り返しフィールド
繰り返しフィールドはカスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。
入力したデータは配列として返却されるので、フロントエンド側で自由度の高いデザインをすることが可能です。
繰り返しフィールドを利用するためには、事前にカスタムフィールドを作成しておく必要があります。
カスタムフィールドの作成についてはこちらをご覧ください。

- カスタムフィールド
- https://document.microcms.io/manual/custom-field
繰り返しフィールドの設定
以下のようなカスタムフィールドが作成されている前提で、設定方法を紹介します。
次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、API設定 > APIスキーマ に移動します。
ここで「種類」のところに繰り返しフィールドがあるので選択します。
すると、どのカスタムフィールドを利用するか聞かれるので、使用したいカスタムフィールドを選択しましょう。
これで繰り返しフィールドの準備はできました。
入稿画面
次に入稿画面に移動してみましょう。
次のような繰り返しフィールドが用意されているはずです。
「+フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。
ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールドが表示されます。
フィールドの上下に「+」ボタンがあるので、こちらをクリックすることで上にも下にもフィールドを追加していくことができます。
試しに下の「+」ボタンをクリックして、今度は「画像+テキスト」を追加してみます。
上記のように「見出し」「画像+テキスト」のフィールドを並べることができました。
「画像+テキスト」のフィールドは入力フォームが横並びになっていますが、そのあたりの設定はカスタムフィールド側で行います。
設定方法については以下のドキュメントをご覧ください。

- カスタムフィールド
- https://document.microcms.io/manual/custom-field
また、フィールドにオンマウスすると右上に「×」ボタンが表示されるので、そちらをクリックすることでフィールドの削除も可能です。
それでは実際に値を入力して、APIを叩いてみましょう。次のように入力してみました。
APIを叩くと次のようなレスポンスが得られます。
{
"id": "0i97uu7w5",
"createdAt": "2022-03-18T06:43:41.069Z",
"updatedAt": "2022-03-18T06:43:41.069Z",
"publishedAt": "2022-03-18T06:43:41.069Z",
"revisedAt": "2022-03-18T06:43:41.069Z",
"title": "test",
"mainText": [
{
"fieldId": "heading",
"text": "見出しです"
},
{
"fieldId": "imageText",
"image": {
"url": "https://images.microcms-assets.io/assets/4080bbda59134ef9876227c3d239da2d/c79128a378c24721b911c46f6ea2a03c/icon.png",
"height": 340,
"width": 340
},
"text": "<h1 id=\"h4a6e27f824\">繰り返しフィールドとは</h1><p>カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。</p>"
}
]
}
繰り返しフィールド部分は配列形式で返されており、各要素にfieldIdと入力内容が含まれています。
繰り返しフィールドを用いた実装例
配列の要素ごとにコンポーネントを定義しておき、値を流し込んでいく形式がわかりやすいかと思います。
以下にReactにおける実装例を示します。
export const Main = ({ body }) => (
<main>
{body.map((item, i) =>
item.fieldId === 'heading' ? (
<Heading key={i} text={item.text} />
) : item.fieldId === 'imageText' ? (
<ImageText key={i} image={item.image} text={item.text} />
) : null
)}
</main>
);
ここでは、繰り返しフィールドの配列(body)をmapで変換し、filedIdごとに適したコンポーネントを出力しています。
このようにすることで、入稿画面で入力した順序のまま、ビューを構築することができます。
また以下のチュートリアルなどもご参考ください。

- microCMSのカスタムフィールドを使ってランディングページを作ろう
- https://blog.microcms.io/custom-field-lp/

- カスタムフィールドを使用してブログにCVエリアを追加しよう
- https://blog.microcms.io/nuxt-cv-point/

- microCMSでAmazonアソシエイトをはじめよう
- https://blog.microcms.io/start-amazon-associate/