Laravelで「カナ氏名」で五十音別検索を実装する方法

Life

2025.06.13

Laravelで顧客管理機能などを開発する際、カナ氏名（フリガナ）を「あ行」「か行」などでフィルター検索できる機能を追加する方法について解説します。

実装の概要

「あ行」「か行」などのボタンを表示
クリックされた行に応じて、該当するカナ文字（例：ア〜オ）を検索条件に適用
status（例：有効・無効）との複合検索にも対応可能

1. コントローラーの実装

// app/Http/Controllers/CustomerController.php

public function index(Request $request)
{
    $kanaFilter = $request->input('kana');
    $statusFilter = $request->input('status');

    $query = Customer::query();

    if ($kanaFilter) {
        $kanaList = match ($kanaFilter) {
            'a' => ['ア', 'イ', 'ウ', 'エ', 'オ'],
            'ka' => ['カ', 'キ', 'ク', 'ケ', 'コ'],
            'sa' => ['サ', 'シ', 'ス', 'セ', 'ソ'],
            // 必要に応じて他の行も追加
            default => [],
        };

        $query->where(function ($q) use ($kanaList) {
            foreach ($kanaList as $kana) {
                $q->orWhere('surname_kana', 'LIKE', "$kana%")
                  ->orWhere('name_kana', 'LIKE', "$kana%");
            }
        });
    }

    if ($statusFilter !== null) {
        $query->where('status', $statusFilter);
    }

    $customers = $query->paginate(20);

    return view('customers.index', compact('customers', 'kanaFilter', 'statusFilter'));
}

2. ビューでボタンを表示

<!-- resources/views/customers/index.blade.php -->
<div class="flex space-x-2 mb-4">
    <a href="?kana=a" class="btn">ア行</a>
    <a href="?kana=ka" class="btn">カ行</a>
    <a href="?kana=sa" class="btn">サ行</a>
    <!-- 他の行も必要に応じて -->
</div>

<!-- 顧客一覧表示 -->
<table class="table-auto w-full">
    <!-- 略 -->
</table>

3. CSSの一例（Tailwind使用時）

<style>
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700;
}
</style>

4. statusとの複合検索

検索フォーム内にradioボタンなどでstatusを指定することで、カナ行と併用して条件を組み合わせられます。

<form method="GET" action="{{ route('customers.index') }}">
    <label><input type="radio" name="status" value="1" {{ request('status') == '1' ? 'checked' : '' }}> 有効</label>
    <label><input type="radio" name="status" value="0" {{ request('status') == '0' ? 'checked' : '' }}> 無効</label>
    <button type="submit" class="btn">検索</button>
</form>

まとめ

カナ氏名による「あ行」などのフィルター検索は、ユーザーにとって直感的で便利な検索手段となります。

LaravelとTailwindを活用することで、シンプルかつ高機能なフィルタリングUIを短時間で実装できます。