Rails4でjQueryライブラリを利用する方法のメモ

記事公開日:
最終更新日:

This post is also available in: English-US (英語)

Railsを使っていて、javascriptのフレームワーク(Angular.js/React.js/Backbone.js)を導入するほどでもないと思った時に、jQueryライブラリを利用した際のざっくりとしたメモです。

1.jQueryライブラリの置き場所

Railsでは基本的には、app/assets 以下にはWEBアプリ独自のコード、lib/assets 以下には自分で作成したライブラリのコード、vender/assets 以下にはサードパーティー製のコードを置くのが良いらしいです。
jQueryライブラリは、vender/assets 以下に配置します。

2.Asset Pipelineのパスの確認

Rails3あたりからAsset Pipelineというシステムが導入され簡単に言うと、app/assets、lib/assets、vender/assets 以下のJavaScriptやCSSが読み込まれるようになってるらしいです。
念のため、vender/assets 以下に配置したjQueryライブラリのフォルダが読み込まれているか、rails consoleでパスを確認することができます。

rails console
$> Rails.application.config.assets.paths

3.applicaion.jsとapplicaion.cssにrequire追加

applicaion.jsとapplicaion.cssのマニフェストファイルにて、必要なファイルをrequireします。
jQueryを利用する場合には、もちろんjqueryをrequireする必要があります。
下記は例ですので、必要に合わせてjQueryライブラリフォルダ以下のjsとcssフォルダを指定してください。

chromeの開発者ツールあたりで、必要なライブラリのファイルが読み込まれているかどうか確認して完了です。
ちなみにコメントアウトは、イコール(=)を消したら良いです。

//applicaion.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree ../../../vendor/assets/jQueryライブラリ/src/js/libs/.

*applicaion.css
*= require_tree ../../../vendor/assets/jQueryライブラリ/src/css/.

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。