Rails 5.1とBootstrapで作るシンプルな検索機能のテンプレ


Rails 5.1とTwitter Bootstrapをつかったアプリケーションに検索機能をつけました。個人的忘備録で、手順のメモを書いておきます。


🏀 ControllerにSearchアクションを追加

Controller側にsearch用のアクションを追加します。

class ArticlesController < ApplicationController
def search
@articles = Article.search(params[:qkeyword])
end
end

🍣 Modelにsearchメソッドを追加

Modelにsearchメソッドを追加します。今回はtitlecontentをLIKEで検索する例です。

class Article < ApplicationRecord
scope :search, (->(word) { where('title LIKE ? OR content LIKE ?',
"%#{sanitize_sql_like(word)}%",
"%#{sanitize_sql_like(word)}%") })
end

🚕 Viewに検索フォームを追加

ERBを使っている場合はこちら。

<% form_tag search_articles_path, method: :get do %>
<%= text_field_tag :search, params[:keyword] %>
<%= submit_tag '検索' %>
<% end %>

HAMLを使っている場合はこちら。

= form_tag search_articles_path, method: :get do
= text_field_tag :search, params[:keyword]
= submit_tag "検索"

🐡 config/routes.rbにSearchを追加

Rails.application.routes.draw do
resources :articles do
collection do
get 'search' => 'articles#search'
end
end
end

コーディングは以上です。結果はこんな感じになると思います。

どうぶつの森 QRコードまとめ 検索ボックス

😎 補足:Elasticsearch

このサンプルは簡易的に検索機能を実装したいときに有効ですが、サービスで本格的に提供する場合はElasticsearchを使うのが一般的です。

Elasticsearchを使ったRailsサンプルアプリケーションの作成

🗽 参考リンク

📚 おすすめの書籍