SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

HTML/JavaScript開発作業を効率化する便利ツールの活用

Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower

HTML/JavaScript開発作業を効率化する便利ツールの活用 第3回

パッケージ依存性を自動解決

 他のパッケージ管理ツール同様、Bowerは複数ライブラリの依存性を自動的に解決してくれます。例えば、見栄えのよいWebページを手軽に作る機能を提供するCSSフレームワークBootstrapをダウンロードするために、空フォルダでリスト6を実行してみます。

リスト6 BowerでBootstrapをダウンロードする
bower install bootstrap

 リスト6を実行すると、BootstrapがjQueryに依存することをBowerが自動的に判断して、BootstrapとjQueryの両方をダウンロードします。

図3 BootstrapのjQueryへの依存性を自動判断(赤枠部)
図3 BootstrapのjQueryへの依存性を自動判断(赤枠部)

 ダウンロード終了後にbower_componentsを参照すると、Bootstrapと一緒にjQueryもダウンロードされていることがわかります。

図4 BowerでBootstrapをダウンロードするとjQueryもついてくる
図4 BowerでBootstrapをダウンロードするとjQueryもついてくる

 このようにBowerでライブラリをダウンロードすると、そのライブラリが依存する他のライブラリも自動的にダウンロードしてくれます。開発者はライブラリの依存性を意識する必要なく、ライブラリの利用に集中できます。

bower.jsonファイルでライブラリ情報を保存

 ここまでは必要なライブラリを都度bowerコマンドでダウンロードしていましたが、そもそも必要なライブラリが何だったかもいちいち覚えておきたくないものです。Bowerでは必要なライブラリの情報をbower.jsonファイルに保存して、あとからまとめて再ダウンロードさせることができます。

 bower.jsonファイルはリスト7のコマンドで生成できます。

リスト7 bower.jsonファイルを生成するコマンド
bower init

 コマンドを実行すると対話的にプロジェクト名などの情報を入力できます。bower.jsonの例をリスト8に示します。基本的にコマンド画面で入力した内容が反映されます。なお(1)はライブラリ公開時に無視するファイルの設定です。

リスト8 bower.jsonの例
{
  "name": "BowerSample",
  "version": "1.0.0",
  "authors": [
    "CodeZine"
  ],
  "description": "Bower Sample",
  "keywords": [
    "Bower"
  ],
  "license": "MIT",
  "homepage": "http://codezine.jp",
  "ignore": [ ...(1)
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

 bower.jsonにライブラリの情報を保存するには、ライブラリのダウンロード時に「--save」オプションを設定します。

リスト9 bower.jsonにライブラリの情報を保存する
bower install bootstrap --save

 また、開発中にしか使用しないライブラリの場合は「--save-dev」オプションを設定します。

リスト10 bower.jsonに開発時のみ使用するライブラリの情報を保存する
bower install holderjs --save-dev

 bower.jsonが存在するフォルダでリスト9、10を実行すると、リスト11のようにライブラリがbower.jsonのdependencies(1)(2)に、開発時のみ使用するライブラリがdevDependencies(3)(4)にそれぞれ記録されます。

リスト11 bower.jsonに記録されたライブラリ情報
  "dependencies": {    ...(1)
    "bootstrap": "~3.3.4" ...(2)
  },
  "devDependencies": { ...(3)
    "holderjs": "~2.7.1" ...(4)
  }

 ここで(2)(4)の数字はライブラリのバージョンを表します。記号(~、^)と組み合わせて表2のような指定が可能です。

表2 bower.jsonのバージョン指定
指定例 インストールされるバージョン
3.3.4 3.3.4のみ
~3.3.4 3.3.4以上3.4.0未満(3.3.4以降の不具合修正パッチがある場合そちらをダウンロード)
^3.3.4 3.3.4以上4.0.0未満(3.3.4以降のマイナーアップデートがある場合そちらをダウンロード)

 bower.jsonに記録されたライブラリはいつでも再ダウンロードできます。空のフォルダにリスト11の内容を含むbower.jsonを配置してリスト12のコマンドを実行すると、bower.jsonに記録された全てのライブラリを自動的にダウンロードします。

リスト12 bower.jsonの情報からライブラリを自動ダウンロード
bower install

 またリスト13のように--productionオプションをつけて実行すると、開発時のみ必要なライブラリを除外してダウンロードできます。

リスト13 開発時に必要なライブラリを除外してダウンロード
bower install --production

次のページ
インストールされたライブラリをコマンドで管理する

この記事は参考になりましたか?

HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/8765 2015/06/24 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー