すこしふしぎ．

VR/HI系院生による技術ブログ．まったりいきましょ．（友人ズとブログリレー中．さぼったら焼肉おごらなきゃいけない）

【javascript】npmとbower【ライブラリ管理】

javascript

おはようございます．1000chです．

やー，Apple Event，面白かったですね． 注目度が高いおかげで，接続不安定でぐぬぬなシーンが多かったです． Access Deniedと戦いながら頑張って視聴しましたよー．

apple event

iPhoneは6と6 plusが登場していました． ハードウェア面での進化が結構すごいなーという印象です． まさに「コンデジとかもういらないよね！」って感じのカメラ機能でしたね． しかしplusは画面がデカくてGalaxy感がありますねw

そしてなにより，まさかのApple Watchが発表されました！！

f:id:ism1000ch:20140910041317j:plain

掲載元

脈拍センシングができたり充電ケーブルの接続がかっこ良かったりするのですが， なにより本体横のダイヤルを用いたズーム動作UIがクールでしたね． 2015春から，値段も$349~ということでこれは要checkな感じです．

こんなん書いてる間に本家も更新されていましたw

参考：apple

iPhoneモデル比較のページからiPhone5さんが消えており，僕は悲しいです(´・ω・`)

本題

javascriptのライブラリ管理ツール，npmとbowerの違いについて調べてみたのでまとめときます．

npm

npmとは？

node.jsで使用されるライブラリ管理ツールです。 pythonならpip、rubyならgem、perlならcpanに当たるnode.js版という感じです。 macでいえばbrew，ubuntuでいえばapt-getってとこですね． 参考はこちら

使い方

各種jsライブラリを簡単に管理できます．代表的コマンドは以下．

  • ライブラリのインストール
$ npm install <lib-name>
  • ライブラリのアンインストール
$ npm uninstall <lib-name>
  • インストール済みライブラリの確認
$ npm list

グローバルとローカル

-g オプションでグローバルインストールとなり、例えば~/node_modulesにインストールされ、-g 無しの場合は、ローカルのnode_modulesフォルダ内にインストールされます。 プロジェクトのみで使うライブラリ(express, socket.io, etc)はローカルに，全体的に使いたいライブラリ（hotnode, coffeescript, etc）はグローバルに入れておくとよいかと思います．

$ npm install -g <lib-name>  // グローバルインストール
$ npm install <lib-name>     // ローカルインストール

package.json

npmコマンドで各種ライブラリを簡単にインストールできますが，複数環境で共有する際にいちいち手動でインストールするのは面倒ですね． nomでは，package.jsonファイルにインストールしたいライブラリを記述し，npm installを叩くと一括でインストールすることができます．これにより，package.jsonのみ用意すれば複数環境でライブラリを共有することができるようになります．

package.jsonの例

{
  "name": "test_grunt",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-coffee": "^0.11.1",
    "grunt-contrib-uglify": "^0.5.1",
    "uglify-js": "^2.4.15"
  }
}

なお，package.jsonは npm init でその雛形を作成することができます．

//対話的にpackage.jsonの生成開始
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (test) 1000ch-test
version: (0.0.0)
description: npm-test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/masa/test/package.json:

{
  "name": "1000ch-test",
  "version": "0.0.0",
  "description": "npm-test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

またnpm install <lib-name> --save とすることで，ライブラリインストールと同時にpackage.jsonにそのライブラリ名を追記することができます．アンインストール時の設定を更新する際もnpm uninstall <lib-name> --saveとなるので注意してください．

同様にnpm install <lib-name> --save-devとすることで、開発時にしか使わないライブラリとしてpackag.jsonに記述することもできます．テスト関連のライブラリなど，本番環境で必要ないライブラリはdevとしてインストールしておくと，本番構成を汚すこと無く利用できますね．

bower

bowerとは？

npmは非常に便利なツールですが，サーバサイド・クライアントサイドを区別してのライブラリ管理ができません．node.js向けのツール（ex.express）とクライアントむけのライブラリ（ex.jQuery）が混在していたんですね．

そこでクライアントサイドのライブラリの管理に特化して生まれたツールがbowerです． このような経緯があるので，基本的にbowerの使い方はnpmと同様です．

bowerの登場を受け，現在npmは基本的にサーバサイドjsの為のライブラリの管理に使われています．

なお，npm,bowerの技術的違いに関してはこちらを参考． Difference between Bower and NPM? - Stack Overflow

使い方

基本的にnpmと同様です． 参考はこちら．

Bower入門(基礎編) - from scratch

  • ライブラリのインストール
$ bower install <lib-name>
  • ライブラリのアンインストール
$ bower uninstall <lib-name>
  • インストール済みライブラリの確認
$ bower list

npmにおけるpackage.jsonは、bowerではbower.jsonとなります。

{
  "name": "bower_test",
    "version": "0.0.0",
    "authors": [
      "user_name"
      ],
    "license": "MIT",
    "ignore": [
      "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
      ],
    "dependencies": {
      "EaselJS": "*"
    },
    "devDependencies": {
      "EaselJS": "*"
    }
}

npmを元として作られているので，ぶっちゃけほっとんど一緒ですね． どんなファイルを管理するかだけ，使い手側で気をつけてあげれば良さそうです．

まとめ

  • npm：サーバ向けjsライブラリ管理につかう
  • bower：クライアント向けjsライブラリ管理につかう
  • 基本的に使い方は一緒
  • Apple Watch 欲しい