Rails jQueryを使用する

投稿日: by keruu

Rails5でjQueryを使用する方法です。

Step1. gemの追加

Gemfileにjquery-rails を追加します。jquery-railsはデフォルトで存在し、有効になっています。

gem 'jquery-rails'

bundle installします。

$ bundle install

Step2. javascriptの動作確認

まずはAlertメソッドを使って、javascriptが動作するか確認します。

適当なviewファイル（index.html.erbなど）を開き、次の処理を追加します。

<script type="text/javascript">
alert('Hello World!');
</script>

アラートメッセージが表示されれば、javascriptは動作しています。

Step3. jQueryのインライン動作確認

jQueryコードをまずはインラインで実装して、動作確認します。

ここで書くjQueryは次のフォーマットになっています。

$("セレクタ").メソッド(パラメータ)

適当なviewファイル（index.html.erbなど）を開き、次の処理を追加します。ここではpタグのcolor属性をredにしています。

<p>Hello World!</p>
<script type="text/javascript">
$("p").css("color", "red");
</script>

ブラウザで該当ページを開き、Hello World!が赤色になっていればOKです。

また、pタグよりも前にjQueryコードを置く場合は、HTMLのロードが終わってからjQueryコードを実行するように指示しないとスタイルが反映されません。この場合は次のように$(document).readyを使います。

<script type="text/javascript">
$(document).ready(function() {
 $("p").css("color", "red");
});
</script>
<p>Hello World!</p>

Step4. jQueryの外部ファイル化

jQueryコードをjsファイルに書きます。viewファイルに記述したコードは消しておきます。

app/assets/javascriptsフォルダにsample.jsを作成し、そこにjavascriptコードもしくはjQueryコードを記述します。scriptタグは不要です。注意点として、HTMLセレクタが含まれる場合は、HTMLの読み込みが終わってからコードが実行されるように、$(document).readyを使わないと大抵動作しません。

$(document).ready(function() {
 $("p").css("color", "blue");
});

上記のjavascriptは初期状態では自動で読み込まれます。ただし、app/assets/javascripts/application.jsに//= require_tree .が定義されていない場合は読み込まれません。

ブラウザで該当ページを開き、Hello World!が青色になっていればOKです。

以上です。

 

Rails