文系エンジニア大学生の技術ブログ

社会が多様化していく中、大学生の学生生活も多様であるべきと考えています。主にエンジニア向けにITやプログラミングなどの技術系と大学生向けに休学、留学、海外生活、トビタテ留学、長期インターンに関する記事を書いています。

【rails入門】検索フォームを簡単に実装する方法

f:id:daikiyano:20190206160323p:plain

今回、ruby on rails入門編として検索フォームを実装する方法をご紹介します。

form_forとform_tagの違いについて

rails初心者ならform_forとform_tagの何が違うのか疑問を感じると思いますので、まずruby on railsでのフォームの扱いについての確認をしていきましょう。

  • form_for・・・ modelに基づいたformを作成する
  • form_tag・・・modelに基づかないformを作成する

例えば、投稿機能や編集機能などuserモデルに基づいたフォームを作成する時はform_forを使います。 今回紹介する検索フォームなどモデルに基づかないフォームを実装する際はform_tagを使います。

今回は、検索フォームの実装なのでform_tagを使用していきます。

検索機能の実装

今回、ユーザー一覧が表示されるusers配下のindexページに、検索フォームを実装します。 検索フォームに入力されたキーワードがデーターベースにあるユーザー名と部分一致した場合、そのユーザー名を表示される仕様にします。

まずは、以下のように検索フォームを作成します。 ユーザーネームのカラム名はusernameです。

users/index.html.erb

     #検索拡張機能
          <%= form_tag(users_path, :method => "get") do %>
            <%= text_field_tag :search %>
            <%= submit_tag "Search" ,:username => nil ,class: "button is-info"%>
          <% end %>

 
     <% @users.each do |user| %>
      

続いてUsersControllerのindexにsearch(params[:search])を追加します。 検索フォームで入力されたキーワードがparamsの中に入るようなイメージです。

  • search(検索フォームで入力されたキーワード)

class UsersController < ApplicationController
(中略)
  def index
      @users = User.paginate(page: params[:page], per_page: 5).search(params[:search])
  end
(中略)
end

最後にuserモデルにsearchというメソッドを作成します。 検索フォームで入力されたキーワードがsearchメソッドの中で処理されます。 キーワードと部分一致するユーザーネームがあれば、その結果がページに表示されます。 部分一致するユーザーネームがない場合は、allとして全てのユーザーネームが一覧として表示されるようになります。

models/user.rb

class User < ApplicationRecord

  def self.search(search) #self.はUser.を意味する
    if search
      where(['username LIKE ?', "%#{search}%"]) #検索とuseanameの部分一致を表示。
    else
      all #全て表示させる
    end
  end


end

完成イメージはこのような感じです。

f:id:daikiyano:20190206160121p:plain

f:id:daikiyano:20190206165520p:plain

rails初心者の方でも簡単に検索フォームの実装することが出来ます。 ポートフォリオ制作する際に是非試してみてください!

参考サイト

qiita.com

www.for-engineer.life

www.for-engineer.life

www.for-engineer.life

www.for-engineer.life