Railsは、初期状態でapp/assets/javascriptsディレクトリ以下の全てのJavaScriptを自動で読み込みます。
読み込ませるJavaScriptを個別に指定するには次のようにします。
目標
app/assets/javascripts/sample.jsを個別に読み込む。
準備
JavaScriptファイルは次のように実装しています。
$(document).ready(function() {
$("p").css("color", "blue");
});
Step1. ツリー読み込みの停止
自動で読み込まれるJavaScriptはapp/assets/javascripts/application.jsで管理されています。この中に//= require_tree .があるかと思いますが、これが定義されていると、app/assets/javascripts以下のすべてのJavaScriptが自動で読み込まれますので、まずはこれをコメントアウトします。=を除去して// require_tree .とすればOKです。
// require_tree .
Step2. プリコンパイルへの追加
Railsの場合、JavaScriptはプリコンパイルされている必要があります。上の自動読み込みが有効になっていると、自動でプリコンパイルしてくれるのですが、自動読み込みを無効にしている場合は手動でプリコンパイル対象にJavaScriptファイルを指定する必要があります。
config/initializers/assets.rbを開き、次のコードを追加し、app/assets/javascripts階層のJavaScriptファイルをプリコンパイル対象に指定します。
Rails.application.config.assets.precompile += %w( *.js )
もし、JavaScriptファイルをapp/assets/javascripts/bookなどのサブフォルダに入れている場合は次のようにディレクトリ指定します。
Rails.application.config.assets.precompile += %w( book/*.js )
プリコンパイル対象の変更後は、アプリケーションサーバーをストップして、再起動します。
$ rails s
Step3. JavaScriptファイルの読み込み
個別のJavaScriptファイルを読み込むには、ビューファイルにてjavascript_include_tagを使います。書式は次の通りです。
javascript_include_tag "javascriptファイル名"
ビューファイルを開き、JavaScriptファイルを読み込みます。ここではindex.html.erbに記述するものとします。
<%= javascript_include_tag "sample.js" %>
ブラウザで該当ページにアクセスし、動作確認します。動かない場合は、JavaScriptをビューファイルの最後で読み込むようにするとうまくいくかも。
以上です。