【Rails】プルダウン検索編 ransackを導入して検索機能を作成する

はじめに

保存したデータを項目事に分けて表示することで、欲しいデータのみ手に入れたい。
そんな時はransackです。

目次

1. ランサック導入
2. ルーティング設定
3. モデル
4. コントローラー
5. ビュー
6. 重複の解消
7. 検索結果ページを作る

開発環境

ruby 2.6.5
Rails 6.0.3.4
ransack 2.3.2

1. ランサック導入

Ginfile

gem 'ransack'

ターミナル

bundle install

2. ルーティング設定

今回はdemosコントローラーを使用し、アクション名はsearchするので、get 'demos/search'を記述します。

routes.rb

  root to: demos#index'
  resources :demos
  get 'demos/search' #ここransakuのルーティング

3. モデル

今回はdemoモデルとします。マイグレーションファイルを編集します。

db/2020XXXXXXXXX_create_demos.rb

class CreateDemos < ActiveRecord::Migration[6.0]
  def change
    create_table :demos do |t|
      t.string     :sample_name
      t.string     :sample_kana
      t.string     :sample_email
      t.string     :sample_tel
      t.string     :sample_product_name
      t.string     :price
      t.integer    :num_id
      t.datetime   :start_time
      t.integer    :sample_id,             null: false

      t.timestamps
    end
  end
end

今回は上記の項目を保存します。

ターミナル

rails db:migrate

サンプルデータは自分で作成するか、「seed」を使います。
seedの使い方は下記の記事を参考にしてみてください。

【Rails】seedとFakerでランダムなサンプルデータを作成
https://qiita.com/AKI3/items/189574314ca94e8f43c6

4. コントローラー

今回コントローラーはdemosという名前です。

app/controlers/demos_controller.rb

class DemosController < ApplicationController
  before_action :search_demo, only: [:index, :search]

  def index
    @demos = Demo.all
  end

  def search
    @results = @d.result
  end

  private

  def search_demo
    @d = Demo.ransack(params[:q])  # 検索オブジェクトを生成
  end
end

検索パラメーターのキーを「:q」とします。この「:q」とは「query（質問する）」のイニシャルのことです。

次に、:qを使って、demosテーブルから商品情報を探しています。そして、「@d」という名前の検索オブジェクトを生成しています。
この処理を行うメソッド名を「search_demo」としています。

最後にこの@dに対して「.result」とすることで、検索結果を取得しています。
これは、検索条件に該当した商品が@dに格納されているので、その格納されている値を表示する役割があります。

5. ビュー

ビューに検索するバーを作成します。

app/views/demos/index.html.erb

    <div class="search-data">
      <h3>商品検索</h3>
      <%= search_form_for @d, url: demos_search_path do |f| %>
        <%= f.label :sample_product_name_eq, '商品検索' %>
        <%= f.collection_select :sample_product_name_eq, @demo, :sample_product_name, :sample_product_name,  include_blank: '指定なし' %>
        <%= f.submit '検索' %>
      <% end %>
    </div>

まず、search_form_forの引数に「@d」を渡すことで検索フォームを生成します。
「_eq」は条件検索を行うための記述です。
続いて、<%= f.collection_select 第一引数, 第二引数, 第三引数, 第四引数, 第五引数, オプション %>の順で並んでいます。

できたらリロードしてプルダウンを確認します。

ここを自分の言葉に編集

1	2	3
第一引数（メソッド名）	:name_eq	・カラム名・name属性やid属性を決める
第二引数（オブジェクト）	@demo	配列データを指定する
第三引数（value）	name	表示する際に参照するDBのカラム名
第四引数（name）	name	実際に表示されるカラム名
オプション	include_blank	何も選択していない時に表示される内容

6. 重複の解消

このままだとこのように商品名が重複しています。
これを解消する為にコントローラーに以下を追記します。

app/controlers/demos_controller.rb

#省略
  def index
    @demos = Demo.all
    set_demo_column #←追記
  end

#省略
private
  def set_demo_column
    @demo_date = Demo.select("sample_product_name").distinct  # 重複なくnameカラムのデータを取り出す
  end

html.erbも@demo_dateに変更します。

app/views/demos/index.html.erb

<%= f.collection_select :start_time_eq, @demo_date, :start_time, :start_time,  include_blank: '指定なし' %>

7. 検索結果ページを作る

最後に検索ページを作成します。

app/views/demos/search.html.erb

<h1>検索結果</h1>
<% if @results.length !=0 %>
  <% @results.each do |result| %>
    <td>
    <br>
    <li>
      <%= result.sample_name %>
      <%= result.sample_kana %>
      <%= result.sample_email %>
      <%= result.sample_tel %>
      <%= result.sample_product_name %>
      <%= result.price %>
      <%= result.num_id %>
      <%= result.start_time %>
      <%= result.created_at %>
    </li>
  <% end %>
<% else %>
  該当する商品はありません
<% end %>
<br>
<%= link_to 'トップページへ戻る', root_path %>

表示されれば完成です！

まとめ

本記事では、RANSACKを導入してプルダウン検索機能を作成する方法を紹介しました。
今後別の検索機能も実装していきます。

最後に

同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
それでは、また次回お会いしましょう〜

参考

【公式】
https://github.com/activerecord-hackery/ransack