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

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

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

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

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



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



すると、どのカスタムフィールドを利用するか聞かれるので、使用したいカスタムフィールドを選択しましょう。



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

入稿画面

次に入稿画面に移動してみましょう。
次のような繰り返しフィールドが用意されているはずです。



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



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



フィールドの上下に「＋」ボタンがあるので、こちらをクリックすることで上にも下にもフィールドを追加していくことができます。
試しに下の「＋」ボタンをクリックして、今度は「画像＋テキスト」を追加してみます。



上記のように「見出し」「画像＋テキスト」のフィールドを並べることができました。
「画像＋テキスト」のフィールドは入力フォームが横並びになっていますが、そのあたりの設定はカスタムフィールド側で行います。
設定方法については以下のドキュメントをご覧ください。

また、フィールドにオンマウスすると右上に「×」ボタンが表示されるので、そちらをクリックすることでフィールドの削除も可能です。
それでは実際に値を入力して、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ごとに適したコンポーネントを出力しています。
このようにすることで、入稿画面で入力した順序のまま、ビューを構築することができます。
また以下のチュートリアルなどもご参考ください。