Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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')

追記

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

hachi8833
現在は https://techracho.bpsinc.jp/ に書いているのでQiitaは更新していません。
https://techracho.bpsinc.jp/
yasslab
RailsチュートリアルとRailsガイドを開発しています。解説動画や電子書籍、法人向け研修・協業プラン、全文検索・バージョン切替機能などを提供しています。
https://yasslab.jp/ja
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away