Rails jQueryでイベントを発火させるまでの流れ

まえがき

今回初投稿です。間違っている点や、修正点がありましたら指摘してくださると嬉しいです。

きっかけ

インクリメンタルサーチを実装したいと思い、ajaxを触ってみたものの、イベントを発火させる（keyup,submitなどの操作をjsに反応させること）ところでつまずいてしまったので備忘録として書きます。同じところでつまずいた人の参考になれば幸いです。

目次

・gemfileに追加
・application.jsに追加
・javascriptファイルを作成
・jQueryで記述
・動作確認

gemfileに追加

それでは実際にやっていきます。
今回はjqueryで書いていくのでGemfileに'jquery-rails'というgemを追加してjQueryを使用できるようにします。

Gemfile

  ...
 （中略）
  ...
# Use jquery as the JavaScript library
gem 'jquery-rails'
  ...
 （中略）
  ...

忘れずに bundle install をしましょう。
しっかりと、gemlockにjqueryの記述があることを確認します。

application.jsに追加

今回はこのアプリケーション全体にjsを効かせたいのでapplication.jsに記述していきます。
記述するものは以下の通りです。

application.js

  ...
  （中略）
  ...
//= require jquery
//= require rails-ujs 
  ...
  （中略）
  ...

requireという表記はCommonJSに基づいた書き方で、jsを適用させるという意味合いです。
各JSファイルをモジュール化しておいて、使うときはrequire()で読み込むやりかたをアプリケーション全体に効かせたいときにこのような表記をします。
ちなみにコメントアウトされているような表示方法ですがこれはsprocketsというgemファイルの仕様です。
同じjavascriptファイルの中にsample.cofeeというようなファイルが入っていることがありますが、jsファイルと同じ名前だとjsファイルを読み込まないことがあるので使わないなら削除しておきましょう。

jsファイルを作成

ではイベントを指定するjsファイルを作ってみましょう。
jsファイルは assets / javascript のディレクトリに入っています。
javasqriptファイルがない場合は作りましょう。

app / assets / javascript / sample.js

この位置に追加しましょう。

jQuery記述

これからどんなイベントが発生したときに発火させたいのかを設定していきます。
記述方法は以下です。

sample.js

$(function(){
  $('#action-form').on('keyup', function(){
    var input = $("#action-button").val();
      console.log (input)
  })
})

keyupはキーボードのキーを上げたときという意味になります。
'#action-form'はどこでkeyupしたときに発火させたいかということを指定しています。
まとめると、この記述は、'#action-form'に文字を入力したときに.val()で値を取得し、inputに代入している、というふうになります。
そしてそのinputをconsole.log()を使ってデバッグしていきます。
console.log()で値が取れているかどうかを確認するにはブラウザ上でプロパティーツールを開いて、consoleという欄を開くと確認できると思います。

もし、inputに代入した文字がconsoleで出力できていたなら発火できているという証拠です。

まとめ

今回はjqueryを使って発火させるまでを書きました。
発火させることはjavascriptを使う上で一番最初のアクションになります。今回はkeyupを使って発火させましたが、submitやscrollなどたくさんの種類があり、以下のリンクが参考になります。是非確認してみてください。
jQuery on() イベントの種類
では、また！！！！