More than 3 years have passed since last update.

7つのアクションのみのインクリメンタルサーチ

Rails

Posted at 2020-03-22

##インクリメンタルサーチと7つのアクションのみのインクリメンタルサーチとの相違点
主に編集するファイル場所の違いと、それによるリクエストパスの違いになります。
1.検索に使用するコントローラーとビューの「名前」「場所」が異なる
2.構造が異なるため、ルーティングも異なる
3.ルーティングが異なるため、検索のリクエストパスが異なる
などの違いがあります。
##コントローラーとビューの「名前」「場所」が異なる
7つのアクションのみで検索機能を実装した場合、searches_controller.rbの作成にnamespaceを利用します。
そのため、コントローラーが格納されているディレクトリの構造が変わります。
app/controllers/tweets/searches_controller.rb
加えて、作成したsearches_controller.rbのindexアクションに対応するビューは、
app/views/tweets/searches/にindex.html.erbとして格納されます。
これらの「namespaceを利用したことによる構造と名前の違い」があります。
##検索のリクエストパスが異なる
ルーティングが変更されるため、検索機能を呼び出すリクエストを送信する処理を記述するJSファイルで、指定するリクエストパスを変更します。
##jQueryの導入
jQueryにgem 'jquery-rails'が導入されていなければ導入します。
【例】

gem 'jquery-rails'

ターミナル

bundle install

【例】

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery  #追加
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree

textカラムにインデックスを設定します。
ターミナル

$ rails g migration AddIndexToTweets

db/migrate/20XXXXXXXXXXXX_add_index_to_tweets.rb

class AddIndexToTweets < ActiveRecord::Migration
  def change
    add_index :tweets, :text, length: 32
  end
end

ターミナル

$ rails db:migrate

##ルーティングなどAPI側の準備
アクションの中でHTMLとJSONなどのフォーマット毎に条件分岐するため、respond_toを使用します。
【例】

app/controllers/tweets/searches_controller.rb

class Tweets::SearchesController < ApplicationController
  def index
    @tweets = Tweet.search(params[:keyword])
    respond_to do |format|
      format.html
      format.json
    end
  end
end

app/views/tweets/searches/のディレクトリにindex.json.jbuilderファイルを作成します。

app/views/tweets/searches/index.json.jbuilder

json.array! @tweets do |tweet|
  json.id tweet.id
  json.text tweet.text
  json.image tweet.image
  json.user_id tweet.user_id
  json.nickname tweet.user.nickname
  json.user_sign_in current_user
end

テキストフィールドの作成

【例】

index.html.erb

<%= form_with(url: search_tweets_path, local: true, method: :get, class: "xxxx") do |form| %>
  <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "yyyy" %>
  <%= form.submit "検索", class: "zzzz" %>
<% end %>
<div class="aaaa">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet } %>
  <% end %>
  <%= paginate(@tweets) %>
</div>

##テキストフィールドが入力されるたびにイベントが発火させる
app/assets/javascripts/のディレクトリにsearch.jsファイルを作成します。