実装サマリー

バックエンド（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 などで圃場詳細画面を開いて動作確認できます。

.claude/settings.local.json

@@ -22,7 +22,9 @@
       "Bash(py:*)",
       "Bash(py -3:*)",
       "Bash(/c/Users/akira/Develop/keinasystem_t02/.venv/Scripts/python:*)",
-      "Bash(PYTHONIOENCODING=utf-8 /c/Users/akira/Develop/keinasystem_t02/.venv/Scripts/python:*)"
+      "Bash(PYTHONIOENCODING=utf-8 /c/Users/akira/Develop/keinasystem_t02/.venv/Scripts/python:*)",
+      "Bash(docker compose restart:*)",
+      "Bash(docker compose exec backend python manage.py shell:*)"
     ]
   }
 }

backend/apps/fields/serializers.py

@@ -3,18 +3,28 @@ from .models import Field, OfficialKyosaiField, OfficialChusankanField
 
 
 class OfficialKyosaiFieldSerializer(serializers.ModelSerializer):
+    linked_field_names = serializers.SerializerMethodField()
+
     class Meta:
         model = OfficialKyosaiField
-        fields = ['id', 'k_num', 's_num', 'address', 'kanji_name', 'area']
+        fields = ['id', 'k_num', 's_num', 'address', 'kanji_name', 'area', 'linked_field_names']
+
+    def get_linked_field_names(self, obj):
+        return list(obj.fields.values_list('name', flat=True))
 
 
 class OfficialChusankanFieldSerializer(serializers.ModelSerializer):
+    linked_field_names = serializers.SerializerMethodField()
+
     class Meta:
         model = OfficialChusankanField
         fields = ['id', 'c_id', 'chusankan_flag', 'oaza', 'aza', 'chiban', 'branch_num',
                   'land_type', 'area', 'planting_area', 'original_crop', 'manager', 'owner',
                   'slope', 'base_amount', 'steep_slope_addition', 'smart_agri_addition',
-                  'payment_amount']
+                  'payment_amount', 'linked_field_names']
+
+    def get_linked_field_names(self, obj):
+        return list(obj.fields.values_list('name', flat=True))
 
 
 class FieldSerializer(serializers.ModelSerializer):

backend/apps/fields/urls.py

@@ -6,8 +6,12 @@ router = DefaultRouter()
 router.register(r'', views.FieldViewSet, basename='field')
 
 urlpatterns = [
-    path('', include(router.urls)),
     path('import/kyosai/', views.import_kyosai_master, name='import_kyosai'),
     path('import/yoshida/', views.import_yoshida_fields, name='import_yoshida'),
     path('import/chusankan/', views.import_chusankan_master, name='import_chusankan'),
+    path('<int:field_id>/kyosai-links/', views.add_kyosai_links, name='add_kyosai_links'),
+    path('<int:field_id>/kyosai-links/<int:kyosai_id>/', views.remove_kyosai_link, name='remove_kyosai_link'),
+    path('<int:field_id>/chusankan-links/', views.add_chusankan_links, name='add_chusankan_links'),
+    path('<int:field_id>/chusankan-links/<int:chusankan_id>/', views.remove_chusankan_link, name='remove_chusankan_link'),
+    path('', include(router.urls)),
 ]

backend/apps/fields/views.py

@@ -1,12 +1,14 @@
 import pandas as pd
 from django.db import models as django_models
 from django.http import JsonResponse
+from django.shortcuts import get_object_or_404
 from django.views.decorators.csrf import csrf_exempt
 from django.views.decorators.http import require_http_methods
-from rest_framework import viewsets, permissions, filters
+from rest_framework import viewsets, permissions, filters, status
-from rest_framework.decorators import action
+from rest_framework.decorators import action, api_view, permission_classes as perm_classes
+from rest_framework.response import Response
 from .models import OfficialKyosaiField, OfficialChusankanField, Field
-from .serializers import FieldSerializer
+from .serializers import FieldSerializer, OfficialKyosaiFieldSerializer, OfficialChusankanFieldSerializer
 
 
 class FieldViewSet(viewsets.ModelViewSet):
@@ -21,6 +23,56 @@ class FieldViewSet(viewsets.ModelViewSet):
     ordering_fields = ['group_name', 'display_order', 'id', 'area_tan']
 
 
+class OfficialKyosaiFieldViewSet(viewsets.ReadOnlyModelViewSet):
+    queryset = OfficialKyosaiField.objects.all().order_by('k_num', 's_num')
+    serializer_class = OfficialKyosaiFieldSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+
+class OfficialChusankanFieldViewSet(viewsets.ReadOnlyModelViewSet):
+    queryset = OfficialChusankanField.objects.all().order_by('c_id')
+    serializer_class = OfficialChusankanFieldSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+
+@api_view(['POST'])
+@perm_classes([permissions.IsAuthenticated])
+def add_kyosai_links(request, field_id):
+    field = get_object_or_404(Field, pk=field_id)
+    ids = request.data.get('kyosai_field_ids', [])
+    records = OfficialKyosaiField.objects.filter(id__in=ids)
+    field.kyosai_fields.add(*records)
+    return Response({'added': len(records)})
+
+
+@api_view(['DELETE'])
+@perm_classes([permissions.IsAuthenticated])
+def remove_kyosai_link(request, field_id, kyosai_id):
+    field = get_object_or_404(Field, pk=field_id)
+    kyosai = get_object_or_404(OfficialKyosaiField, pk=kyosai_id)
+    field.kyosai_fields.remove(kyosai)
+    return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+@api_view(['POST'])
+@perm_classes([permissions.IsAuthenticated])
+def add_chusankan_links(request, field_id):
+    field = get_object_or_404(Field, pk=field_id)
+    ids = request.data.get('chusankan_field_ids', [])
+    records = OfficialChusankanField.objects.filter(id__in=ids)
+    field.chusankan_fields.add(*records)
+    return Response({'added': len(records)})
+
+
+@api_view(['DELETE'])
+@perm_classes([permissions.IsAuthenticated])
+def remove_chusankan_link(request, field_id, chusankan_id):
+    field = get_object_or_404(Field, pk=field_id)
+    chusankan = get_object_or_404(OfficialChusankanField, pk=chusankan_id)
+    field.chusankan_fields.remove(chusankan)
+    return Response(status=status.HTTP_204_NO_CONTENT)
+
+
 @csrf_exempt
 @require_http_methods(["POST"])
 def import_kyosai_master(request):

backend/keinasystem/urls.py

@@ -16,11 +16,18 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path, include
+from rest_framework.routers import DefaultRouter
 from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
+from apps.fields.views import OfficialKyosaiFieldViewSet, OfficialChusankanFieldViewSet
+
+master_router = DefaultRouter()
+master_router.register(r'kyosai-fields', OfficialKyosaiFieldViewSet, basename='kyosai-field')
+master_router.register(r'chusankan-fields', OfficialChusankanFieldViewSet, basename='chusankan-field')
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/fields/', include('apps.fields.urls')),
+    path('api/', include(master_router.urls)),
     path('api/plans/', include('apps.plans.urls')),
     path('api/reports/', include('apps.reports.urls')),
     path('api/auth/jwt/create/', TokenObtainPairView.as_view(), name='token_obtain_pair'),

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

@@ -1,12 +1,117 @@
 '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();
@@ -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,6 +319,7 @@ export default function EditFieldPage() {
           )}
 
           <form onSubmit={handleSubmit} className="space-y-4">
+            <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>
@@ -153,10 +332,8 @@ export default function EditFieldPage() {
                   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>
-
               <div>
                 <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
                   住所
@@ -168,11 +345,11 @@ export default function EditFieldPage() {
                   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>
 
-            <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,14 +375,11 @@ 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>
-
               <div>
                 <label htmlFor="owner_name" className="block text-sm font-medium text-gray-700 mb-1">
-                所有者名
+                  所有者
                 </label>
                 <input
                   type="text"
@@ -216,13 +388,11 @@ export default function EditFieldPage() {
                   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"
@@ -231,15 +401,15 @@ export default function EditFieldPage() {
                   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>
 
-            <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>
   );
 }

frontend/src/app/fields/page.tsx

@@ -172,6 +172,12 @@ export default function FieldsPage() {
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                       所有者
                     </th>
+                    <th className="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      共済
+                    </th>
+                    <th className="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      中山間
+                    </th>
                     <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                       操作
                     </th>
@@ -228,6 +234,12 @@ export default function FieldsPage() {
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         {field.owner_name || '-'}
                       </td>
+                      <td className="px-3 py-4 whitespace-nowrap text-center text-sm text-gray-400">
+                        {field.kyosai_fields?.length > 0 ? `${field.kyosai_fields.length}件` : '-'}
+                      </td>
+                      <td className="px-3 py-4 whitespace-nowrap text-center text-sm text-gray-400">
+                        {field.chusankan_fields?.length > 0 ? `${field.chusankan_fields.length}件` : '-'}
+                      </td>
                       <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                         <div className="flex justify-end space-x-2">
                           <button

frontend/src/types/index.ts

@@ -5,6 +5,7 @@ export interface OfficialKyosaiField {
   address: string;
   kanji_name: string;
   area: number;
+  linked_field_names?: string[];
 }
 
 export interface OfficialChusankanField {
@@ -15,6 +16,7 @@ export interface OfficialChusankanField {
   chiban: string;
   area: number;
   payment_amount: number | null;
+  linked_field_names?: string[];
 }
 
 export interface Field {