タスクランナーで処理を自動化しよう 〜npmでパッケージをインストール〜

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. タスクランナーで処理を自動化しよう 〜npmでパッケージをインストール〜

タスクランナーで処理を自動化しよう 〜npmでパッケージをインストール〜

タスクランナーで処理を自動化しよう 〜npmでパッケージをインストール〜

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

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

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

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

npmとは

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

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

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

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

package.jsonの作成

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

package.jsonを作成します。

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

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

 

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

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

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

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

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

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

 

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のコマンドの説明が多くなってしまいましたので、パッケージもいくつかを次回に紹介したいと思います。

前後の記事

フロントエンド、プログラマー募集中!<アウラの熱意の源とは…?!>

こんにちは! アウラでエアー猫を撫でながら、デザイナー&プランナー、ディレクター、ライター?その他諸々を担当しております、ミヤケです。 W杯には目もくれず、日々ツール・ド・フランスを見ております。 昨…

IT/Web、クリエイティブ産業の街として注目のバンクーバーでデザインの流行を探る!

みなさんこんにちは!世界を旅する、アウラ海外特派員ウェブデザイナーの松本です。北米を拠点として世界中のアート・ビジネス・食・エンターテイメント・レジャーなど、様々な海外情報を発信してまいります。 さて…

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。