実装サマリー

バックエンド（3ファイル変更）
ファイル	変更内容
views.py	OfficialKyosaiFieldViewSet、OfficialChusankanFieldViewSet（ReadOnly）、紐づけ追加/解除の4つのAPIビューを追加
urls.py	紐づけ管理用の4パス追加
serializers.py	linked_field_namesフィールドを追加（紐づけ先の圃場名を返す）
keinasystem/urls.py	/api/kyosai-fields/、/api/chusankan-fields/ をルーターに登録
新規API一覧
メソッド	エンドポイント	動作確認
GET	/api/kyosai-fields/	31件返却
GET	/api/chusankan-fields/	71件返却
POST	/api/fields/{id}/kyosai-links/	{"added":1}
DELETE	/api/fields/{id}/kyosai-links/{kyosai_id}/	204
POST	/api/fields/{id}/chusankan-links/	同上
DELETE	/api/fields/{id}/chusankan-links/{chusankan_id}/	同上
フロントエンド（3ファイル変更）
ファイル	変更内容
types/index.ts	linked_field_namesプロパティ追加
fields/[id]/page.tsx	紐づけ管理UI全面実装（+追加ボタン、x解除ボタン、検索付きモーダル、面積参考表示）
fields/page.tsx	「共済」「中山間」紐づけ件数列を追加
http://localhost:3000/fields/4 などで圃場詳細画面を開いて動作確認できます。

frontend/src/app/fields/[id]/page.tsx

@@ -1,22 +1,127 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 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 } from 'lucide-react';
+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 ---
 export default function EditFieldPage() {
   const router = useRouter();
   const params = useParams();
   const fieldId = parseInt(params.id as string);
-  
+
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
   const [notFound, setNotFound] = useState(false);
-  
+
   const [formData, setFormData] = useState({
     name: '',
     address: '',
@@ -28,6 +133,12 @@ export default function EditFieldPage() {
   const [kyosaiFields, setKyosaiFields] = useState<OfficialKyosaiField[]>([]);
   const [chusankanFields, setChusankanFields] = useState<OfficialChusankanField[]>([]);
 
+  // Modal state
+  const [showKyosaiModal, setShowKyosaiModal] = useState(false);
+  const [showChusankanModal, setShowChusankanModal] = useState(false);
+  const [allKyosai, setAllKyosai] = useState<OfficialKyosaiField[]>([]);
+  const [allChusankan, setAllChusankan] = useState<OfficialChusankanField[]>([]);
+
   useEffect(() => {
     fetchField();
   }, [fieldId]);
@@ -87,6 +198,72 @@ export default function EditFieldPage() {
     }
   };
 
+  // --- Kyosai link management ---
+  const openKyosaiModal = async () => {
+    try {
+      const res = await api.get('/kyosai-fields/');
+      setAllKyosai(res.data);
+      setShowKyosaiModal(true);
+    } catch (err) {
+      console.error('Failed to fetch kyosai fields:', err);
+    }
+  };
+
+  const addKyosaiLinks = async (ids: number[]) => {
+    try {
+      await api.post(`/fields/${fieldId}/kyosai-links/`, { kyosai_field_ids: ids });
+      await fetchField();
+    } catch (err) {
+      console.error('Failed to add kyosai links:', err);
+    }
+  };
+
+  const removeKyosaiLink = async (kyosaiId: number) => {
+    if (!confirm('この共済区画の紐づけを解除しますか？')) return;
+    try {
+      await api.delete(`/fields/${fieldId}/kyosai-links/${kyosaiId}/`);
+      await fetchField();
+    } catch (err) {
+      console.error('Failed to remove kyosai link:', err);
+    }
+  };
+
+  // --- Chusankan link management ---
+  const openChusankanModal = async () => {
+    try {
+      const res = await api.get('/chusankan-fields/');
+      setAllChusankan(res.data);
+      setShowChusankanModal(true);
+    } catch (err) {
+      console.error('Failed to fetch chusankan fields:', err);
+    }
+  };
+
+  const addChusankanLinks = async (ids: number[]) => {
+    try {
+      await api.post(`/fields/${fieldId}/chusankan-links/`, { chusankan_field_ids: ids });
+      await fetchField();
+    } catch (err) {
+      console.error('Failed to add chusankan links:', err);
+    }
+  };
+
+  const removeChusankanLink = async (chusankanId: number) => {
+    if (!confirm('この中山間区画の紐づけを解除しますか？')) return;
+    try {
+      await api.delete(`/fields/${fieldId}/chusankan-links/${chusankanId}/`);
+      await fetchField();
+    } catch (err) {
+      console.error('Failed to remove chusankan link:', err);
+    }
+  };
+
+  // --- Computed ---
+  const kyosaiLinkedIds = useMemo(() => new Set(kyosaiFields.map((k) => k.id)), [kyosaiFields]);
+  const chusankanLinkedIds = useMemo(() => new Set(chusankanFields.map((c) => c.id)), [chusankanFields]);
+  const kyosaiTotalArea = kyosaiFields.reduce((sum, k) => sum + k.area, 0);
+  const chusankanTotalArea = chusankanFields.reduce((sum, c) => sum + c.area, 0);
+
   if (loading) {
     return (
       <div className="min-h-screen bg-gray-50">
@@ -120,7 +297,7 @@ export default function EditFieldPage() {
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
-      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-6">
           <button
             onClick={() => router.push('/fields')}
@@ -131,6 +308,7 @@ export default function EditFieldPage() {
           </button>
         </div>
 
+        {/* 基本情報フォーム */}
         <div className="bg-white rounded-lg shadow p-6">
           <h1 className="text-2xl font-bold text-gray-900 mb-6">圃場編集</h1>
 
@@ -141,38 +319,37 @@ export default function EditFieldPage() {
           )}
 
           <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
-                圃場名 <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleChange}
-                required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                placeholder="例：A-1圃場"
-              />
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+                  圃場名 <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                />
+              </div>
+              <div>
+                <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
+                  住所
+                </label>
+                <input
+                  type="text"
+                  id="address"
+                  name="address"
+                  value={formData.address}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                />
+              </div>
             </div>
 
-            <div>
-              <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
-                住所
-              </label>
-              <input
-                type="text"
-                id="address"
-                name="address"
-                value={formData.address}
-                onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                placeholder="例：山形県鶴岡市..."
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
               <div>
                 <label htmlFor="area_tan" className="block text-sm font-medium text-gray-700 mb-1">
                   面積(反)
@@ -185,10 +362,8 @@ export default function EditFieldPage() {
                   value={formData.area_tan}
                   onChange={handleChange}
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                  placeholder="例：1.5"
                 />
               </div>
-
               <div>
                 <label htmlFor="area_m2" className="block text-sm font-medium text-gray-700 mb-1">
                   面積(m2)
@@ -200,46 +375,41 @@ export default function EditFieldPage() {
                   value={formData.area_m2}
                   onChange={handleChange}
                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                  placeholder="例：1500"
+                />
+              </div>
+              <div>
+                <label htmlFor="owner_name" className="block text-sm font-medium text-gray-700 mb-1">
+                  所有者
+                </label>
+                <input
+                  type="text"
+                  id="owner_name"
+                  name="owner_name"
+                  value={formData.owner_name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                />
+              </div>
+              <div>
+                <label htmlFor="group_name" className="block text-sm font-medium text-gray-700 mb-1">
+                  グループ
+                </label>
+                <input
+                  type="text"
+                  id="group_name"
+                  name="group_name"
+                  value={formData.group_name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                 />
               </div>
             </div>
 
-            <div>
-              <label htmlFor="owner_name" className="block text-sm font-medium text-gray-700 mb-1">
-                所有者名
-              </label>
-              <input
-                type="text"
-                id="owner_name"
-                name="owner_name"
-                value={formData.owner_name}
-                onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                placeholder="例：山田太郎"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="group_name" className="block text-sm font-medium text-gray-700 mb-1">
-                グループ名
-              </label>
-              <input
-                type="text"
-                id="group_name"
-                name="group_name"
-                value={formData.group_name}
-                onChange={handleChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                placeholder="例：Aエリア"
-              />
-            </div>
-
-            <div className="pt-4">
+            <div className="pt-2">
               <button
                 type="submit"
                 disabled={saving}
-                className="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                className="flex items-center justify-center px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
                 {saving ? (
                   <>
@@ -259,7 +429,21 @@ export default function EditFieldPage() {
 
         {/* 共済情報 */}
         <div className="bg-white rounded-lg shadow p-6 mt-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">共済情報</h2>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-bold text-gray-900">
+              共済情報
+              <span className="ml-2 text-sm font-normal text-gray-400">
+                ({kyosaiFields.length}件 / 計{kyosaiTotalArea.toLocaleString()}m2)
+              </span>
+            </h2>
+            <button
+              onClick={openKyosaiModal}
+              className="flex items-center text-sm text-green-600 hover:text-green-700"
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              追加
+            </button>
+          </div>
           {kyosaiFields.length === 0 ? (
             <p className="text-gray-500 text-sm">紐づけられた共済区画はありません</p>
           ) : (
@@ -271,6 +455,7 @@ export default function EditFieldPage() {
                     <th className="text-left py-2 px-3 font-medium text-gray-600">漢字地名</th>
                     <th className="text-left py-2 px-3 font-medium text-gray-600">住所</th>
                     <th className="text-right py-2 px-3 font-medium text-gray-600">面積(m2)</th>
+                    <th className="w-10"></th>
                   </tr>
                 </thead>
                 <tbody>
@@ -280,6 +465,15 @@ export default function EditFieldPage() {
                       <td className="py-2 px-3">{k.kanji_name}</td>
                       <td className="py-2 px-3">{k.address}</td>
                       <td className="py-2 px-3 text-right">{k.area.toLocaleString()}</td>
+                      <td className="py-2 px-1">
+                        <button
+                          onClick={() => removeKyosaiLink(k.id)}
+                          className="text-red-400 hover:text-red-600 p-1"
+                          title="紐づけ解除"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -290,7 +484,21 @@ export default function EditFieldPage() {
 
         {/* 中山間情報 */}
         <div className="bg-white rounded-lg shadow p-6 mt-6">
-          <h2 className="text-lg font-bold text-gray-900 mb-4">中山間情報</h2>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-bold text-gray-900">
+              中山間情報
+              <span className="ml-2 text-sm font-normal text-gray-400">
+                ({chusankanFields.length}件 / 計{chusankanTotalArea.toLocaleString()}m2)
+              </span>
+            </h2>
+            <button
+              onClick={openChusankanModal}
+              className="flex items-center text-sm text-green-600 hover:text-green-700"
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              追加
+            </button>
+          </div>
           {chusankanFields.length === 0 ? (
             <p className="text-gray-500 text-sm">紐づけられた中山間区画はありません</p>
           ) : (
@@ -302,6 +510,7 @@ export default function EditFieldPage() {
                     <th className="text-left py-2 px-3 font-medium text-gray-600">所在地</th>
                     <th className="text-right py-2 px-3 font-medium text-gray-600">面積(m2)</th>
                     <th className="text-right py-2 px-3 font-medium text-gray-600">支払金額</th>
+                    <th className="w-10"></th>
                   </tr>
                 </thead>
                 <tbody>
@@ -311,6 +520,15 @@ export default function EditFieldPage() {
                       <td className="py-2 px-3">{c.oaza} {c.aza} {c.chiban}</td>
                       <td className="py-2 px-3 text-right">{c.area.toLocaleString()}</td>
                       <td className="py-2 px-3 text-right">{c.payment_amount != null ? `¥${c.payment_amount.toLocaleString()}` : '-'}</td>
+                      <td className="py-2 px-1">
+                        <button
+                          onClick={() => removeChusankanLink(c.id)}
+                          className="text-red-400 hover:text-red-600 p-1"
+                          title="紐づけ解除"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -319,6 +537,63 @@ export default function EditFieldPage() {
           )}
         </div>
       </div>
+
+      {/* Kyosai Link Modal */}
+      {showKyosaiModal && (
+        <LinkModal
+          title="共済区画を追加"
+          items={allKyosai}
+          alreadyLinkedIds={kyosaiLinkedIds}
+          renderItem={(k) => (
+            <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, q) =>
+            k.kanji_name.toLowerCase().includes(q) ||
+            k.address.toLowerCase().includes(q) ||
+            k.k_num.includes(q)
+          }
+          onAdd={addKyosaiLinks}
+          onClose={() => setShowKyosaiModal(false)}
+        />
+      )}
+
+      {/* Chusankan Link Modal */}
+      {showChusankanModal && (
+        <LinkModal
+          title="中山間区画を追加"
+          items={allChusankan}
+          alreadyLinkedIds={chusankanLinkedIds}
+          renderItem={(c) => (
+            <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, q) =>
+            c.c_id.includes(q) ||
+            c.oaza.toLowerCase().includes(q) ||
+            c.aza.toLowerCase().includes(q) ||
+            c.chiban.includes(q)
+          }
+          onAdd={addChusankanLinks}
+          onClose={() => setShowChusankanModal(false)}
+        />
+      )}
     </div>
   );
 }