Bower を試してみる

Bower (ばわー) は、フロントエンドライブラリのパッケージ管理ツール。簡単に言えば、ブラウザ上で使うライブラリを手軽にインストールできるシロモノ。

「インストール」というと、ぼくはなんだかどうしても、Windows ソフトのインストーラのようなレジストリを書き換えて情報を登録して…みたいなことをされるのかと思ってしまうのだが、そういうわけではない。Bower についていえば、指定したライブラリをネット上から検索→ダウンロード→指定の場所に格納、の作業を自動化してくれるだけだ。

Bower を導入するメリット

上述のとおり、ライブラリを手軽に導入できることがメリット。そして、導入したライブラリをバージョン含めて細かく一覧表示したりできるし、アップデートもコマンド一つとお手軽。

逆にいえば、ライブラリをダウンロードする作業を苦に感じておらず、使っているライブラリを手で管理できていて、アップデートをすることも早々ない、とかであれば、Bower を使わなくてもなんとかなる。その人の用途だったり、プロジェクトの規模だったりによると思う。

Bower を使い始める

Bower は npm で動作するので、Node.js の環境を作っておくこと。Node.js の導入方法は過去記事で紹介している。

Node.js・npm が導入できたら、ターミナル (コマンドプロンプト) より、以下のコマンドで Bower をグローバルインストールしておく。

$ npm install -g bower

Bower の初期設定

Bower でライブラリ管理したいディレクトリに移動し、Bower を使いますよーという初期設定を行う。

# プロジェクトフォルダに移動する
$ cd myProject

# Bower の初期設定
$ bower init

いくつか質問をされるが、基本は Enter の連打に Yes の回答のみで OK。内容的には npm init と同じ感覚で、npm init で生成した package.json ファイルがあれば、その中身を見てプロジェクト名などは適宜サジェストしておいてくれたりする。

質問に答え終わると、bower.json というファイルができる。package.json に似た構成だ。

ライブラリをインストールする

試しに jQuery をインストールしてみる。

$ bower install jquery --save

bower_components/ というフォルダができ、その下に jquery/ フォルダができている。ライブラリはこの中にダウンロードされる。

--save オプションをつけると bower.json にそのライブラリ情報が書き込まれる。他の人などは、bower.json さえあれば、その内容を基に bower install コマンドでライブラリを一括インストールできる。このへんも npm install の仕組みと同じ。

インストールしたライブラリの確認

# インストールしたライブラリの一覧表示
$ bower list

# インストールしたライブラリのエンドポイント (実際に参照すればいいファイル) の表示
$ bower list -paths

# jQuery であれば以下のように表示される
jquery: 'bower_components/jquery/dist/jquery.js'

# ライブラリの情報を知る
$ bower info jquery

bower list -paths で確認したとおり、実際に HTML から jQuery を使用する場合は、

<script src="bower_components/jquery/dist/jquery.js"></script>

<!-- もしくは圧縮版 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>

のように参照してやればいい。

Bower はライブラリをダウンロードしてくるだけで、良き感じの場所に置き直したりはしてくれないので、エンドポイントの指定が面倒くさいのが欠点。これを解消するには、やはり Gulp などでファイルをビルドしてあげるしかないようだ。

色々試した

# underscore.js も入れてみた
$ bower install underscore

# bootstrap も入れようとしたら、先に入れていた jQuery とバージョンが合わずダウンロードできなかった。一旦 jQuery はアンインストールしておく
$ bower uninstall jquery --save

# bootstrap (と一緒に有効なバージョンの jQuery も) をインストール
$ bower install bootstrap

とりあえず、Bower を使う側の人間が知っておきたい基礎はこのぐらいか。Bower 覚えましたし！

以下の GitHub リポジトリで、Node.js 関連のツールを使ったりした勉強過程を残しています。

参考