インクリメンタルサーチするときにやっぱり記述の量が多いよな〜めんどくさいな〜と思っていたのでいろいろ探してみると。。。

js.erbっていうのを使ったらめっちゃ簡単、コード量少なくインクリメンタルサーチ出来るようになったのでそれについて書いていく記事になります!

js.erbを使って記述を少なくインクリを処理させる

アプリ作成中にふといつもと違うやり方でインクリメンタルサーチが出来そうだと感じたのでやってみました。

途中変なところで詰まったりしましたが新しいやり方で出来たので良しとしますw

js.erbを使うと何が楽になるか

記述が少ない

特に記述が少なくなるのがjsファイルです。イベントの発火まで出来てしまえば後の処理を書く必要はありません。

セキュリティーの面でも効果的

js.erbを使用することでjbuilderやdoneアクションなどを書かなくて済むのでセキュリティーの面でもjs.erbの方が優れていると言える。

実際の作業内容

検索するview

.search
  .search-area  ユーザー検索
  %input#inc_search_user{:type => "text"}/
  #user_list 検索されたユーザーが表示されるところ

jsファイルでイベント発火

$(function() {
  $('#inc_search_user').on('keyup', function(e){
   //ページが転移してしまうのを防ぐために処理を止めている
    // e.preventDefault();
    var bro = $('#inc_search_user').val(); 検索された値を取得
    $.ajax({
      type: 'GET', // リクエストのタイプはGETです
      url: '/users', // ユーザー検索を行なっているところに飛ばす
      data: {man: bro}, // コントローラへフォームの値を送信.broは事前に定義してある
      dataType: 'script' // データの型はscriptで指定
    })
  })
})

ここで大事になって来るのがどのデータタイプで送るかというところ。script型で送るようにしています

今回はjs.erbファイルを使うのでjsonで飛ばす必要はない。(javascriptを使用する)

ここで僕は少し沼りました。基本的にはイベントを発火させるのはこの記述のみでオッケーです。

コントローラーでユーザー検索

def index
    @users = User.where("nickname LIKE(?)", "%#{params[:man]}%").where.not(id: current_user.id) 
   
  # binding.pry 先ほど作成したjsファイルから正しくここに飛んでいる場合はbinding.pryをすると処理が止まるので確認してみましょう
    
  end

ここも基本的に記述はこれだけです。ユーザーのnicknameとman で飛んできたもので検索させてます。

where.notで自分は検索されないように設定されています。

index.js.erbに記述していく

console.log('check') コントローラーからこのファイルに飛んでいる場合はコンソールに表示されるので確認しましょう。
<% @users.each do |user| %>
  var team = `<div class="gu">
                <%= link_to "#{user.nickname}", user_path(user.id) %>
              </div>`
      
        $("#user_list").append(team)
<% end %>
  • コントローラーで定義している@usersをeachで回す
  • html形式で出力される形を作る
  • appendを使って出力する
  • ファイル名はコントローラーのアクション名と同じ名前を使用

ここでの沼りポイントは.appendを使用することです。僕はずっと.htmlでやろうとして、1番苦労しましたw

あとファイル名はコントローラーのアクション名と同じにしてください。

appendとhtmlの違い

htmlは上書きしてしまうので最後に取得された値しか出力されない。eachで回しても最後の値しか出力されない。

appendは上書きでは無く追加の働きになるのでeachされた数だけ追加されていく。

js.erb使って良いなって感じたところ

記述が少ない

今回書いていて感じたのは記述が少なくてめちゃ楽だなと。view作って、jsで発火させて、コントローラー飛ばして検索かける。

その後コントローラーのアクションと同じ名前のjs.erbファイルを作成してviewに検索結果を表示させる。

以前jbuilderを使用してインクリメンタルサーチしてた時よりも格段に楽です。

コントローラーで定義したものをjs.erbで使える

記述が少なくなる理由の1つがjs.erbファイルっていうのを使用するからです。このファイルの中でコントローラーで定義した変数を使用出来ます。

doneアクションやjbuilderを書かなくて済むのは非常に楽ですw

まとめ

  • jsファイルは発火まで記述
  • dataTypeはscript型で送るようにする
  • コントローラーのアクション名と同じ名前のjs.erbファイルを作成
  • コントローラーで定義した変数を使いながらviewに表示させる
  • 出力の際はappendメソッドを使用するようにする