【第四弾】Laravel入門資料

検索・フィルタリング - ユーザーが欲しいデータを見つける

商品が増えてくると、ユーザーが欲しい商品を見つけにくくなります。
検索機能とフィルタリング機能を実装して、データを絞り込む方法を学びます。

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Product;

class ProductSeeder extends Seeder
{
    public function run(): void
    {
        $products = [
            ['name' => 'ノートPC', 'category_id' => 1, 'price' => 89800, 'stock' => 15, 'is_published' => true, 'description' => '高性能ノートパソコン'],
            ['name' => 'デスクトップPC', 'category_id' => 1, 'price' => 120000, 'stock' => 8, 'is_published' => true, 'description' => 'ゲーミングPC'],
            ['name' => 'マウス', 'category_id' => 1, 'price' => 2980, 'stock' => 50, 'is_published' => true, 'description' => 'ワイヤレスマウス'],
            ['name' => 'キーボード', 'category_id' => 1, 'price' => 8900, 'stock' => 30, 'is_published' => true, 'description' => 'メカニカルキーボード'],
            ['name' => 'モニター', 'category_id' => 1, 'price' => 34800, 'stock' => 12, 'is_published' => true, 'description' => '27インチ4Kモニター'],
            ['name' => 'Tシャツ', 'category_id' => 2, 'price' => 2900, 'stock' => 100, 'is_published' => true, 'description' => 'コットン100%'],
            ['name' => 'ジーンズ', 'category_id' => 2, 'price' => 5980, 'stock' => 45, 'is_published' => true, 'description' => 'デニムパンツ'],
            ['name' => 'スニーカー', 'category_id' => 2, 'price' => 7800, 'stock' => 20, 'is_published' => true, 'description' => 'ランニングシューズ'],
            ['name' => '大学ノート', 'category_id' => 3, 'price' => 180, 'stock' => 200, 'is_published' => true, 'description' => 'B5サイズ'],
            ['name' => 'ボールペン', 'category_id' => 3, 'price' => 120, 'stock' => 300, 'is_published' => true, 'description' => '黒・赤・青'],
            ['name' => 'クリアファイル', 'category_id' => 3, 'price' => 100, 'stock' => 150, 'is_published' => true, 'description' => 'A4サイズ'],
            ['name' => 'マグカップ', 'category_id' => 4, 'price' => 1200, 'stock' => 80, 'is_published' => true, 'description' => '陶器製'],
            ['name' => 'スマートウォッチ', 'category_id' => 1, 'price' => 45000, 'stock' => 0, 'is_published' => false, 'description' => '在庫切れ・非公開テスト用'],
        ];

        foreach ($products as $product) {
            Product::create($product);
        }
    }
}

# データベースをリセットして再シード
php artisan migrate:fresh --seed

# または ProductSeeder のみ実行
php artisan db:seed --class=ProductSeeder

検索・フィルタリング機能の例

GETリクエストとクエリパラメータ

検索機能ではGETリクエストを使い、検索条件をクエリパラメータ（URLパラメータ）で渡します。

クエリパラメータの取得方法

// コントローラーでの取得方法
$keyword = $request->input('keyword');
$categoryId = $request->input('category_id');

// デフォルト値を指定することも可能
$keyword = $request->input('keyword', '');  // デフォルトは空文字

LIKE検索を理解する

部分一致検索を実装する前に、LIKE検索について詳しく学びましょう。

Tinkerで試してみよう

php artisan tinker

1. 部分一致検索（前後に%）

// 「ノート」を含む商品を検索
Product::where('name', 'like', '%ノート%')->get();

// 実行されるSQL: SELECT * FROM products WHERE name LIKE '%ノート%'
// ヒットする例: 「ノートPC」「大学ノート」「ノート型パソコン」

2. 前方一致検索（後ろに%）

// 「ノート」で始まる商品を検索
Product::where('name', 'like', 'ノート%')->get();

// ヒットする例: 「ノートPC」「ノート型パソコン」
// ヒットしない例: 「大学ノート」（ノートが先頭にない）

3. 後方一致検索（前に%）

// 「ノート」で終わる商品を検索
Product::where('name', 'like', '%ノート')->get();

// ヒットする例: 「大学ノート」「方眼ノート」
// ヒットしない例: 「ノートPC」（ノートが末尾にない）

4. 完全一致検索（%なし）

// 「ノート」と完全一致する商品を検索
Product::where('name', 'like', 'ノート')->get();

// これは where('name', '=', 'ノート') と同じ
// ヒットする例: 「ノート」のみ

基本的なキーワード検索の実装

それでは、学んだLIKE検索を使って商品検索機能を実装します。

ステップ1: ルーティングの設定

routes/web.php

use App\Http\Controllers\SearchController;

Route::get('/search', [SearchController::class, 'index']);

ステップ2: コントローラーの作成

検索機能を持つコントローラーを作成します。

php artisan make:controller SearchController

app/Http/Controllers/SearchController.php を以下のように編集します。

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class SearchController extends Controller
{
    public function index(Request $request)
    {
        // リクエストからキーワードを取得
        $keyword = $request->input('keyword');

        // 検索クエリを構築
        $query = Product::with('category');

        // キーワードがある場合のみ検索条件を追加
        if ($keyword) {
            $query->where('name', 'like', "%{$keyword}%");
        }

        // ページネーション付きで取得
        $products = $query->paginate(10);

        return view('search.index', compact('products', 'keyword'));
    }
}

ステップ3: ビューファイルの作成

resources/views/search/index.blade.php を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品検索</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .search-form { margin-bottom: 20px; }
        .search-form input { padding: 8px; width: 300px; }
        .search-form button { padding: 8px 16px; background: #4CAF50; color: white; border: none; cursor: pointer; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; text-left; }
        th { background-color: #4CAF50; color: white; }
    </style>
</head>
<body>
    <h1>商品検索</h1>

    {{-- 検索フォーム --}}
    <form method="GET" action="/search" class="search-form">
        <input type="text" name="keyword" placeholder="商品名で検索" value="{{ $keyword }}">
        <button type="submit">検索</button>
    </form>

    <p>検索結果: {{ $products->total() }}件</p>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名</th>
                <th>カテゴリー</th>
                <th>価格</th>
                <th>在庫</th>
            </tr>
        </thead>
        <tbody>
            @forelse($products as $product)
            <tr>
                <td>{{ $product->id }}</td>
                <td>{{ $product->name }}</td>
                <td>{{ $product->category->name }}</td>
                <td>¥{{ number_format($product->price) }}</td>
                <td>{{ $product->stock }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="5" style="text-align: center;">該当する商品が見つかりませんでした</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    {{-- ページネーションリンク（検索条件を保持） --}}
    {{ $products->appends(['keyword' => $keyword])->links() }}
</body>
</html>

value属性で検索値を保持する仕組み

value="{{ $keyword }}" がないと、検索後にフォームが空になってしまいます。

❌ value属性がない場合

<input type="text" name="keyword" placeholder="商品名で検索">

→ 検索後、フォームが空になってしまう
→ 「何で検索したんだっけ？」となる（ユーザー体験が悪い）

✅ value属性がある場合

<input type="text" name="keyword" placeholder="商品名で検索" value="{{ $keyword }}">

→ 検索後、フォームに「ノート」が残る
→ 検索条件を確認・修正しやすい（ユーザー体験が良い）

ステップ4: 確認

ブラウザで /search にアクセスして確認します。

検索フォームでキーワードを入力して検索してみましょう。

✅ 基本的なキーワード検索機能が完成しました！

カテゴリーフィルタリングの追加

キーワード検索に加えて、カテゴリーでフィルタリングできるようにします。

コントローラーの更新

app/Http/Controllers/SearchController.php

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use App\Models\Category;
use Illuminate\Http\Request;

class SearchController extends Controller
{
    public function index(Request $request)
    {
        // リクエストから検索条件を取得
        $keyword = $request->input('keyword');
        $categoryId = $request->input('category_id');

        // 検索クエリを構築
        $query = Product::with('category');

        // キーワード検索
        if ($keyword) {
            $query->where('name', 'like', "%{$keyword}%");
        }

        // カテゴリーフィルター
        if ($categoryId) {
            $query->where('category_id', $categoryId);
        }

        // ページネーション付きで取得
        $products = $query->paginate(10);

        // カテゴリー一覧を取得（プルダウン用）
        $categories = Category::all();

        return view('search.index', compact('products', 'keyword', 'categoryId', 'categories'));
    }
}

ビューの更新

検索フォームにカテゴリープルダウンを追加します。

{{-- 検索フォーム --}}
<form method="GET" action="/search" class="search-form">
    <input type="text" name="keyword" placeholder="商品名で検索" value="{{ $keyword }}">

    <select name="category_id">
        <option value="">すべてのカテゴリー</option>
        @foreach($categories as $category)
            <option value="{{ $category->id }}" {{ $categoryId == $category->id ? 'selected' : '' }}>
                {{ $category->name }}
            </option>
        @endforeach
    </select>

    <button type="submit">検索</button>
</form>

{{-- ページネーションリンク（検索条件を保持） --}}
{{ $products->appends(['keyword' => $keyword, 'category_id' => $categoryId])->links() }}

ページネーション表示のカスタマイズ

Laravel 12のlinks()は、デフォルトで英語の翻訳とTailwind CSSのスタイルを使用します。
日本語表示を自然にするには、翻訳ファイルとビューファイルのカスタマイズが必要です。

解決策1: ページネーションビューのカスタマイズ（推奨）

ページネーションビューを公開して、日本語の文章構造に合わせて編集します。

# ページネーションビューを公開
php artisan vendor:publish --tag=laravel-pagination

公開先: resources/views/vendor/pagination/tailwind.blade.php

編集箇所: 26行目付近の表示テキスト部分

{{-- 変更前 --}}
<p class="text-sm text-gray-700 leading-5 dark:text-gray-400">
    {!! __('Showing') !!}
    @if ($paginator->firstItem())
        <span class="font-medium">{{ $paginator->firstItem() }}</span>
        {!! __('to') !!}
        <span class="font-medium">{{ $paginator->lastItem() }}</span>
    @else
        {{ $paginator->count() }}
    @endif
    {!! __('of') !!}
    <span class="font-medium">{{ $paginator->total() }}</span>
    {!! __('results') !!}
</p>

{{-- 変更後（自然な日本語） --}}
<p class="text-sm text-gray-700 leading-5 dark:text-gray-400">
    全 <span class="font-medium">{{ $paginator->total() }}</span> 件中
    @if ($paginator->firstItem())
        <span class="font-medium">{{ $paginator->firstItem() }}</span> 〜
        <span class="font-medium">{{ $paginator->lastItem() }}</span> 件を表示
    @else
        {{ $paginator->count() }} 件を表示
    @endif
</p>

解決策2: 翻訳ファイルの編集（簡易的）

lang/ja.jsonを編集して翻訳を調整します（完全には自然な日本語にならない）。

{
    "Showing": "表示中",
    "to": "〜",
    "of": "件中",
    "results": "件"
}

→ 「表示中 1 〜 10 件中 13 件」となり、やや改善されますが完璧ではありません。

links()の仕組み - どうやってHTMLが生成されるのか

{{ $products->links() }} と書くだけでページネーションが表示される裏側の仕組みを理解しましょう。

$paginator->total()       // 総件数: 13
$paginator->firstItem()   // 現在ページの最初の番号: 1
$paginator->lastItem()    // 現在ページの最後の番号: 10
$paginator->currentPage() // 現在のページ番号: 1
$paginator->hasPages()    // ページが複数あるか: true/false
$paginator->hasMorePages() // 次のページがあるか: true/false

他のページネーションビューを使う

Tailwind以外のスタイルも選択できます。

// デフォルト（Tailwind CSS）
{{ $products->links() }}

// Bootstrap 5
{{ $products->links('pagination::bootstrap-5') }}

// シンプル版（前へ・次へのみ）
{{ $products->links('pagination::simple-tailwind') }}

appends()でページネーションに検索条件を追加

ページネーションのリンクをクリックした時、検索条件が消えてしまう問題を解決します。

❌ appends()なしの場合

{{ $products->links() }}

→ ページネーションのURLが /search?page=2 になる
→ 検索条件（keyword, category_id）が消える

✅ appends()ありの場合

{{ $products->appends(['keyword' => $keyword, 'category_id' => $categoryId])->links() }}

→ ページネーションのURLが /search?keyword=ノート&category_id=1&page=2 になる
→ 検索条件が保持される ✅

// 生成されるページネーションリンク
1ページ目: /search?keyword=ノート&category_id=1&page=1
2ページ目: /search?keyword=ノート&category_id=1&page=2
3ページ目: /search?keyword=ノート&category_id=1&page=3

✅ カテゴリーフィルタリング機能が追加できました!

when()メソッドでコードをスッキリさせる

if 文で条件分岐する代わりに、when() メソッドを使うとコードがスッキリします。

SELECT
  CASE
    WHEN price < 1000 THEN '安い'
    WHEN price < 5000 THEN '普通'
    ELSE '高い'
  END
FROM products

Product::when($keyword,
  function ($q, $keyword) {
    return $q->where(
      'name', 'like',
      "%{$keyword}%"
    );
  }
)->get()

Tinkerでwhen()を理解する

php artisan tinker

1. 基本的な使い方

// 条件がtrueの時だけクエリを追加
$keyword = 'ノート';
Product::when($keyword, function ($query, $keyword) {
    return $query->where('name', 'like', "%{$keyword}%");
})->get();

// $keywordが存在する → where条件が追加される
// 実行されるSQL: SELECT * FROM products WHERE name LIKE '%ノート%'

2. 条件がfalseの場合

// 条件がnullや空文字の場合、when内は実行されない
$keyword = null;  // または ''
Product::when($keyword, function ($query, $keyword) {
    return $query->where('name', 'like', "%{$keyword}%");
})->get();

// $keywordがnull → when内は実行されない
// 実行されるSQL: SELECT * FROM products  （条件なし）

3. 複数のwhenを繋げる

$keyword = 'ノート';
$categoryId = 1;

Product::when($keyword, function ($query, $keyword) {
        return $query->where('name', 'like', "%{$keyword}%");
    })
    ->when($categoryId, function ($query, $categoryId) {
        return $query->where('category_id', $categoryId);
    })
    ->get();

// 実行されるSQL:
// SELECT * FROM products
// WHERE name LIKE '%ノート%' AND category_id = 1

4. if文との比較

// ❌ if文を使った場合（冗長）
$query = Product::query();

if ($keyword) {
    $query->where('name', 'like', "%{$keyword}%");
}

if ($categoryId) {
    $query->where('category_id', $categoryId);
}

$products = $query->get();

// ✅ when()を使った場合（スッキリ）
$products = Product::when($keyword, function ($query, $keyword) {
        return $query->where('name', 'like', "%{$keyword}%");
    })
    ->when($categoryId, function ($query, $categoryId) {
        return $query->where('category_id', $categoryId);
    })
    ->get();

コントローラーでの実装例

public function index(Request $request)
{
    $keyword = $request->input('keyword');
    $categoryId = $request->input('category_id');

    // when()メソッドで条件付きクエリを構築
    $products = Product::with('category')
        ->when($keyword, function ($query, $keyword) {
            return $query->where('name', 'like', "%{$keyword}%");
        })
        ->when($categoryId, function ($query, $categoryId) {
            return $query->where('category_id', $categoryId);
        })
        ->paginate(10);

    $categories = Category::all();

    return view('search.index', compact('products', 'keyword', 'categoryId', 'categories'));
}

✅ より洗練されたコードになりました!

まとめ

検索・フィルタリング機能の実装を学びました！

学んだこと

次のステップ

検索・フィルタリング機能を習得しました。
次は「ソフトデリート」タブで、データを論理削除する方法を学習しましょう！

✅ 検索・フィルタリング学習完了です!