From db60a16baf5db791d16dfe188eb46bd059daa288 Mon Sep 17 00:00:00 2001
From: 128Na <simutrans.128na@gmail.com>
Date: Sat, 15 Aug 2026 10:17:16 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Pages=20=E3=83=93=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E8=B2=AC=E5=8B=99=E3=81=94=E3=81=A8=E3=81=AB=E3=83=91?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A3=E3=83=AB=E5=88=86=E5=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resources/views/livewire/pages.blade.php に「フィルタUI」「検索結果一覧」
「ページネーション」の3つの責務が同居しており、ページネーションリンクの
マークアップも2箇所（一覧の上下）に丸ごと重複していた。

- pages-filter.blade.php: キーワード入力・pak/siteチェックボックス・
  検索/リセットボタン
- pages-results.blade.php: 検索結果一覧
- pages-pagination.blade.php: ページネーションリンク（上下で@includeし
  重複を解消）

Livewireのネストコンポーネント化・Islands化も検討したが、
- ネストコンポーネント化: LengthAwarePaginatorをpropとして安全に渡す
  組み込みSynthesizerが無く、シリアライズ周りのリスクが増える割に、
  ページ規模的に恩恵が薄い
- Islands化: このページでは検索条件を変えると結果自体が必ず変わるため
  再描画範囲を絞る効果がほぼ無く、目的に合わない
と判断し、PHPクラス(Pages.php)の状態管理・#[Computed]等は一切変更せず、
Bladeテンプレートの整理のみに留めた。既存のPagesTest 8件を含む全テストが
そのまま通ることを確認済み（$this->pagesが@includeパーシャル内でも
問題なく解決されることも実地確認）。
---
 resources/views/livewire/pages.blade.php      | 49 ++-----------------
 .../livewire/partials/pages-filter.blade.php  | 20 ++++++++
 .../partials/pages-pagination.blade.php       |  3 ++
 .../livewire/partials/pages-results.blade.php | 20 ++++++++
 4 files changed, 47 insertions(+), 45 deletions(-)
 create mode 100644 resources/views/livewire/partials/pages-filter.blade.php
 create mode 100644 resources/views/livewire/partials/pages-pagination.blade.php
 create mode 100644 resources/views/livewire/partials/pages-results.blade.php

diff --git a/resources/views/livewire/pages.blade.php b/resources/views/livewire/pages.blade.php
index 2bc0ac5..0272e8a 100644
--- a/resources/views/livewire/pages.blade.php
+++ b/resources/views/livewire/pages.blade.php
@@ -1,50 +1,9 @@
 <div>
-    <div class="mb-2">
-        @foreach (App\Enums\PakSlug::cases() as $pak)
-        <label class="leading-6 text-gray-900 pr-3 font-medium dark:text-white">
-            <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" wire:model="paks.{{$pak->value}}" />
-            {{__('misc.'.$pak->value)}}</label>
-        @endforeach
+    @include('livewire.partials.pages-filter')
 
-        @foreach (App\Enums\SiteName::cases() as $site)
-        <label class="leading-6 text-gray-900 pr-3 font-medium dark:text-white">
-            <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" wire:model="sites.{{$site->value}}" />{{__('misc.'.$site->value)}}</label>
-        @endforeach
-    </div>
-    <div class="inline-flex rounded-md shadow-sm" role="group">
-        <input type="text" id="keyword" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" placeholder="キーワード" wire:model="keyword" wire:keydown.enter="onConditionUpdate" />
-        <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" wire:click="onConditionUpdate">検索</button>
-        <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" wire:click="clear">リセット</button>
-    </div>
-    @error('keyword')
-        <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
-    @enderror
+    @include('livewire.partials.pages-pagination')
 
-    <div class="my-4">
-        {{ $this->pages->onEachSide(1)->links('tailwind_custom') }}
-    </div>
+    @include('livewire.partials.pages-results')
 
-    <ul>
-        @forelse ($this->pages as $page)
-        <li class="my-2">
-            <div>
-                @foreach ($page->paks as $pak)
-                <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">{{ __('misc.'.$pak->slug->value) }}</span>
-                @endforeach
-
-                <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ __('misc.'.$page->site_name->value) }}</span>
-
-                <a target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" href="{{ $page->url }}">{{ $page->title }}</a>
-
-                <span class="text-xs font-medium text-gray-600 dark:text-gray-300">{{ $page->last_modified->toDateTimeString() }}</span>
-            </div>
-            <div class="text-gray-900 text-sm px-5 py-2.5 dark:text-white">{{ $page->getSummary(300) }}</div>
-        </li>
-        @empty
-        <li class="my-2">該当なし</li>
-        @endforelse
-    </ul>
-    <div class="my-4">
-        {{ $this->pages->onEachSide(1)->links('tailwind_custom') }}
-    </div>
+    @include('livewire.partials.pages-pagination')
 </div>
diff --git a/resources/views/livewire/partials/pages-filter.blade.php b/resources/views/livewire/partials/pages-filter.blade.php
new file mode 100644
index 0000000..891a016
--- /dev/null
+++ b/resources/views/livewire/partials/pages-filter.blade.php
@@ -0,0 +1,20 @@
+<div class="mb-2">
+    @foreach (App\Enums\PakSlug::cases() as $pak)
+    <label class="leading-6 text-gray-900 pr-3 font-medium dark:text-white">
+        <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" wire:model="paks.{{$pak->value}}" />
+        {{__('misc.'.$pak->value)}}</label>
+    @endforeach
+
+    @foreach (App\Enums\SiteName::cases() as $site)
+    <label class="leading-6 text-gray-900 pr-3 font-medium dark:text-white">
+        <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" wire:model="sites.{{$site->value}}" />{{__('misc.'.$site->value)}}</label>
+    @endforeach
+</div>
+<div class="inline-flex rounded-md shadow-sm" role="group">
+    <input type="text" id="keyword" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" placeholder="キーワード" wire:model="keyword" wire:keydown.enter="onConditionUpdate" />
+    <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" wire:click="onConditionUpdate">検索</button>
+    <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700" wire:click="clear">リセット</button>
+</div>
+@error('keyword')
+    <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
+@enderror
diff --git a/resources/views/livewire/partials/pages-pagination.blade.php b/resources/views/livewire/partials/pages-pagination.blade.php
new file mode 100644
index 0000000..e9163be
--- /dev/null
+++ b/resources/views/livewire/partials/pages-pagination.blade.php
@@ -0,0 +1,3 @@
+<div class="my-4">
+    {{ $this->pages->onEachSide(1)->links('tailwind_custom') }}
+</div>
diff --git a/resources/views/livewire/partials/pages-results.blade.php b/resources/views/livewire/partials/pages-results.blade.php
new file mode 100644
index 0000000..25e7f2b
--- /dev/null
+++ b/resources/views/livewire/partials/pages-results.blade.php
@@ -0,0 +1,20 @@
+<ul>
+    @forelse ($this->pages as $page)
+    <li class="my-2">
+        <div>
+            @foreach ($page->paks as $pak)
+            <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">{{ __('misc.'.$pak->slug->value) }}</span>
+            @endforeach
+
+            <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ __('misc.'.$page->site_name->value) }}</span>
+
+            <a target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" href="{{ $page->url }}">{{ $page->title }}</a>
+
+            <span class="text-xs font-medium text-gray-600 dark:text-gray-300">{{ $page->last_modified->toDateTimeString() }}</span>
+        </div>
+        <div class="text-gray-900 text-sm px-5 py-2.5 dark:text-white">{{ $page->getSummary(300) }}</div>
+    </li>
+    @empty
+    <li class="my-2">該当なし</li>
+    @endforelse
+</ul>