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

新規ファイル
ファイル	内容
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/[id]/page.tsx

@@ -5,113 +5,8 @@ import { useRouter, useParams } from 'next/navigation';
 import { api } from '@/lib/api';
 import { Field, OfficialKyosaiField, OfficialChusankanField } from '@/types';
 import Navbar from '@/components/Navbar';
-import { ArrowLeft, Save, Plus, X, Search } from 'lucide-react';
-
-// --- Link Modal Component ---
-function LinkModal<T extends { id: number }>({
-  title,
-  items,
-  alreadyLinkedIds,
-  renderItem,
-  searchFilter,
-  onAdd,
-  onClose,
-}: {
-  title: string;
-  items: T[];
-  alreadyLinkedIds: Set<number>;
-  renderItem: (item: T) => React.ReactNode;
-  searchFilter: (item: T, query: string) => boolean;
-  onAdd: (ids: number[]) => void;
-  onClose: () => void;
-}) {
-  const [search, setSearch] = useState('');
-  const [selected, setSelected] = useState<Set<number>>(new Set());
-
-  const filtered = useMemo(() => {
-    if (!search.trim()) return items;
-    return items.filter((item) => searchFilter(item, search.trim().toLowerCase()));
-  }, [items, search, searchFilter]);
-
-  const toggle = (id: number) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between p-4 border-b">
-          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
-        <div className="p-4 border-b">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="検索..."
-              className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
-              autoFocus
-            />
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-2">
-          {filtered.length === 0 ? (
-            <p className="text-gray-500 text-sm text-center py-4">該当する区画がありません</p>
-          ) : (
-            filtered.map((item) => {
-              const isLinked = alreadyLinkedIds.has(item.id);
-              const isSelected = selected.has(item.id);
-              return (
-                <label
-                  key={item.id}
-                  className={`flex items-start gap-3 p-2 rounded cursor-pointer hover:bg-gray-50 ${
-                    isLinked ? 'opacity-50' : ''
-                  }`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={isSelected}
-                    disabled={isLinked}
-                    onChange={() => toggle(item.id)}
-                    className="mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
-                  />
-                  <div className="flex-1 text-sm">{renderItem(item)}</div>
-                </label>
-              );
-            })
-          )}
-        </div>
-
-        <div className="p-4 border-t flex justify-end">
-          <button
-            onClick={() => {
-              onAdd(Array.from(selected));
-              onClose();
-            }}
-            disabled={selected.size === 0}
-            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-          >
-            選択した区画を追加 ({selected.size}件)
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// --- Main Page ---
+import LinkModal from '@/components/LinkModal';
+import { ArrowLeft, Save, Plus, X } from 'lucide-react';
 export default function EditFieldPage() {
   const router = useRouter();
   const params = useParams();

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>
   );
 }

frontend/src/components/LinkModal.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { X, Search } from 'lucide-react';
+
+interface LinkModalProps<T extends { id: number }> {
+  title: string;
+  items: T[];
+  alreadyLinkedIds: Set<number>;
+  renderItem: (item: T) => React.ReactNode;
+  searchFilter: (item: T, query: string) => boolean;
+  onAdd: (ids: number[]) => void;
+  onClose: () => void;
+}
+
+export default function LinkModal<T extends { id: number }>({
+  title,
+  items,
+  alreadyLinkedIds,
+  renderItem,
+  searchFilter,
+  onAdd,
+  onClose,
+}: LinkModalProps<T>) {
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return items;
+    return items.filter((item) => searchFilter(item, search.trim().toLowerCase()));
+  }, [items, search, searchFilter]);
+
+  const toggle = (id: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
+        <div className="flex items-center justify-between p-4 border-b">
+          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="p-4 border-b">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="検索..."
+              className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+              autoFocus
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2">
+          {filtered.length === 0 ? (
+            <p className="text-gray-500 text-sm text-center py-4">該当する区画がありません</p>
+          ) : (
+            filtered.map((item) => {
+              const isLinked = alreadyLinkedIds.has(item.id);
+              const isSelected = selected.has(item.id);
+              return (
+                <label
+                  key={item.id}
+                  className={`flex items-start gap-3 p-2 rounded cursor-pointer hover:bg-gray-50 ${
+                    isLinked ? 'opacity-50' : ''
+                  }`}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    disabled={isLinked}
+                    onChange={() => toggle(item.id)}
+                    className="mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
+                  />
+                  <div className="flex-1 text-sm">{renderItem(item)}</div>
+                </label>
+              );
+            })
+          )}
+        </div>
+
+        <div className="p-4 border-t flex justify-end">
+          <button
+            onClick={() => {
+              onAdd(Array.from(selected));
+              onClose();
+            }}
+            disabled={selected.size === 0}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+          >
+            選択した区画を追加 ({selected.size}件)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}