【Ruby on Rails】簡単なメモアプリの作成｜検索機能をGemなしで実装
開発環境
- Ruby:version 3.1.2
- Ruby on Rails:version 7.0.4
- Visual Studio Code:version 1.73.0
- OS:Windows10
Ruby on Railsで検索機能の実装手順
Ruby on Railsの検索機能は、ransackなどのgemなしでも比較的簡単に実装することができます。 今回はメモアプリの作成で使用したコードを用いて検索機能の作り方を解説していきます。
検索機能のルーティングを作成
まずは検索機能のルーティングを作成していきます。
1# memo_app\config\routes.rb 2 3Rails.application.routes.draw do 4 root :to => 'memos#index' 5 resources :memos, only: [:index, :update, :destroy, :create] 6 post 'ajax_memos_create', to: 'memos#ajax_create', as: 'ajax_memos_create' 7+ get 'search', to: 'memos#search', as: 'search'
今回はHTTPSメソッドはGETメソッドを指定していますが、POSTメソッドでも問題ありません。 GET通信かPOST通信にするかは、送信されるパラメータの機密性によって使い分けてください。
検索機能のフォームを作成
次に検索機能のフォームを作成します。
1# memo_app\app\views\memos\index.html.erb 2<div class="wrapper"> 3 <div class="container flex-start"> 4+ <div class="col-box-1"> 5+ <%= form_with url: search_path, local: false, method: :get do |f| %> 6+ <%= f.text_field :word, placeholder: "検索したいメモの内容を記入してください。", class: "search-box" %> 7+ <%= f.submit "検索", class: "btn" %> 8+ <% end %> 9+ </div> 10 11 <div class="col-box-1">
今回は非同期通信にしたいためform_withのlocalはfalseにしています。 また、methodはルーティングで作成したHTTPSメソッドに合わせてGETメソッドを指定しています。
検索機能のコントローラーを作成
次にルーティングで指定したmemosコントローラー内にsearchメソッドを作成していきます。
1# memo_app\app\controllers\memos_controller.rb 2 3 def ajax_create 4 @memo_new = Memo.new(memos_params) 5 @memos = Memo.all 6 7 if @memo_new.save 8 flash.now[:notice] = "メモの保存に成功しました。" 9 else 10 flash.now[:alert] = "メモの保存に失敗しました。" 11 end 12 end 13 14+ def search 15+ seach_word = params[:word] 16+ @memos = Memo.where("title LIKE ? or description LIKE ?", "%#{seach_word}%", "%#{seach_word}%") 17+ if @memos.count > 0 18+ flash.now[:notice] = "#{@memos.count}件のメモが見つかりました。" 19+ else 20+ flash.now[:alert] = "#メモが見つかりませんでした。" 21+ end 22+ end 23 24 private 25 26 def memos_params 27 params.require(:memo).permit(:title, :description) 28 end 29 30end
あいまい検索にするためにwhereメソッドで指定したカラムに対してLIKE句を使用します。 また、今回は複数カラムに対して条件を指定したいため、or条件で2つ目のカラムを指定し、第二引数と第三引数に条件を指定します。 今回は部分一致なので「%xxxx%」としていますが、完全一致は「xxxx」、前方一致は「xxxx%」、後方一致は「%xxxx」になりますので、処理した条件に合わせて変更してください。 上記一致させる条件のの書き方が分かっていれば、検索機能にプルダウンで検索する条件を選択してもらうように処理をすれば検索機能がさらに充実します。
検索機能の非同期通信（Ajax）を作成
最後に検索機能の非同期通信（Ajax）を作成します。
1# memo_app\app\views\memos\search.js.erb 2+ $('#memo-list').html("<%= j(render "memos/list", memos: @memos) %>"); 3+ $('#notice').html("<%= j(render "layouts/notice") %>").show().fadeOut(2000);
今回は投稿一覧にデータを渡して再表示したいため、リスト一覧のIDを指定して検索結果を表示させています。 また、検索結果の表示と併せてフラッシュメッセージで検索結果の件数を表示をしたいため、フラッシュメッセージのIDを指定して表示させています。
検索機能のフォームデザインを作成
上記で検索機能の処理は完成していますが、追加でデザインだけ整えておきます。
1# memo_app\app\assets\stylesheets\application.css 2 3.form-box { 4 background-color: transparent; 5 border: 1px solid #d3d3d3; 6 border-radius: 6px; 7 padding: 6px; 8 width: 100%; 9} 10 11+ .search-box { 12+ background-color: transparent; 13+ border: 1px solid #d3d3d3; 14+ border-radius: 6px; 15+ padding: 6px; 16+ width: 30%; 17+ } 18
フォームにはplaceholderであらかじめテキストの表示をしていますが、デザインによっては検索アイコンを表示させるデザインもあります。 このあたりはUI／UXになっていますので、全体のデザインに合わせて調整してください。
おわりに
Ruby on Railsで検索機能の実装について解説してきましたが、いかがだったでしょうか。 今回はメインコンテンツの中に検索機能を実装しましたが、検索機能はヘッダーに実装されることも多いため、WEBアプリケーションの仕様に合わせて実装してもらえてればと思います。 是非、ユーザーがWebアプリケーションを使いやすいようにするためにも、検索機能の実装にチャレンジにしてみてください。