Site icon Amelt.net

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

Amelt

Amelt

This post is also available in: 日本語 (Japanese)

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/.