Railsで、任意のJavaScriptやCSSだけを読み込む

  • 264
    いいね
  • 7
    コメント
この記事は最終更新日から1年以上が経過しています。

結論を先に書くと、app/assets/javascripts/application.js.erb を修正します。

application.js.erb
//= require jquery  
//= require jquery_ujs  
//= require_tree .  

こんな風になってるはず。
どのページでも共通に読み込みたい JavaScript が以下の二つだった場合。

app/assets/javascripts/hogehoge/fugafuga.js
app/assets/javascripts/areare/korekore.js.erb

//= require_tree . を削除してこんな風に修正します。

application.js.erb
//= require jquery  
//= require jquery_ujs  
//= require hogehoge/fugafuga
//= require areare/korekore

でもちょっと待った。
この状態では、app/assets/javascripts/ 配下に置かれているJSファイル群はAssets Pipeline の対象外になってしまいます。
application.js の一部としてまとめられることはないものの、ダイジェスト化(ファイル名がMD5ハッシュ付きになるアレ)なども行われなくなるので、できれば以下の行を追加しましょう。

production.rb
config.assets.precompile += ['*.js']

JSファイル全部じゃなくて特定のファイルだけAssets Pipelineの対象にしたい場合は、このように書きます。

production.rb
config.assets.precompile +=  ['admin.js', 'admin.css', 'swfObject.js']

特定のディレクトリだけとかだとこうなるみたい(未検証)。

production.rb
config.assets.precompile += ['directory/*.js']

あとは、必要に応じて View で呼ぶとよいでしょう。
その際は、javascript_include_tag を使います。

例えば以下のようなJSファイルを View で読み込みたい場合。

app/assets/javascripts/kokohadoko/watashihadare.js.erb

<%= javascript_include_tag 'kokohadoko/watashihadare' %>

ってのを書けばいいです。MD5ハッシュ付きのアレなJSファイルをちゃんと読み込んでくれます。
細かいことを言うと、位置はerb ファイルの中でもなるべく下の方に書いてください。

CSSでも↑をまるっと読み替えてもらえば対応できます。
JSとCSS両方って場合のproduction.rbはこんな感じ。

production.rb
config.assets.precompile = ['*.js','*.css']

stylesheet_link_tag を使って個別のCSSを読み込むことになりますが、JSと違って位置は上の方にしてください。
SASSを使っている場合、AssetPipelineのコンパイル順の関係でエラーが発生することがあります(コメント参照)。


某所で質問に上がっていたので、もしかして需要があるのかな、と記事にしてみました。
app/assets/javascripts 配下にファイルを置くとひとつにまとまるのは Rails3.1 で導入された Assets Pipeline の既定の動作ですが、単にテンプレートがそうなっているだけの話です。
上で書いたように application.js.erb が配下のJSファイルをすべて読み込んでひとつにする記述になっているのと、 app/views/layouts/application.html.erb に以下の記述があるってのと。

app/views/layouts/application.html.erb
<%= javascript_include_tag 'application' %>

Assets Pipeline は何気にいろいろ難しいですね。
私も必要に応じてかいつまんで調べているので、間違いなどあったら指摘してください。
manifest ファイルがうんたらとか言い出したらちょっと深みにはまってる気がしないでもないですが、静的ファイルを効率よく提供できるかどうかはサイトのパフォーマンスに結構影響するんですよね。。。

Assets Pipeline。
開発者に負担を強いることなくページの読み込み速度を速くするためのいい仕組みなのは間違いないのですが、やはり何をどうしているのか知っておいた方がよさそうです。
YSLOW などを動かしながら計測すると分かりますが、1ページで読み込むファイル数が多いと表示速度は遅くなりますし、ブラウザのキャッシュの有効利用を考えた場合、あまり細かくページごとの JS ファイル読み込みにこだわるのも却ってパフォーマンスダウンにつながります。
ほんとに一部のページでしか使われていないとか、管理ページで使っている JS ファイルなので一般ページではちょっと・・・とかじゃなければ、素直に application.js にいっしょくたでいい気もしています。


config.assets.precompile の設定変更なども、これをやると確実に rake assets:precompile の処理にかな~りの時間がかかるようになります。デフォルトでは application.js.erb と application.css.erb が対象だったのが、すべてに変わるのである意味当然です。
heroku を使っている場合(かつ、manifest ファイルを事前に用意していない場合)は deploy がそれ以前に比べてかなり遅くなると思います。まあ、日本で heroku 使うなら assets_sync も使うだろうし、不可避というか必然ではあるんですけどね。