こんにちは！フロントエンドの仁木です。

タスクランナー導入編、前回でNode.jsをインストールするまでを説明しました。

タスクランナーで処理を自動化しよう 〜Node.jsのインストールまで〜

今回はNode.jsのパッケージマネージャー「npm」を使ってパッケージをインストールしていきたいと思います。

npmとは

パッケージマネージャーと言われる、Node.jsのパッケージやライブラリを管理してくれるツールです。

Node.jsのパッケージのインストール・アンインストール、またそれらが依存しているパッケージのインストール・アンインストールを行います。package.jsonを作成し、インストールしたパッケージのバージョンも込みで管理してくれます。

パッケージのインストールはpackage.jsonに記述されたパッケージを一括でインストールする方法と、コマンドラインで１つ１つパッケージをインストールする方法があります。

コマンドラインでパッケージをインストールする

package.jsonの作成

まず始めに、コマンドライン（Windowはコマンドプロンプト、Macはターミナルなど）からプロジェクトのディレクトへ移動します。
今回は例として [~/Sites/npm-test/] というディレクトリにします。

package.jsonを作成します。

コマンドを叩くといくつか質問されますが、全てエンターキーでスキップして大丈夫です。
最後に「Is this OK? (yes)」という質問があるので「yes」と入力します。そうするとディレクトリにpackage.jsonが作成されます。

package.jsonの中身は以下のようになっていると思います。

パッケージのインストール

パッケージのインストールも引き続きコマンドラインから行っていきます。

グローバルインストールとローカルインストール

npmでのパッケージインストールには、全てのプロジェクトで使用できるグローバルインストールと、１つのプロジェクトのみで使用するローカルインストールの２種類があります。

グローバルインストールのコマンド

ローカルインストールのコマンド

DependenciesとdevDependencies

パッケージのローカルインストール時には基本的にpackage.jsonにパッケージを記録するようにします。

また本番環境ではインストールする必要のないパッケージは–save-devを利用します。

これらのコマンドでインストールしたパッケージはpackage.jsonの”dependencies”、もしくは”devDependencies”の項目に記録されます。

例えば、ファイルが更新されると自動でブラウザをリロードしてくれる「browser-sync」をローカルでdevDependenciesでインストールするには以下のようにコマンドを叩きます。

コマンドを叩くとインストールが実行され、ディレクトリ内に「node_modules」ディレクトリが作成されインストールしたパッケージが全てここに格納されています。またpackage.jsonには”dependencies”の項目が作成され、browser-syncのパッケージ名とパッケージのバージョンが記録されています。

さらにパッケージを利用してみましょう。引き続きコマンドラインからbrowser-syncを起動するコマンドを叩きます。

browser-syncが起動するとブラウザからhttp://localhsot:3000にアクセスできるようになり、プロジェクト内のファイルが更新された時に自動でブラウザをリロードするようになります。

package.jsonからパッケージを一括でインストールする

Node.jsのパッケージはpackage.jsonの情報を元にインストールしたいパッケージを一度にインストールすることも出来ます。

package.jsonの”dependencies”と”devDependencies”の項目に記録されているパッケージはnpm installコマンドで一括でインストール可能です。プロジェクトディレクトリにインストールするパッケージが記録されているpackage.jsonをコピーして以下のコマンドを叩きます。

また本番環境で”dependencies”のパッケージのみインストールしたい場合であれば

と、コマンドを叩きます。

これで共同作業者にはpackage.jsonだけで簡単にパッケージを共有することが出来ます。

今回のまとめ

npmはNode.jsのパッケージを利用するのに必須のツールとなりますので、使い方は覚えておきましょう。
今回はnpmのコマンドの説明が多くなってしまいましたので、パッケージもいくつかを次回に紹介したいと思います。