Railsで外部JavaScriptライブラリなどのAssetを管理するなら、bower-railsが便利

みなさま、Railsで外部のJavaScriptライブラリ、例えばUnderscore.jsなどを管理するとき、どんな方法を使っていますか？　ファイルを落としてきてvendor/以下につっこんでますか？

でもそれだと、いざバージョンアップしようと思ったときに面倒ですし、バグがあるのでバージョンを戻したい、といったときにも不便です。そもそもバージョンを管理できていません。

そんなとき、JSの世界ではBowerというツールでライブラリを管理します。Rubyの世界でのBundlerのようなものです。これをRailsで簡単に使えるようにしたのがbower-railsです。

使い方

事前に用意するもの

Railsの環境があることは前提にして、他に以下のセットアップが必要です。

  • node.js
  • bower

このセットアップについては「Bower入門(基礎編)」という記事で分かりやすくまとめられていますので、まだ導入されていない方は、こちらの記事を参考にセットアップしてみてください。

注意：node.jsのバージョンについて

nodebrewを利用してインストールされる場合は、上記の記事のnode.jsのバージョンだとちょっと古いので、以下のように最新版（2014/4/14現在）のバージョンを指定してnode.jsをインストールして下さい。

nodebrew install v0.10.26
nodebrew use v0.10.26

Railsへの導入方法

Railsのバージョンは4.0.4、rubyのバージョンは2.1.1の環境で説明します。

terminal01

Gemfileには以下のようにbower-railsを追加します。

source 'https://rubygems.org'

gem 'rails', '4.0.4'
gem 'sqlite3'

gem 'sass-rails', '~> 4.0.2'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
gem 'bower-rails'

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

Gemfileへの追加後、bundle installしまして、次はBowerで管理したいライブラリを管理するBowerfileを作成します。今回はunderscore.jsを使いたいというニーズがあるとして、以下のようなBowerfileを用意します。

aseet 'underscore'

Bowerfileで指定できるライブラリは、ライブラリのルートにbower.jsonが設定されている、つまりBowerに対応しているものに限られます。

Bowerfileを作成したあとはライブラリをプロジェクト内にダウンロードするため、bundle exec rake bower:installを実行します。すると、vendor/bower.jsonが作成（または更新）されるのと同時にvendor/bower_componentsにライブラリがダウンロードされます。

terminal02

こんな感じにライブラリがダウンロードされます。

terminal03

vendor/assets/bower_components以下にダウンロードされるので、application.jsでrequireするためにも、このパスをconfig.assets.pathsに追加しておきます。

# config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

ここまで終わったらあとはapp/assets/javascripts/application.jsでrequireするだけです。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require underscore/underscore
//= require_tree .

これでunderscore.jsを使えるようになりました！

素朴な疑問：bower_componentsはGitで管理するの？

結論から言うと管理しないのが一般的なようなので、.gitignoreにvendor/bower_componentsを追加するのが良いと思います。

参考：[Bower] bower_components ディレクトリはgitで管理すべきか問題

BowerでダウンロードされたライブラリのバージョンはGemfile.lockのようにvendor/bower.jsonで管理されるので、このファイル自体はバージョン管理しておく必要があります。

Bower便利なので、zurui-sassなんかもBowerに対応するようにしていきたいですね。