Rails
jQuery
jquery-ui

RailsにjQuery-uiを導入するときの注意

More than 3 years have passed since last update.

注意: ここに記載されている作業は、アセットパイプラインを使用しない場合でもなければ通常は不要です。追記を参照ください。

わかってしまえば簡単だけど、ネットにほとんど見当たらなかったのでメモ。Rails 4.0 + Ruby 2.0環境。


  • Gemfileに以下を追加して bundle updatebundle install を実行。

gem 'jquery-ui-rails'

ちなみに以下も含まれている。

gem 'sass-rails'

gem 'bootstrap-sass'
gem 'coffee-rails'
gem 'jquery-rails', '~> 3.0.0'
gem 'turbolinks'
gem 'jquery-turbolinks'


  • 以下を実行して jquery-uiのファイルをgenerateする。これがわからなくてはまった。これに限らず、jquery関連でgemを追加したときはおそらくこういう作業が必要になるのだろう。

rails generate jquery:install --ui

以下は実行結果。

      remove  public/javascripts/prototype.js

remove public/javascripts/effects.js
remove public/javascripts/dragdrop.js
remove public/javascripts/controls.js
copying jQuery (1.10.2)
identical public/javascripts/jquery.js
identical public/javascripts/jquery.min.js
copying jQuery UJS adapter (e9e8b8)
remove public/javascripts/rails.js
identical public/javascripts/jquery_ujs.js

ちなみに、rails generate とだけ実行すれば多くのヘルプが表示され、 rails generate jquery:install --help と打てばjquery関連のヘルプが表示される。 -p オプション (シミュレーションのみ行う) がとても便利。


  • これでめでたく以下を追加できる。generateに気付かなかったばかりにここでエラーを出しまくった。


app/assets/javascripts/application.js

//= require jquery.ui.all



app/assets/stylesheets/application.css

/*

*= require jquery.ui.all

なお、jqueryそのものは html.erbにも書けるけど、assets/javascripts以下の *.js.coffeeファイルに書く方が行儀がよいと思われる(CoffeeScriptを導入している場合)。coffeeScriptなので出だしをうんとシンプルに書ける。

$ ->

$('div').css('color', 'red')


追記

その後調べた結果、アセットパイプラインの設定に不備があったのが原因であることがわかりました。アセットパイプラインが正常に動作していればこの記述を適用する必要はありません。以上訂正いたします。