繰り返しフィールドはカスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。
入力したデータは配列として返却されるので、フロントエンド側で自由度の高いデザインをすることが可能です。

繰り返しフィールドを利用するためには、事前にカスタムフィールドを作成しておく必要があります。

カスタムフィールドの作成についてはこちらをご覧ください。

繰り返しフィールドの設定方法

以下のようなカスタムフィールドが作成されている前提で、設定方法をご説明します。

• heading（見出し）：テキストフィールド
• link（リンク）：テキストフィールド
• text（テキスト）：リッチエディタ
• image（画像）：画像
• imageText（画像 + テキスト）：画像 + リッチエディタ
• relatedLinks（関連記事リンク）：複数コンテンツ参照

次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、「API設定」→「APIスキーマ」に移動し、フィールドの「種類」として「繰り返し」を選択します。



モーダルウィンドウが開き、事前に設定したカスタムフィールドの中でどのカスタムフィールドを利用するか選択できます。利用したいものにチェックを入れ、「決定」をクリックします。



これで繰り返しフィールドの準備はできました。

編集画面での入稿方法

次に編集画面での入稿方法をご説明します。
繰り返しフィールドが設定されていると、次のようなフィールド（繰り返しフィールド（デモ））が用意されています。



「＋フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。



ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールド（テキストフィールド）が表示されます。



また、フィールドの上下に「＋」ボタンがあるので、こちらをクリックすることで上にも下にもフィールドを追加していくことができます。



次に下の「＋」ボタンをクリックして、今度は「画像＋テキスト」を追加します。
すると、以下のように「1. 見出し」「2. 画像＋テキスト」のフィールドを並べることができます。

また、繰り返しフィールドにマウスを合わせると、各フィールドの右上に「×」ボタンが表示されるので、そちらをクリックすることでフィールドの削除も可能です。

APIからデータを取得する

それでは実際に値を入力して、APIからデータを取得してみましょう。確認のため、次のように入力します。



APIプレビューで実際にプレビューしてみると、次のようなレスポンスが得られます。

{
    "id": "kkk7km7-ng",
    "createdAt": "2023-08-28T06:25:36.825Z",
    "updatedAt": "2023-08-28T06:25:36.825Z",
    "repeat": [
        {
            "fieldId": "heading",
            "heading": "見出しです"
        },
        {
            "fieldId": "imageText",
            "image": {
                "url": "https://images.microcms-assets.io/assets/9c85391fec1147f2addc9287c298bfe3/9f4f434029274faaaafee7be9f115931/ogp.png",
                "height": 630,
                "width": 1200
            },
            "text": "<h1 id=\"h4a6e27f824\">繰り返しフィールドとは</h1><p>カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。</p>"
        }
    ]
}

繰り返しフィールド部分は配列形式で返却されており、各要素にfieldIdと入力内容が含まれています。

{
    "repeat": [
        {
            "fieldId": "heading",
            // 以下、フィールドの内容
        },
        {
            "fieldId": "imageText",
            // 以下、フィールドの内容
        },
        // 以下、続く
    ]
}

繰り返しフィールドを用いた実装例

配列の要素ごとにコンポーネントを定義（<Heading />, <ImageText />）しておき、API経由で得た値を渡す例をご紹介します。以下、Reactにおける実装例です。

export const Main = ({ repeat }) => (
  <main>
    {repeat.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>
);

ここでは、繰り返しフィールドの配列（repeat）をmap()メソッドでで変換し、filedIdごとに適したコンポーネントを出力しています。
このようにすることで、編集画面で入力した順序のまま、ビューを構築することができます。

その他の活用事例

繰り返しフィールドを用いると、表現に合わせた柔軟なフィールドが構築できます。
繰り返しフィールドの活用事例、実装事例として以下のブログなどもご用意していますので、こちらも併せてご参照ください。