【슈퍼 간단】 ransack을 사용하여 검색 기능을 구현합시다!

ransack을 이용하여 검색 기능을 구현합니다.
이번에도 초보자용으로 레시피 투고 앱을 예로 작성하겠습니다.

또, 검색 기능의 실장에 Active Hash의 값도 이용하기 때문에 Active Hash를 모르는 분은 전회 기사로 하고 있으므로, 그쪽을 보실 수 있으면(자) 생각합니다.


완성 이미지



그럼, 구현해 갑시다!

ransack이란?

ransack은 Rails에 대한 검색 기능을 구현하는 Gem. 공식 문서

도입 방법

Gemfile에 아래를 기술하고 bundle install합니다.

Gemfile

gem 'ransack'

터미널

bundle install

데모 데이터를 투입하자!

seed.rb에 데모 데이터 생성하는 기술을 해 나갑니다.
category_id와 time_required_id는 Active Hash의 값과 연결되는 열입니다.

또, time_required_id의 Faker를 모르는 분은 전회 기사로 하고 있으므로, 그쪽을 보실 수 있으면(자) 생각합니다.
【슈퍼 간단】 Faker를 사용하여 더미 데이터를 작성합시다!

db/seed.rb

5.times do |n|
  Recipe.create!(
    title: "すし・魚料理#{n}",
    text: "作り方",
    category_id: 1,
    time_required_id: Faker::Number.within(range: 2..6)
  )
end

#中略

5.times do |n|
  Recipe.create!(
    title: "お菓子・スイーツ#{n}",
    text: "作り方",
    category_id: 10,
    time_required_id: Faker::Number.within(range: 2..6)
  )
end

터미널

rails db:seed

데모 데이터 작성 완료.


간단히 index 페이지에 표시합니다.

검색 기능 구현

라우팅 설정

우선은 검색 페이지(search)의 라우팅과 검색 결과를 표시하는 페이지(result)의 라우팅을 설정합시다.

7개의 액션 이외의 라우팅을 설정하므로, recipes에 중첩시킵니다.
이번에는 URL에 id가 붙지 않기 때문에 collection을 이용합니다.

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
  devise_for :users
  resources :users
  resources :recipes do
    collection do
      get :search
      get :result
    end
  end
end

컨트롤러 편집

이하의 기술은 공식 문서 를 참고로 하고 있습니다.

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController
  before_action :search_recipes, only: [:search, :result]

  def index
    @recipes = Recipe.all
  end

  #中略

  def search
  end

  def result
    @results = @q.result
  end

  private
  def search_recipes
    @q = Recipe.ransack(params[:q])
  end
end

params[:q]의 키 ":q"로 recipes 테이블에서 레시피 정보를 찾아 "@q"에 저장합니다.
이 @q에 대해 ".result"로 설정하여 검색 결과를 얻습니다.

다음에 뷰 파일을 작성해 봅시다.

뷰 만들기

뷰 파일 만들기

터미널

touch app/views/recipes/{search.html.erb,result.html.erb}

뷰 파일 편집

이번에는 CSS의 설명은 생략합니다.

검색 양식에는 search_form_for라는 메소드를 사용합니다.
form_with의 ransack판이라는 이미지입니다.
form_with에서는 "text_field"이지만 search_form_for이면 "search_field"가됩니다.

또, 「:컬럼명_매처」로 하는 것으로 조건에 있던 검색을 실시합니다.
'_cont'라고 하면 '입력된 값이 포함되어 있다'라는 의미가 되고 '_eq'는 '입력된 값과 같다'라는 의미의 매처가 됩니다.
다른 매처에 대해서는 공식 문서을 참조하십시오.

collection_select 메소드에 대해서는 마지막 기사 와 Rails 문서 를 참조해 주세요.

다음과 같이 편집합니다.

app/views/recipes/search.html.erb

<div class="recipe-form">
  <h1 class="text-center">検索する</h1>
  <%= search_form_for @q, url: result_recipes_path do |f| %>
    <div class="form-group">
      <label class="text-secondary">料理名</label><br />
      <%= f.search_field :title_cont, class: "form-control"%>
    </div>
    <div class="form-group">
       <label class="text-secondary">カテゴリー</label><br />
       <%= f.collection_select(:category_id_eq, Category.where.not(id: 0), :id, :name, include_blank: '指定なし') %>
    </div>
    <div class="form-group">
       <label class="text-secondary">所要時間</label><br />
       <%= f.collection_select(:time_required_id_eq, TimeRequired.where.not(id: 0), :id, :name, include_blank: '指定なし') %>
    </div>
    <div class="form-group">
       <label class="text-secondary">フリーワード</label><br />
       <%= f.search_field :text_cont, class: "form-control"%>
    </div>
    <div class="actions">
      <%= f.submit '検索', class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

그럼 보자.


다음으로 검색 결과 페이지를 작성해 봅시다.
다음과 같이 편집합니다.

app/views/recipes/result.html.erb

<div class="recipes-index text-center">
  <h1 class="result-index">検索結果</h1>
  <% if @results.length != 0 %>
    <% @results.each do |recipe| %>
      <div class="recipe">
        <div class="recipe-title">
          <%= recipe.title %>
        </div>
        <div class="recipe-content">
          カテゴリー: <span class="recipe-category"><%= recipe.category.name %></span>
          所要時間: <span class="recipe-time"><%= recipe.time_required.name %></span>
        </div>
      </div>
    <% end %>
  <% else %>
    該当するレシピはありません
  <% end %>
</div>

if문에 해당하는 검색 결과가 없는 경우는 「해당하는 레시피는 없습니다」라고 표시하도록 하고 있습니다.
그럼 실제로 검색해 봅시다.

해당 검색결과가 있는 경우

해당 검색결과가 없는 경우

이상으로 완성입니다.