Bower 超入門!使い方を解説してみる!



最近ちょいちょい聞くbowerなんですけど、一体に何に使えるのか良く聞かれるのでざっくり解説してみました。
機能には関係ないですが、発音は「バウワー」だと思います。「ボワー」という方もいらっしゃいますがw

bowerの概要

bowerはWebに特化したパッケージマネージャーです。
こういうと慣れない方だと頭痛くなってしまう感じですが、そんなに難しくなくて、色々なアプリがインストールできたり出来るツールだと思ってください。
極端なことを言えばMacのappStoreみたいなものですww(え?違う?w
なので、これを使えば、いちいちサイトに行かずともコマンドから、jqueryやangularなどがインストールすることができます。

どうやって使うのか

使い方はターミナルからこのコマンドを打てばすぐ使えます。

[c] npm install -g bower
[/c]

これだけでインストール完了です。

ライブラリを入れてみる

試しにanuglarを落としてみます。

[c] bower install angular
[/c]

最新のバージョンがインストールされました。
また、特定のバージョンを入れたいという場合であれば、下記の様な感じでバージョンを書けば、そのバージョンのものがインストールされます。

[c] bower install angular#1.2.0-rc.1
[/c]

こうすると、他のバージョンがインストールされます。
いちいちサイトに行くのはめんどくさかったので捗ります

何を落としたか記録をしておく

bowerにはそれ以外にどのようなライブラリを落としたか記録することができます。例えば何かの案件で下記のようなライブラリをインストールしたとします。

  • jquery
  • bootstarp
  • angular.js
  • underscore.js

何を使っているかまでは覚えていたり刷るのですが、どのバージョンを使っているかまでは覚えているのは大変だと思います。
これをjson形式で管理できたりします。

[c] bower init
[/c]

このコマンドで今の状態jsonファイルに残すことができます。
この際にこの一式のプロジェクトのバージョンや名前が確認されます。適宜入力を行ってください。
この記事では、「testApp」でversionは0.0.1としました。

入力が完了すると、component.jsonというファイルが出来ます。

中を見るとこんな感じになっています。

[c] {
“name “: “testApp “,
“version “: “0.0.1 “,
“dependencies “: {
“angular “: “~1.2.0-rc.2 “,
“jquery “: “~2.0.3 “,
“bootstrap “: “~3.0.0 “,
“underscore “: “~1.5.1 ”
},
“ignore “: [
“**/.* “,
“node_modules “,
“components ”
] }
[/c]

dependenciesというところで、使っているライブラリが定義されているので、仮にライブラリがない状態であっても、このバージョンをそのままインストールすることができます。
試しにインストールしたライブラリを削除し、bowerの機能を使って、ファイルを復活させてみます。

[c] bower install
[/c]

↑のコマンドを打つとファイルが復活したかと思います。

他の人が作ったライブラリ集を使ってみる

このライブラリ集なのですが、他の人が作ったものが世の中には公開されています。
例えばangular.jsに関わりそうな物を探す場合は、下記のようなコマンドで探すことが出来ます。

[c] bower search angular
[/c]

このコマンドを打てば、angularに関する様々なcomponent.jsonを見ることが出来ます。

また、自分が作ったものも公開することができたります。

[c] bower register SomeName
[/c] [SomeName]部分には自分のプロジェクトの名称を入れてください。

まとめ

ざっくりとですが、bowerについて簡単にまとめました。
普通にダウンロードするほうがラクって思われる部分もあるかもしれませんが、後々のメンテナンス性やチームとの共有などを考えるとbowerを使うほうが捗る場合が多いように思います。
とても便利なので、ぜひ使ってみてください。

ではでは




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

Web Developer & Web Designer at Yahoo! Japan. Like HTML, css, JavaScript, Apple, ra-men, Angular, b-monster.