【初心者向け】Laravelでサクッと検索機能を実装する

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

Laravelのおすすめ教材

関連記事

こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・【未経験向け】独学で実務レベルまでLaravelをマスターするのにおすすめの教材 ・【ジュニアエンジニア向け】Laravelを極めるのにおすすめ[…]

さて、それでは本題に入っていきましょう!

Laravelとは

PHPのフレームワークの中でシェアが1番高いフレームワークです!
Web開発の現場においてLaravelはもはやデファクトと化した印象があります。

自分が過去に経験した現場のバックエンドはLaravelかRailsの2択である事がほとんどでした。
(スタートアップだとGoもあり得る)

LaravelやRailsなどのフレームワークの特徴としてWeb開発に特化している点です!
Webアプリケーションでよく使う機能を備え付けのメソッドを使えばサクッと作れます!
今回解説する「検索機能」なんかがまさにそれです!

その他にもいろいろな機能があるので、ぜひ公式ドキュメントからキャッチアップしてみて下さい!

Laravel is a PHP web application framework with expressive, …

今回取り組むLaravelによる検索機能

Laravelで検索機能を実装します。

以下の動画をご覧いただくと機能のイメージがつかめます。
タイトル・タグ・本文に対して、あいまい検索を行う仕組みです。

Laravelで検索機能を実装していく方法

以下の手順で進めていきます。

  1. inputタグを作る
  2. controllerに検索処理を書く
  3. ページネーションを追加する

① inputタグを作る

まずはformのinputタグを作って見た目の部分を整えます。
今回はbootstrapを使っているので、classが見にくいかもしれません。

 <form class="form-inline my-2 my-lg-0 ml-2">
      <div class="form-group">
      <input type="search" class="form-control mr-sm-2" name="search"  value="{{request('search')}}" placeholder="キーワードを入力" aria-label="検索...">
      </div>
      <input type="submit" value="検索" class="btn btn-info">
  </form>
  • formのaction属性は省略します
  • inputのvalueをvalue=”{{request(‘search’)}}”にする事(入力すると値がURLに反映されます)

    辺りがポイントです!

    ② controllerに検索処理を書く

      $articles = Post::orderBy('created_at', 'asc')->where(function ($query) {
    
                // 検索機能
                if ($search = request('search')) {
                    $query->where('title', 'LIKE', "%{$search}%")->orWhere('tag1','LIKE',"%{$search}%")->orWhere('body','LIKE',"%{$search}%")
                    ;
                }
    
                // 8投稿毎にページ移動
            })->paginate(8);

    検索機能のポイントは以下です!

    • whereでLIKEを使用し、あいまい検索を実現している
    • orWhereを用いて、タイトル、タグ、本文のいずれかにマッチする検索を可能にしている

    このコードによって、検索機能が実装されます。
    まず、クエリビルダによるorderByメソッドで記事の並び順を作成日時の昇順に設定します。

    次に、リクエストから’search’パラメータを取得し、whereメソッドを使ってタイトル、タグ、本文が検索ワードに部分一致する記事を検索します。
    部分一ついにマッチングするため、LIKE演算子が使用されています。

    また、orWhereメソッドによって複数の条件を指定して、検索をより柔軟に行えるようにしています。

    最後に、ページネーション機能を使って、8投稿毎にページ移動するように設定しています。
    こうすることで、検索結果が多くなった場合でも、ページを分割して表示し、ユーザーにとって見やすくなります。

    これらの手法を組み合わせることで、効果的な検索機能を実現できます。
    検索処理をコントローラーに実装することで、アプリケーション全体に検索機能を提供でき、ユーザビリティを向上させることができます。

    ③ページネーションを追加する

    ページネーションはこれですね。
    検索結果や一覧ページを複数のページに分けて表示する機能です!

     

    Laravelに基本的な機能が備わっているので、秒で作れます!!

    まずcontrollerにpaginateを記述します。
    今回は8投稿でページ遷移します。

    $articles = Post::orderBy('created_at', 'asc')->where(function ($query) {
    
                // 検索機能
                if ($search = request('search')) {
                    $query->where('title', 'LIKE', "%{$search}%")->orWhere('tag1','LIKE',"%{$search}%")->orWhere('body','LIKE',"%{$search}%")
                    ;
                }
    
                // 8投稿毎にページ移動
            })->paginate(8);
    

    次にページネーションを設置したい所にこちらを記述します。

      <div class="d-flex justify-content-center ">
            {{ $articles->links() }}
      </div>

    少し見た目を変えたいので、ファイルを変更します。
    コマンドラインで下記を打ちます。

    php artisan vendor:publish --tag=laravel-pagination

    4つほどファイルが生成されます。
    デフォルトではbootstrap-4.blade.phpが使われるようになっていて、そちらを利用すると完成です。

    まとめ

    この記事ではLaravelに備わっている機能を使って検索機能を実装るす方法を解説していきました。

    LaravelにはこのようにWebアプリケーションで頻出する機能をサクッと作れるようなメソッドがたくさんあります。

    公式ドキュメントでぜひ確認してみてください!

    Laravel is a PHP web application framework with expressive, …

    キャリアアップを考えている方におすすめの関連記事

    関連記事

    こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]

    関連記事

    こんにちは、フロントエンドエンジニアのてりーです。 「転職ドラフトはハイスペックなエンジニア向けだけ?」と思っていませんか? 実は、技術力に自信がない、あるいは業界経験が浅いエンジニアこそ、転職ドラフトを使うべきなんです。 そ[…]