Ruby on Rails | Ransackで検索機能を実装する - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

Ransackは簡単にセットアップでき、既存のRailsアプリケーションに統合しやすいです。
シンプルな構文を使用して検索フォームを作成し、モデルのクエリを生成できます。
また、Ransackはカスタマイズが容易です。
検索フォームのデザインや検索条件、ソートオプションなどを自由に調整できます。
カスタムの検索ロジックを実装することもできます。

まずはGemFileにgemの記述を追加します。

gem 'ransack', '~> 2.6'

バンドルします。
コマンド
bundle

コントローラーに検索メソッドを追加します。
今回はカテゴリーテーブルに対して検索をかけるよう実装します。

  def search
    @categories = Category.all
    @category = Category.find(params[:category]) if params[:category].present?

    query_condition = []
    query_condition[0] = "reports.active = true"

    if !params[:category].blank?

      query_condition[0] += " AND category_id = ?"
      query_condition.push params[:category]

      @reports = Report
                  .where(query_condition)
                  .order(created_at: :desc)

    else
      @reports = Report.all.order(created_at: :desc)
    
    end

  end

検索結果を表示するページにルートを設定します。
「config/routes.rb」ファイルに記述を追加します。

get '/search', to: 'pages#search'

「app\views\shared」フォルダに「_categories.html.erb」ファイルを新規作成します。

ビューはBootstrap5で記述しています。
新規作成　【app/views/shared/_categories.html.erb】

<div class="card">
  <div class="card-body">

    <% @categories.each do |item| %>
        <%= link_to "#{item.name}", search_path(category: item.id), class: "btn btn-light mb-2" %>
    <% end %>

  </div>
</div>

「app\views\shared」フォルダに「_reports.html.erb」ファイルを新規作成して下さい。

新規作成　【app/views/shared/_reports.html.erb】

<% @reports.each do |report| %>
        <div class="col-md-4">
            <div class="card mb-2">
                <%= link_to report_path(report), data: { turbolinks: false} do %>
                    <%= image_tag report_cover(report), class: "card-img-top imgt2" %>
                <% end %>

                <div class="card-body">
                    <p class="card-text ttl3"><% if @category %><%= @category.name %><% else %><%= report.category.name %><% end %></p>
                    <h5 class="card-title">
                        <%= link_to report.title, report_path(report), class: "btn btn-light fs-5 ttl", data: { turbolinks: false} %>
                    </h5>
                    <p class="card-text" style="text-align: right; font-size: 0.9rem;"><small class="text-body-secondary"><%= l(report.created_at, format: :full_date) %></small></p>
                    <p class="card-text" style="text-align: right;"><small class="text-body-secondary"><%= time_ago_in_words(report.created_at) %></small></p>
                </div>
            </div>
        </div>
<% end %>

「app\views\pages」フォルダに「search.html.erb」ファイルを新規作成します。

新規作成　【app/views/pages/search.html.erb】

<div class="container top13">

    <div class="row mb-4">
        <div class="col">
            <%= render 'shared/categories' %>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        <%= link_to "すべて", search_path, class: "btn btn-dark", style: "margin-right: 2rem;" %>
                        <span class="ttl3 fs-6">都道府県</span>

                        <span class="ttl">
                            <% if @category %>
                                <%= @category.name %>
                            <% else %>
                                <span class="ttl">すべて</span>
                            <% end %>
                        </span>
                    </h5>
                </div>
            </div>        
        </div>
    </div>

    <div class="row">
        <%= render partial: 'shared/reports', object: @reports %>
    </div>

</div>