microcmsio · himaratsu · May 14, 2026
diff --git a/docs/manual/繰り返し.md b/docs/manual/繰り返し.md
@@ -0,0 +1,210 @@
+---
+contentId: repeat-field
+directory: manual
+---
+
+# 繰り返し
+
+繰り返しフィールドはカスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。  
+入力したデータは配列として返却されるので、フロントエンド側で自由度の高いデザインをすることが可能です。  
+
+繰り返しフィールドを利用するためには、事前にカスタムフィールドを作成しておく必要があります。  
+
+カスタムフィールドの作成についてはこちらをご覧ください。
+
+https://document.microcms.io/manual/custom-field
+
+フィールドの設定方法
+==========
+
+以下のようなカスタムフィールドが作成されている前提で、設定方法をご説明します。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8c6db5b570144f6baa43ffb7c1e3b504/CleanShot%202023-08-28%20at%2015.06.13%402x.png)
+
+*   **heading（見出し）**：テキストフィールド
+*   **link（リンク）**：テキストフィールド
+*   **text（テキスト）**：リッチエディタ
+*   **image（画像）**：画像
+*   **imageText（画像 + テキスト）**：画像 + リッチエディタ
+*   **relatedLinks（関連記事リンク）**：複数コンテンツ参照
+
+次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、「API設定」→「APIスキーマ」に移動し、フィールドの「種類」として「繰り返し」を選択します。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/bf42d0f1443b454bab23cfa217340c35/CleanShot%202023-08-29%20at%2013.51.36%402x.png)  
+
+モーダルウィンドウが開き、事前に設定したカスタムフィールドの中でどのカスタムフィールドを利用するか選択できます。利用したいものにチェックを入れ、「決定」をクリックします。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/15a612e79b244c4d91140c4bed8b4f13/CleanShot%202023-08-28%20at%2015.12.01%402x.png)  
+
+データの入稿方法
+========
+
+次に編集画面での入稿方法をご説明します。  
+
+フィールドの追加
+--------
+
+繰り返しフィールドが設定されていると、次のようなフィールド（繰り返しフィールド（デモ））が用意されています。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2242e101651c4fb28d1c4bd0f3b3f209/CleanShot%202026-05-13%20at%2020.32.55.png)  
+
+「＋フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a8f6c6b84c654864b9232a49d7e47f99/CleanShot%202023-08-28%20at%2015.30.00%402x.png)  
+
+ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールド（テキストフィールド）が表示されます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5a827c630c0c40f98c22533536bb9b7d/CleanShot%202026-05-13%20at%2020.35.38.png)  
+
+また、「フィールドを追加」ボタンを押すと、下にフィールドを追加していくことができます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/159451a349dc44178c0c9fdb32047434/CleanShot%202026-05-13%20at%2020.37.08.png)  
+
+三点リーダーをクリックすると表示されるメニューからは、上下にフィールドを追加できます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/810ef0da6a7e40c192234e2c0dbee6ff/CleanShot%202026-05-13%20at%2020.44.36.png)  
+
+今度は「画像＋テキスト」のフィールドを追加します。  
+すると、以下のように「1. 見出し」「2. 画像＋テキスト」のフィールドを並べることができます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/36841a3fc1c14f26ad1c122cc7a9c2a5/CleanShot%202026-05-13%20at%2020.39.40.png)
+
+「画像＋テキスト」のフィールドは入力フォームが横並びになっていますが、このようなフィールドのレイアウト設定はカスタムフィールド側で行います。設定方法については以下のドキュメントをご覧ください。
+
+https://document.microcms.io/manual/custom-field
+
+フィールドの移動
+--------
+
+「＝」をドラッグ&ドロップすると、フィールドを上下に移動できます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/02d57665883344f4bb31435f40b07dbd/CleanShot%202026-05-14%20at%2013.47.29.png)  
+
+三点リーダーをクリックすると表示されるメニューからも、フィールドを上下に移動できます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/267275025fdd49e29fc976a1f78a9e5b/CleanShot%202026-05-14%20at%2013.44.30.png)  
+
+フィールドの折りたたみ
+-----------
+
+カスタムフィールド名の横にある矢印をクリックすると、フィールドの折りたたみ・展開ができます。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/55d920a19d8c4325935886eb9f484a6d/CleanShot%202026-05-14%20at%2013.48.25.png)  
+
+フィールドの削除
+--------
+
+フィールドを削除するには、三点リーダーをクリックしてメニューを表示し「フィールドを削除」をクリックします。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8c2063103dbc4fdabe907b0e24e82084/CleanShot%202026-05-13%20at%2020.45.49.png)  
+
+API、CSVを利用した入稿については以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/post-content#had86c3779e
+
+https://document.microcms.io/manual/csv-import#h2b3036ae9c
+
+制限事項／注意事項
+=========
+
+*   繰り返しフィールドで設定できるカスタムフィールド数に上限は設けていません。
+*   繰り返しフィールドで使用しているカスタムフィールドを削除すると、既にそのフィールドを使って登録していたデータは管理画面には表示され続けますが、APIレスポンスからは除外されます。
+
+フィールドの詳細設定
+==========
+
+設定項目
+
+説明
+
+必須項目
+
+設定をONにすると入稿時の入力が必須となります。
+
+説明文
+
+入稿画面に表示する説明文です。
+
+繰り返しフィールド
+
+繰り返しフィールドに使用するカスタムフィールドを設定します。
+
+並び順
+
+カスタムフィールドを選択する際の並び順を設定します。
+
+繰り返しフィールドの数を制限する
+
+繰り返しフィールドの最小数と最大数を設定します。
+
+APIのレスポンス
+=========
+
+それでは実際に値を入力して、APIからデータを取得してみましょう。確認のため、次のように入力します。  
+
+![](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f6bb92484bdc42a9972dee976e43088e/CleanShot%202026-05-13%20at%2020.49.00.png)  
+
+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/xxxxxx/xxxxxx/blog-template.png",
+                    "height": 630,
+                    "width": 1200
+                },
+                "text": "<h1 id=\"h4a6e27f824\">繰り返しフィールドとは</h1><p>カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことができるフィールドです。</p>"
+            }
+        ]
+    }
+
+
+GET APIの基本的なレスポンス形式については以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/get-api-field-responses#hc127980c8b
+
+フロントエンドでの利用方法
+=============
+
+配列の要素ごとにコンポーネントを定義（`<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()`メソッドで変換し、`fieldId`ごとに適したコンポーネントを出力しています。  
+このようにすることで、編集画面で入力した順序のまま、ビューを構築することができます。
+
+その他の活用事例
+--------
+
+繰り返しフィールドを用いると、表現に合わせた柔軟なフィールドが構築できます。  
+繰り返しフィールドの活用事例、実装事例として以下のブログなどもご用意していますので、こちらも併せてご参照ください。
+
+https://blog.microcms.io/intro-custom-repeatfield/
+
+https://blog.microcms.io/conversation-design/
+
+https://blog.microcms.io/custom-field-lp/
+
+https://blog.microcms.io/nuxt-cv-point/