対応表モード 実装サマリー

新規ファイル
ファイル	内容
LinkModal.tsx	共通コンポーネントとして切り出し（圃場詳細・対応表の両方で使用）
変更ファイル
ファイル	変更内容
fields/page.tsx	[通常] / [対応表] トグルボタンを追加。対応表モードでは圃場名・面積・共済漢字地名・中山間所在地を横並び表示。各行で直接+追加/x解除が可能
fields/[id]/page.tsx	LinkModalのインポートを共通コンポーネントに変更
04_画面設計書.md	画面4に対応表モードのレイアウト・機能要件を追記
06_差異レポート.md	E-2の実装状況を更新
対応表モードの機能
一覧表示: 圃場名 / 面積(反) / 共済（耕地-分筆 + 漢字地名） / 中山間（ID + 所在地）
直接編集: 各セルの[+追加]ボタンで検索モーダルを開いて紐づけ追加
紐づけ解除: 各レコードにホバーで表示される[x]ボタン（確認ダイアログ付き）
複数紐づけ: 同一セル内に改行で表示
圃場名クリック: 詳細画面(/fields/[id])に遷移
http://localhost:3000/fields で「対応表」ボタンを押して確認できます。

frontend/src/app/fields/page.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { api } from '@/lib/api';
-import { Field } from '@/types';
+import { Field, OfficialKyosaiField, OfficialChusankanField } from '@/types';
 import Navbar from '@/components/Navbar';
-import { Plus, Pencil, Trash2, ArrowUp, ArrowDown } from 'lucide-react';
+import LinkModal from '@/components/LinkModal';
+import { Plus, Pencil, Trash2, ArrowUp, ArrowDown, X } from 'lucide-react';
+
+type ViewMode = 'normal' | 'mapping';
 
 export default function FieldsPage() {
   const router = useRouter();
@@ -14,6 +17,13 @@ export default function FieldsPage() {
   const [deleting, setDeleting] = useState<number | null>(null);
   const [uniqueGroups, setUniqueGroups] = useState<string[]>([]);
   const [sortOrder, setSortOrder] = useState('group_name,display_order,id');
+  const [viewMode, setViewMode] = useState<ViewMode>('normal');
+
+  // Modal state for mapping mode
+  const [modalFieldId, setModalFieldId] = useState<number | null>(null);
+  const [modalType, setModalType] = useState<'kyosai' | 'chusankan' | null>(null);
+  const [allKyosai, setAllKyosai] = useState<OfficialKyosaiField[]>([]);
+  const [allChusankan, setAllChusankan] = useState<OfficialChusankanField[]>([]);
 
   useEffect(() => {
     fetchFields();
@@ -34,10 +44,7 @@ export default function FieldsPage() {
   };
 
   const handleDelete = async (id: number) => {
-    if (!confirm('この圃場を削除してもよろしいですか？')) {
-      return;
-    }
-
+    if (!confirm('この圃場を削除してもよろしいですか？')) return;
     setDeleting(id);
     try {
       await api.delete(`/fields/${id}/`);
@@ -52,17 +59,11 @@ export default function FieldsPage() {
 
   const handleGroupChange = async (fieldId: number, newGroup: string) => {
     try {
-      await api.patch(`/fields/${fieldId}/`, {
-        group_name: newGroup || null
-      });
-      
+      await api.patch(`/fields/${fieldId}/`, { group_name: newGroup || null });
       if (newGroup && !uniqueGroups.includes(newGroup)) {
         setUniqueGroups([...uniqueGroups, newGroup].sort());
       }
-      
-      if (sortOrder !== 'id') {
-        await fetchFields();
-      }
+      if (sortOrder !== 'id') await fetchFields();
     } catch (error) {
       console.error('Failed to update group:', error);
       alert('グループの更新に失敗しました');
@@ -72,21 +73,15 @@ export default function FieldsPage() {
   const handleMoveOrder = async (index: number, direction: 'up' | 'down') => {
     const newIndex = direction === 'up' ? index - 1 : index + 1;
     if (newIndex < 0 || newIndex >= fields.length) return;
-
     if (sortOrder !== 'display_order,group_name,id') {
       setSortOrder('display_order,group_name,id');
       return;
     }
-
     const currentField = fields[index];
     const targetField = fields[newIndex];
-
-    const currentOrder = currentField.display_order ?? 0;
-    const targetOrder = targetField.display_order ?? 0;
-
     try {
-      await api.patch(`/fields/${currentField.id}/`, { display_order: targetOrder });
-      await api.patch(`/fields/${targetField.id}/`, { display_order: currentOrder });
+      await api.patch(`/fields/${currentField.id}/`, { display_order: targetField.display_order ?? 0 });
+      await api.patch(`/fields/${targetField.id}/`, { display_order: currentField.display_order ?? 0 });
       await fetchFields();
     } catch (error) {
       console.error('Failed to reorder:', error);
@@ -94,6 +89,67 @@ export default function FieldsPage() {
     }
   };
 
+  // --- Mapping mode link management ---
+  const openLinkModal = async (fieldId: number, type: 'kyosai' | 'chusankan') => {
+    try {
+      if (type === 'kyosai') {
+        const res = await api.get('/kyosai-fields/');
+        setAllKyosai(res.data);
+      } else {
+        const res = await api.get('/chusankan-fields/');
+        setAllChusankan(res.data);
+      }
+      setModalFieldId(fieldId);
+      setModalType(type);
+    } catch (err) {
+      console.error('Failed to fetch master data:', err);
+    }
+  };
+
+  const addLinks = async (ids: number[]) => {
+    if (!modalFieldId || !modalType) return;
+    try {
+      if (modalType === 'kyosai') {
+        await api.post(`/fields/${modalFieldId}/kyosai-links/`, { kyosai_field_ids: ids });
+      } else {
+        await api.post(`/fields/${modalFieldId}/chusankan-links/`, { chusankan_field_ids: ids });
+      }
+      await fetchFields();
+    } catch (err) {
+      console.error('Failed to add links:', err);
+    }
+  };
+
+  const removeKyosaiLink = async (fieldId: number, kyosaiId: number) => {
+    if (!confirm('この共済区画の紐づけを解除しますか？')) return;
+    try {
+      await api.delete(`/fields/${fieldId}/kyosai-links/${kyosaiId}/`);
+      await fetchFields();
+    } catch (err) {
+      console.error('Failed to remove kyosai link:', err);
+    }
+  };
+
+  const removeChusankanLink = async (fieldId: number, chusankanId: number) => {
+    if (!confirm('この中山間区画の紐づけを解除しますか？')) return;
+    try {
+      await api.delete(`/fields/${fieldId}/chusankan-links/${chusankanId}/`);
+      await fetchFields();
+    } catch (err) {
+      console.error('Failed to remove chusankan link:', err);
+    }
+  };
+
+  const currentFieldForModal = modalFieldId ? fields.find((f) => f.id === modalFieldId) : null;
+  const kyosaiLinkedIds = useMemo(() => {
+    if (!currentFieldForModal) return new Set<number>();
+    return new Set(currentFieldForModal.kyosai_fields.map((k) => k.id));
+  }, [currentFieldForModal]);
+  const chusankanLinkedIds = useMemo(() => {
+    if (!currentFieldForModal) return new Set<number>();
+    return new Set(currentFieldForModal.chusankan_fields.map((c) => c.id));
+  }, [currentFieldForModal]);
+
   const isDisplayOrderMode = sortOrder === 'display_order,group_name,id';
 
   if (loading) {
@@ -110,10 +166,10 @@ export default function FieldsPage() {
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-6 flex items-center justify-between">
+      <div className={`mx-auto px-4 sm:px-6 lg:px-8 py-8 ${viewMode === 'mapping' ? 'max-w-full' : 'max-w-7xl'}`}>
+        <div className="mb-6 flex items-center justify-between flex-wrap gap-3">
           <h1 className="text-2xl font-bold text-gray-900">圃場管理</h1>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 flex-wrap">
             <div className="flex items-center gap-2">
               <label className="text-sm text-gray-600">並び順:</label>
               <select
@@ -126,6 +182,31 @@ export default function FieldsPage() {
                 <option value="id">登録順</option>
               </select>
             </div>
+
+            {/* View mode toggle */}
+            <div className="flex rounded-md border border-gray-300 overflow-hidden">
+              <button
+                onClick={() => setViewMode('normal')}
+                className={`px-3 py-2 text-sm ${
+                  viewMode === 'normal'
+                    ? 'bg-green-600 text-white'
+                    : 'bg-white text-gray-600 hover:bg-gray-50'
+                }`}
+              >
+                通常
+              </button>
+              <button
+                onClick={() => setViewMode('mapping')}
+                className={`px-3 py-2 text-sm border-l border-gray-300 ${
+                  viewMode === 'mapping'
+                    ? 'bg-green-600 text-white'
+                    : 'bg-white text-gray-600 hover:bg-gray-50'
+                }`}
+              >
+                対応表
+              </button>
+            </div>
+
             <button
               onClick={() => router.push('/fields/new')}
               className="flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
@@ -140,7 +221,112 @@ export default function FieldsPage() {
           <div className="bg-white rounded-lg shadow p-8 text-center">
             <p className="text-gray-500">圃場データがありません。「新規作成」ボタンから追加してください。</p>
           </div>
+        ) : viewMode === 'mapping' ? (
+          /* ===== 対応表モード ===== */
+          <div className="bg-white rounded-lg shadow overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
+                      圃場名
+                    </th>
+                    <th className="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap w-20">
+                      面積(反)
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      共済（漢字地名）
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      中山間（所在地）
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {fields.map((field) => (
+                    <tr key={field.id} className="hover:bg-gray-50 align-top">
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <button
+                          onClick={() => router.push(`/fields/${field.id}`)}
+                          className="text-sm font-medium text-blue-600 hover:text-blue-800"
+                          title="詳細を開く"
+                        >
+                          {field.name}
+                        </button>
+                      </td>
+                      <td className="px-3 py-3 text-right text-sm text-gray-500 whitespace-nowrap">
+                        {field.area_tan || '-'}
+                      </td>
+
+                      {/* 共済セル */}
+                      <td className="px-4 py-3 text-sm">
+                        {field.kyosai_fields.length > 0 ? (
+                          <div className="space-y-1">
+                            {field.kyosai_fields.map((k) => (
+                              <div key={k.id} className="flex items-center gap-1 group">
+                                <span className="text-gray-700">
+                                  <span className="text-gray-400">{k.k_num}{k.s_num ? `-${k.s_num}` : ''}</span>
+                                  {' '}{k.kanji_name}
+                                </span>
+                                <button
+                                  onClick={() => removeKyosaiLink(field.id, k.id)}
+                                  className="text-red-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+                                  title="紐づけ解除"
+                                >
+                                  <X className="h-3.5 w-3.5" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <span className="text-gray-300">-</span>
+                        )}
+                        <button
+                          onClick={() => openLinkModal(field.id, 'kyosai')}
+                          className="mt-1 text-xs text-green-500 hover:text-green-700 flex items-center gap-0.5"
+                        >
+                          <Plus className="h-3 w-3" />追加
+                        </button>
+                      </td>
+
+                      {/* 中山間セル */}
+                      <td className="px-4 py-3 text-sm">
+                        {field.chusankan_fields.length > 0 ? (
+                          <div className="space-y-1">
+                            {field.chusankan_fields.map((c) => (
+                              <div key={c.id} className="flex items-center gap-1 group">
+                                <span className="text-gray-700">
+                                  <span className="text-gray-400">ID{c.c_id}</span>
+                                  {' '}{c.oaza} {c.aza} {c.chiban}
+                                </span>
+                                <button
+                                  onClick={() => removeChusankanLink(field.id, c.id)}
+                                  className="text-red-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+                                  title="紐づけ解除"
+                                >
+                                  <X className="h-3.5 w-3.5" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <span className="text-gray-300">-</span>
+                        )}
+                        <button
+                          onClick={() => openLinkModal(field.id, 'chusankan')}
+                          className="mt-1 text-xs text-green-500 hover:text-green-700 flex items-center gap-0.5"
+                        >
+                          <Plus className="h-3 w-3" />追加
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
         ) : (
+          /* ===== 通常モード ===== */
           <div className="bg-white rounded-lg shadow overflow-hidden">
             <datalist id="groups">
               {uniqueGroups.map((group) => (
@@ -267,6 +453,61 @@ export default function FieldsPage() {
           </div>
         )}
       </div>
+
+      {/* Link Modal */}
+      {modalType === 'kyosai' && modalFieldId && (
+        <LinkModal
+          title={`共済区画を追加 — ${currentFieldForModal?.name}`}
+          items={allKyosai}
+          alreadyLinkedIds={kyosaiLinkedIds}
+          renderItem={(k: OfficialKyosaiField) => (
+            <div>
+              <span className="font-medium">{k.k_num}{k.s_num ? `-${k.s_num}` : ''}</span>
+              {' '}{k.kanji_name}
+              <span className="text-gray-400 ml-2">{k.area.toLocaleString()}m2</span>
+              {k.linked_field_names && k.linked_field_names.length > 0 && (
+                <span className="text-gray-400 ml-2 text-xs">
+                  ({k.linked_field_names.join(', ')})
+                </span>
+              )}
+            </div>
+          )}
+          searchFilter={(k: OfficialKyosaiField, q: string) =>
+            k.kanji_name.toLowerCase().includes(q) ||
+            k.address.toLowerCase().includes(q) ||
+            k.k_num.includes(q)
+          }
+          onAdd={addLinks}
+          onClose={() => { setModalFieldId(null); setModalType(null); }}
+        />
+      )}
+      {modalType === 'chusankan' && modalFieldId && (
+        <LinkModal
+          title={`中山間区画を追加 — ${currentFieldForModal?.name}`}
+          items={allChusankan}
+          alreadyLinkedIds={chusankanLinkedIds}
+          renderItem={(c: OfficialChusankanField) => (
+            <div>
+              <span className="font-medium">ID{c.c_id}</span>
+              {' '}{c.oaza} {c.aza} {c.chiban}
+              <span className="text-gray-400 ml-2">{c.area.toLocaleString()}m2</span>
+              {c.linked_field_names && c.linked_field_names.length > 0 && (
+                <span className="text-gray-400 ml-2 text-xs">
+                  ({c.linked_field_names.join(', ')})
+                </span>
+              )}
+            </div>
+          )}
+          searchFilter={(c: OfficialChusankanField, q: string) =>
+            c.c_id.includes(q) ||
+            c.oaza.toLowerCase().includes(q) ||
+            c.aza.toLowerCase().includes(q) ||
+            c.chiban.includes(q)
+          }
+          onAdd={addLinks}
+          onClose={() => { setModalFieldId(null); setModalType(null); }}
+        />
+      )}
     </div>
   );
 }