BowerでJavaScriptのライブラリをラクラク管理

Takuya

6年前

最近はどの言語でもモジュールのパッケージ化の考え方が進んでいますね！
NodejsのnpmやRubyのGemはとても一貫性が高くて好きです。
そして、その潮流はクライアントサイドのウェブ開発分野にも及んでいます。
TwitterがBowerというJavaScript/CSSのライブラリをパッケージ管理できるツールを公開しています。
これを使えば、ライブラリ間の依存関係をあまり意識せずに、手間をかけずに使う事ができますね！

Ruby on Railsでも簡単に使えるようなgem bower-railsが提供されています。
至れり尽くせりですね！

Railsで使う場合の使い方をざっとご紹介します。
インストールはnpmのコマンド一発。

#!bash
$ npm install -g bower

以下の行をGemfileに追記しましょう。

#!ruby
gem 'bower-rails', '~> 0.6.1'

依存関係はBowerfileという名前のファイルに以下のように記述します。

#!ruby
assets_path "assets/javascripts"

# Puts files under ./vendor/assets/javascripts
group :vendor do
  asset 'jquery'    
  asset 'jquery-ui' 
  asset 'jquery-ui-touch-punch' 
  asset 'jquery-ujs' 
  asset 'jquery-placeholder' 
  asset 'jquery.tagsinput' 
  asset 'modernizr' 
  asset 'bootstrap-select' 
  asset 'bootstrap-switch' 
  asset 'bootstrap3-typeahead' 
  asset 'BigVideo.js' 
end

使いたいライブラリがBowerにあるか調べるには、以下のコマンドを実行します。

#!bash
$ bower search <keyword>

gemとかpodと一緒ですね！
準備ができたらインストールしましょう。

#!bash
$ rake bower:install

これで、vendor/assets/javascripts/bower_components のディレクトリ下にインストールされます。
また、Bowerを単体で使う時に必要なファイルがvendor/assets/javascripts/bower.jsonに生成されているのが確認できます。

使ってみた感想としては、Rails用のgemがあるならそっちを使った方がすんなり動く印象です。
js単体のライブラリなどの使用に適しているのではと思いました。

共有: