☰
Papaelblog

Ruby on Railsでjavascriptを読み込む方法3選

プログラム

フロントエンド部分の開発を進めていくと、
「もっと動きをつけたいなぁ」とか、
「あのサイトのかっこいい動きを真似したいなぁ」と思い、
どんどん凝った仕様にしたくなりますよね。
そのリッチな動きや仕組みを実現する際に、
Javascriptは必須で使われています。
ここではRuby on Rails内でJavascriptを読み込む方法を紹介していきます。
今回は、代表的な以下の3つの方法をご紹介します。

  • 方法1: 別ファイルにしてjavascriptを読み込ませる
  • 方法2: 特定のビューにjavascriptを読み込ませる
  • 方法3: ビューファイル(.erb)に<script>タグで処理を書く

方法1: 別ファイルにしてjavascriptを読み込ませる

Ruby on Railsを使用している場合、JS(javascript)ファイルを以下の指定の場所に格納すればjavascriptを読み込ませることができます。
app/assets/javascript/
サンプルとして、先程と同じ以下の内容でJSファイル(test.js)を作成してみます。
作成したJSファイルは”app/assets/javascript/”に格納します。
test.js


window.onload = function () {
　alert("javascript test");
};

次に、”app/assets/javascripts/“内のapplication.jsに以下を追記します。


// 追加
require('test')

この方法は、test.jsが全てのビューファイル(.erb)に読み込まれる方法です。

ビューファイルについては、以下の記事を参考にしてみてください。

Ruby on railsのMVCとビューの役割を知ろう！ | papaelblog

Ruby on railsを学んでいくとビュー(View)という単語が出てきて、これって一体どういったことに使うのってなりますよね。

複数のビューファイルに共通的なjavascriptの処理をさせたい場合に効率的です。
ですが、特定のビューファイルには読み込まれたくないjavascriptもあるかと思います。
その際には、特定のビューファイルにのみJSファイルを読み込ませる方法2を活用します。

方法2: 特定のビューにjavascriptを読み込ませる

JSファイルを読み込ませたいビューファイルにのみに特定させる方法を紹介します。
先程の方法1で試した通り、Ruby on Railsは、”app/assets/javascript/”内にあるJSファイルを自動的に読み込む機能を持っています。
そのため、全てのJSファイルを読み込んでしまい、処理の使い分けや管理が柔軟に出来ない場合があります。
特定のビューファイルに特定のJSファイルを読み込ませたい場合、まずはこの自動読み込み機能を無効化する必要があります。
“app/assets/javascript/”内のapplication.jsの以下の内容をコメントアウトします。


//= require_tree .

これでJSファイルの自動読み込み設定を無効化出来ました。
しかし、これだけでは不十分です。
実はこの手順で、JSファイルの自動読み込み設定を無効化したのと同時に、全てのJavascriptが実行不可という環境にもなってしまったのです。
これでは困るので、Javascriptを実行できる環境を設定します。
“/config/initializers/“内のassets.rbに以下の内容を追記します。

assets.rb
　Rails.application.config.assets.precompile += %w( *.js )

次に設定を有効化するために以下のコマンドでRuby on Railsを再起動しましょう。

rake restart

これで各ビューファイル(.erb)に以下を内容を追記すれば、ビュー毎に読み込ませるJSファイルを分けることができます。
<%= javascript_include_tag ""任意の名前.js"" %>
“/app/assets/javascript”内にJSファイルを格納すれば完了です。
他の2つの方法よりも手間がかかりますが、全てのレイアウトにjavascriptを読み込ませると、実行しても良い処理かどうかの判断が大変になってきます。
大規模な開発をする際には、この方法3と方法2を使い分けながら進めていくことになるでしょう。

方法3:ビューファイル(.erb)に<script>タグで処理を書く

app/views/内のビューファイル(.erb)に書かれているHTML記述に<script>タグを直接追記する方法です。
この方法は一番即時的で、すぐにjavascriptの処理を確認したい時に有効です。
サンプルとして、app/views/test.html.erbを作成して、javascript処理を記述します。
test.html.erb


<script>
　window.onload = function () {
　　alert("javascript test");
　};
</script>
<p>
　test
</p>

この方法はビューファイル毎に記述する必要あり、共通的な処理を書く上では効率的ではありません。
ですので、Ruby on Railsでjavasriptを読み込ませる方法としては、次の方法2と方法3が一般的です。

まとめ

Ruby on RailsでJavascriptを読み込ませる方法を3つ紹介しました。
一つ目は、別ファイルにしてJSファイルを読み込ませる方法、
二つ目は、特定のビューに特定のJSファイルを読み込ませる方法、
三つ目は、方法3: ビューファイル(.erb)に直接<script>タグで処理を書く方法

Ruby on Railsには、Webアプリの開発者にとって便利な機能がいくつも備わっています。
このjavascriptの読込方法もその一つです。
javascriptは、Webのフロントエンド開発には欠かせない言語の一つで活用方法です。
実装したい形によって、読み込ませる方法が変わってくるかと思います。
それぞれの方法には一長一短がありますので、ご希望に合わせて方法を変えてみてくださいね。

HOME >  プログラム >  Ruby on Railsでjavascriptを読み込む方法3選