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

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

bowerの概要

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

どうやって使うのか

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

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

ライブラリを入れてみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

ではでは