3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails 掲示板の検索機能 ransack 解説

Last updated at Posted at 2021-12-16

Rails 掲示板の検索機能の実装 手順 (自分用)

#ransackを導入

Gemfile
gem 'ransack'

・Gemfileにransackを追加しインストール

ターミナル
$ bundle install

#コントローラーの設定

app/controllers/boards_controller.rb
class BoardsController < ApplicationController
  def index
    @q = Board.ransack(params[:q])
    @boards = @q.result(distinct: true).includes(:user).order(created_at: :desc).page(params[:page])
  end

  def new
  end

  def bookmarks
    @q = current_user.bookmark_boards.ransack(params[:q])
    @bookmark_boards = @q.result(distinct: true).includes(:user).order(created_at: :desc).page(params[:page])
  end

・検索フォームを配置するindexアクション(掲示板一覧)とbookmarksアクション(お気に入り一覧)を修正していく。

params[:q]→フォーム(_search_form.html.erb*後で作る)から送られてくるパラメーター。
ransackメソッド→送られてきたパラメーターを元にテーブルからデータを検索するメソッド
@q = Board.ransack(params[:q])→フォームから送られてきたパラメーターを元にboardsテーブルからデータを検索している。
resultメソッド→ransackメソッドで取得したデータをActiveRecord_Relationのオブジェクトに変換するメソッド。
@q.result→検索結果を渡している。
distinct: true→レコードを取得する際に重複を防いでくれる。

#検索フォームの作成

app/views/boards/_search_form.html.erb
<%= search_form_for @q, url: url do |f| %>
  <div class="input-group mb-3">
    <%= f.search_field :title_or_body_cont, class: 'form-control', placeholder: t('defaults.search_word') %>
    <div class="input-group-append">
      <%= f.submit class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>

search_form_forメソッド→ransackで用意されているメソッド(*form_forやform_withのransack版のようなもの)
・引数に「q」を設定。これは、「app/views/boards/bookmarks.html.erb」、「app/views/boards/index.html.erb」のそれぞれで呼び出し時に、boardコントローラーの「bookmarksアクションの@q」,「indexアクションの@q」をそれぞれ代入したいので、使い回しやすくするために「q」とする。
urlには呼び出し先でパスを指定するためにurlにしている。
_contメソッド→ansackで用意されている検索したワードが含まれているレコードを取得するためのメソッド。検索したいカラム_contの形で使う。*title_contとすれば入力されたワードでtitleカラムに対してあいまい検索される。
title_or_body_contでtitleカラムとbodyカラムの両方であいまい検索をかけれる。
placeholderで検索フォームにこんな色を設定する。(灰色にして見やすくする)

<div class='input-group mb-3'>

<div class='input-group-append'> 

・これは、Bootstrapの部分で、検索するスペース(フォーム)の部分と検索ボタンの部分をそれぞれコードで囲っている。

#部分テンプレート「_search_form.html.erb」を呼び出す

app/views/boards/bookmarks.html.erb
<!-- 検索フォーム -->
<%= render 'search_form', url: bookmarks_boards_path, q: @q %>

url: bookmarks_boards_path→「boards#bookmarks」を指定
q: @q→boardコントローラーのbookmarksアクションで作ったオブジェクト「@q」を代入

app/views/boards/index.html.erb
<!-- 検索フォーム -->
<%= render 'search_form', url: boards_path, q: @q %>

url: boards_path→「boards#index」を指定
q: @q→boardコントローラーのindexアクションで作ったオブジェクト「@q」を代入

#参考

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?