[初心者向け]Web制作で使用するライブラリは「bower」使うといいかんじに管理できる! | Select *
Web Web制作

[初心者向け]Web制作で使用するライブラリは「bower」使うといいかんじに管理できる!

bower一度試したらbowerを手放せなくなりそうです@deepblue_willです。

昨日書いたGruntに引き続き、今日はWeb制作のツールであるBowerについて紹介したいと思います。
なにものなの?とかなにがうれしいの?どうやって使うの?とかをお伝えできればなぁと思っております。



bowerとは


簡単に言ってしまうとWeb制作で使用するライブラリを管理できるツールです。
JQueryとかBootstrapとかWeb制作でライブラリを使うことは多いはずです。

ですが、「何のライブラリ使ってるんだっけ?とか」「ライブラリのバージョンは?」とか管理ツールなしで使うと色々扱いにくい問題もしばしば起こります。
そうした問題もbowerを使うとライブラリ関連の管理がすっきりできます。

皆様がよく知るTwitterが作っているライブラリなので、信頼性もバッチリです。

他の言語だと、Mavenとかgem(Bundler)と同じようなものだと思ってください。

bowerを導入するメリット

以下の4点かなぁと思っています。
必要なライブラリやそのバージョンが一目瞭然になる
後述しますが、bowerを使用するとbower.jsonというファイルに、使用するライブラリとそのバージョンを記述します。
なので、このファイルを見ればプロジェクトで使用しているライブラリとそのバージョンがすぐに分かります
特にライブラリのバージョンがシビアな場合、例えばIE8に対応しないと行けないからJQeuryは1系を使用するなどの場合、ライブラリとバージョンをどっちも管理できるのは大変ありがたいです。
コマンド1つでインストール、アップデートできる
ライブラリの配布サイトに行って、ダウンロードして、フォルダにいれるなんて作業はもう必要ありません。
コマンド1つで指定のフォルダにライブラリをインストールすることができます
アップデートも同様です。
ライブラリ同士の依存関係も解決できる
bower経由でライブラリをインストールとすると、それに依存するライブラリも自動でインストールしてくれます。
めんどくさいライブラリ同士の依存関係もばっちり解決です。
リポジトリにライブラリを入れなくて済む
コマンド1つでライブラリをインストールできるので、リポジトリでライブラリの管理をする必要がなくなります。
ソースをリポジトリからチェックアウトして、各自の環境でコマンドを実行すればローカルにライブラリがインストールされます。
ライブラリ関連の変更はbower.jsonのみを気にすればOKになります。

bowerの使い方

さて肝心のbowerのインストール方法、使い方を説明します。

インストール

まずnode.jsが必要です。インストールしましょう。
インストール方法は昨日書いたGruntについての記事を読んでみてください。

node.jsをインストールできていれば、bowerのインストールは以下のコマンドを実行するだけです。
$ npm install bower -g


インストールができたら以下のコマンドでバージョンを確認してみましょう。
以下の様な数字が出力されればOKです。
$ bower -v
1.3.9


bowerでbootstrapを管理してみる

さてここからは例として私もお世話になっている有名なフレームワークBootstrapをbowerで管理する例で説明します。

まず適当なディレクトリを作成して、そこへ移動してください。
その後に以下のコマンドでbowerでライブラリの管理に必要なファイルbower.jsonを作成します。
いろいろ対話式で聞かれますが、とりあえず全部エンターで良いです。
$ bower init


では早速以下のコマンドでboostrapをインストールしてみたいと思います。
$ bower install bootstrap --save


少し補足すると、--saveというオプションはbower.jsonに管理するライブラリ情報を保存するためのものです。
このオプションがなくてもインストールはできますが、bowerでライブラリの管理ができなくなるのでつけましょう。
また、同じようなオプションに--save-devというものあります。
これは開発時にのみ必要なライブラリをインストールするときにつけるオプションです。
例えばテストのためのライブラリとかは本番では必要ないですよね?
bower install --productionというコマンドを実行すると、--save-devでインストールしたライブラリはインストールされません。

さて、bootstrapのインストールが完了するとbower_componentsというフォルダにbootstrapがインストールされているはずです。
bootstrapだけでなく、bootstrapが必要としているJQueryもインストールされているはずです。
また、bower.jsonも以下のように変更されているはずです。
{
  ...
  "dependencies": {
    "bootstrap": "~3.2.0"
  }
}


bowerの一歩進んだ使い方

基本的な使い方は上記でなんとなくわかったと思うので、もうちょっとつっこんだ使い方を紹介します。

ライブラリの削除

以下のコマンドを実行するだけです。--saveオプションは開発用なら読み替えてください。
$ bower uninstall boostrap --save


指定のバージョンのライブラリをインストール


先ほどBootstrapをインストールしたコマンドだと、常に最新版がインストールされてしまいます。
固定のバージョンをインストールしたい場合は以下のコマンドを実行します。
$ bower install jquery#1.10.0


1系の最新であればなんでもよいということであれば以下のコマンドを実行します。
$ bower install jquery#1


詳しくはAPI · Bowerを読んでください。

インストール可能なライブラリを探す


Bowerのサイトから探すこともできますが、コマンドで探すこともできます。
部分一致で検索したい場合はseach完全一致で検索したい場合はlookupを使用します。
$ bower search jquery
$ bower lookup jquery


bowerが知らないライブラリをインストール


例えば、BootrapやJQueryはbowerに登録されているライブラリなのでbower install bootstrapみたいにライブラリ名だけでインストール可能でした。
bowerに登録されていないライブラリはそうは行きません。
もし登録されていないライブラリをbower経由でインストールしたいのであれば、URLを指定してインストールできます。
$ bower install url --save


インストール先ディレクトリ名を変更する


bower経由でインストールされるライブラリはデフォルトではbower_componentsというフォルダにインストールされます。
これを変更することが可能です。
プロジェクトの直下に .bowerrcというファイルを作成して以下を入力して保存します。
{
  "directory": "lib"
}


他にも変更可能なオプションがあり、例えばプロキシの設定もこのファイルで設定可能です。
詳しくはConfiguration · Bowerを御覧ください。

最後に

どうでしょうか?昨日書いたGruntよりは簡単につかえそうじゃありませんか?
Gruntといい今回のBowerといい、Web制作でもプログラミングの考え方が浸透してきています。
HTMLやCSSをいじるだけの人もさらなるスキルアップにはこういうプログラミングでは当たり前のようにやっている「楽するための工夫」を考えないといけないのかも知れません。
そのためにはまずは「黒い画面」とお友達になりましょう 笑。慣れれば可愛いやつですよ!笑

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)
  • Popular Posts