Bower(フロントエンド用パッケージマネージャー)の導入方法と使い方

Bower(フロントエンド用パッケージマネージャー)の導入方法と使い方

おじいちゃん

おじいちゃん

こんにちは、おじいちゃんです。

今回はTwitter社が作成しているフロントエンド用パッケージマネージャー、Bowerの導入方法と使い方について説明したいと思います。

Bowerとは

Twitter社が作ったフロントエンド用のパッケージマネージャで、必要なライブラリを簡単にインストールすることができます。

bower公式サイト
http://bower.io/

可愛いロゴですね。

Bowerをインストールするには、Node.jsのインストールが必要になります。
Node.jsのインストール方法については、下記の記事を参考に導入してみてください。

「いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜」

Bowerをインストール

それでは、npmを使ってBowerをインストールしてみましょう。
ターミナルを起動して下記コマンドを実行してみてください。

npm install bower -g

これでBowerのインストールが終わりました。
下記コマンドを実行すると、インストールしたBowerのバージョンが分かります。

bower -v

bower.jsonを作成

まずはBowerから追加したライブラリ情報を保存してくれる、bower.jsonを作成しましょう。bower.jsonを作ることで、保存したライブラリを一括でインストールすることができます。

下記コマンドでbower.jsonを作成してみてください。

bower init

いくつか質問されますが今回はすべてEnterで問題ありません。
質問に関しては下記記事にまとめられているので確認してみてください。

Bowerまとめ(概要・導入・コマンド一覧)
http://qiita.com/oreo3@github/items/eb790fc091aa28af8d33

質問にすべて答えるとbower.jsonが作成されます。

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

jQueryをインストールしてみましょう。

bower install jquery --save

bower_componentsフォルダが作成されて、jQueryが追加されます。

このようにして簡単にライブラリをインストールすることができます。

ライブラリインストール時に–saveを追記してあげることで、インストールしたいライブラリ情報がbower.jsonに追加されます。
同じ手順で、使用したいライブラリを追加していきましょう。

bower.jsonに追記したライブラリをすべてインストールするには、下記コマンドを入力してください。

bower install

その他コマンド

  • ライブラリのバージョンを指定
bower install ライブラリ名#バージョン
  • ライブラリを検索
bower search ライブラリ名
  • キーワードから該当するものを選出
bower lookup ライブラリ名
  • bower.jsonに記載されているライブラリを確認
bower list

まとめ

以上がBowerの導入方法と簡単な使い方になります。

Bowerを使って、よりよい開発環境作りをしてみてはいかがでしょうか。

それでは、また!

 

【おじいちゃん25歳、開発中】

Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ

ブラウザ対応が簡単に!「modernizr.js」の機能と利用方法

アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方

Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

おじいちゃん
おじいちゃん フロントエンドエンジニア / 後藤 寛一

フロントエンドエンジニアのおじいちゃんと言います。本当は24歳です。よろしくお願いします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL