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

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

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

• Gemfileに以下を追加して bundle update と bundle 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')

追記

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