2016年の目標を立ててみましたで宣言したように、JavaScriptの勉強ということで、その延長線上にあるjQueryとかAngularJSといったJSのライブラリやフレームワークに手を出しました。

jQueryに関しては、関連する項目とも言えるAjaxについて、AjaxにまつわるjQueryとかJSONPとかのあれこれをまとめてみたでも軽くまとめました。

そんな中で、フロントエンドのあれこれを管理するツール"Bower"について知りました。

Bowerとは

冒頭のロゴがそれなのですが、「A package manager for the web」ということで、フロントエンドのパッケージ管理を簡単に行うツールのようです。Twitter社製なんだとか。

公式サイトはこちら。ちなみに、読み方は"ばうあー"とのこと。

Bowerのインストール

インストールには、npmが必要になるので、node.js（nodebrewでの管理がおすすめ！）のインストールはまだの場合は先にやります。こちら参照。

念の為、npmコマンドでバージョン確認。

$ npm -v

3.8.9

大丈夫そうなので、早速bowerをインストールします。オプションの"-g"はグローバルの意味でがあり、これを付けると、.nodebrew配下のnode_modulesの下にインストールされます。（付けなかった場合はローカルなので、コマンド実行時のディレクトリ）

$ npm install bower -g

/Users/xxxxx/.nodebrew/node/v6.2.0/bin/bower -> /Users/xxxxx/.nodebrew/node/v6.2.0/lib/node_modules/bower/bin/bower
/Users/xxxxx/.nodebrew/node/v6.2.0/lib
└── bower@1.7.9

無事に完了したので早速確認。

$ bower -v

1.7.9

Bowerの設定ファイル"bower.json"を作る

言うなればプロジェクトの初期化みたいなものです。いろいろと質問されるけど、全部Enterで進みます。

結果として以下にYes / No と出力されているところも、Enterで勝手に入力されるみたいです。デフォルトの回答があるのかな。

$ bower init

? name bower
? description
? main file
? keywords
? authors xxxxx <xxxxx@gmail.com>
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
{
  name: 'bower',
  authors: [
    'xxxxx <xxxxx@gmail.com>'
  ],
  description: '',
  main: '',
  license: 'MIT',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

完了すると、カレントディレクトリに"bower.json"が作られます。内容は上記のJSON形式のコードです。

$ ls -l

total 8
-rw-r--r--  1 Takahiro  staff  260  6  2 22:29 bower.json

bowerコマンドでjQueryをインストールする

最も分かりやすいところで、JavaScriptの超有名ライブラリであるjQueryを入れてみることにします。

オプションの"--save"を付けることで、bower.json内にインストールしたパッケージ（今回はjQuery）の情報が記述されます。これについては後述。

$ bower install jquery --save

bower jquery#*              not-cached http://github.com/jquery/jquery-dist.git#*
bower jquery#*                 resolve http://github.com/jquery/jquery-dist.git#*
bower jquery#*                checkout 2.2.4
bower jquery#*                resolved http://github.com/jquery/jquery-dist.git#2.2.4
bower jquery#^2.2.4            install jquery#2.2.4

jquery#2.2.4 bower_components/jquery

カレントディレクトリを見てみると、bower.jsonと同階層に"bower_components"というディレクトリができており、更に中を見てみると、"jquery"というディレクトリが入っています。この配下にjQuery本体をはじめ、諸々が揃っているという状態です。

$ ls -l

total 8
-rw-r--r--  1 Takahiro  staff  308  6  2 22:31 bower.json
drwxr-xr-x  3 Takahiro  staff  102  6  2 22:31 bower_components

$ ls -l bower_components

total 0
drwxr-xr-x  10 Takahiro  staff  340  6  2 22:31 jquery

ちなみに、"--save"というオプションを付けたことにより、bower.jsonには以下のような依存が追記されています。

$ cat bower.json

--略
  "dependencies": {
    "jquery": "^2.2.4"
  }
}

これにより次回以降、同じパッケージを揃えてプロジェクトを開始したい場合、このbower.jsonをコピーして一気にまとめてパッケージをインストールすることが可能となります。

そのためのコマンドがこちら。

$ bower install

その他のコマンド

Bower本体のアップデート

$ npm update -g bower

インストール済みのパッケージのアップデート

$ bower update

パッケージの情報（対応しているバージョンなど）を確認

$ bower info [package]

バージョンを指定してインストール

$ bower install [package]#[バージョン]

パッケージのアンインストール

$ bower uninstall [package]

パッケージの検索

$ bower search [package]

// Ex
$ bower search angular
Search results:

    angular http://github.com/angular/bower-angular.git
    angular-m http://github.com/dlhdesign/angular-m.git
    angular-adn http://github.com/appdotnet/angular-adn.git
    // 以下略

ちなみに、"bower lookup [keyword]"というコマンドもあるようですが、こちらは完全一致じゃないとヒットしないような気がします。

インストール済みのパッケージの確認

$ bower list
or
$ bower ls

// Ex
$ bower list
bower check-new     Checking for new versions of the project dependencies...
bower /Users/xxxxx/Development/www/bower
└── jquery#2.2.4 (latest is 3.0.0-rc1)

開発用としてパッケージをインストール

$ bower install [package] --save-dev

開発用（--save-dev）以外のパッケージをインストール

$ bower install --production

他にもいろいろとコマンドありそうだけど、ひとまずこんなもんで。