いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール：MEANスタックで始めるWebアプリ開発入門（2）（2/2 ページ）

[中村修太，クラスメソッド株式会社]

モジュール管理ツール「npm」を使ってみよう

npmとは

　「npm」とはNode.jsのモジュールを管理するためのツールです。Node.jsにはさまざまなモジュールが公開されており、npmを使うことで簡単にインストールできます。また、自分でモジュールを作成して公開する場合にもnpmを使用します。

npmの公式ページ

　Node.jsをインストールするとnpmも一緒にインストールされます。次のようにnpmコマンドが実行できれば問題ありません。

% npm -v //バージョン表示
2.1.12

よく使用するnpmコマンド

　ここでよく使用するnpmコマンドについて説明しておきます。

• npm init

　依存ライブラリやプロジェクトの基本情報を記述する、package.jsonを作成するためのコマンドです。名前やGitリポジトリなど、必要な情報を入力するとpackage.jsonを生成します。

% npm init

　このpackage.jsonを共有すれば、他の環境でもnpmを使用して依存ライブラリをインストールすることが可能になります。

• npm install

　Node.js用モジュールをインストールします。インストール時に「--save」オプション、「--save-dev」オプションを使用すると、インストールしたライブラリがpackage.jsonに記述されます。

% npm install ｛モジュール名｝

　｛モジュール名｝を省略した場合には、package.jsonに書いてある依存ライブラリをインストールします。

　また、「-g」オプションを付けるとグローバルインストールとなり、パスが通ってモジュールのコマンドを実行できるようになります。

% npm install -g mocha //テストフレームワークをグローバルインストール
% mocha -h //mochaコマンドが実行できる

• npm publish

　今回は使用しませんが、自作のNode.js用モジュールを公開するときに使用します。手順としては、「Create an Account」でnpmアカウントを作成し、addUserコマンドとpublishコマンドを実行します。

% cd ｛自作モジュールのパス｝
% npm adduser //登録したnpmアカウント情報を入力
% npm publish //モジュールをアップして公開する

　詳細なモジュール作成方法が知りたい方は、npmの「Developer Guide」をご確認ください。

　以上でnpmの基本的な説明は終了です。

ビルドツール「Gulp」を使ってみよう

Gulpとは

　先ほども少し出てきましたが、GulpとはNode.js上で動くタスク自動化のためのビルドツールです。ソースファイルのminify（圧縮）やCoffeeScriptのコンパイルなどを実行できます。Gulpの特徴としては、タスク定義をシンプルなJavaScriptで記述し、動作するのが特徴です。

Gulpの公式ページ

Gulpのインストール

　本連載では今後Gulpを使っていくので、ここでインストールしておきましょう。まずはnpmでgulpモジュールをグローバルインストールします。

% npm install -g gulp

　次に、Gulpを動かすためのディレクトリを作成し、そこで再度gulpモジュールをインストールします。下記のようにgulpコマンドを実行して、CLIとローカルのバージョンが表示されれば準備完了です。

% mkdir -p path/rour/gulp-sample && cd path/your/gulp-sample
% npm install gulp
% gulp -v //インストールバージョン確認
[xx:xx:xx] CLI version 3.8.7
[xx:xx:xx] Local version 3.8.10

Gulpの動作確認

　では試しにGulpを動かしてみましょう。gulp-sampleディレクトリにgulpfile.jsという名前で、次の内容でGulpの設定ファイルを作成します。

'use strict'
var gulp = require('gulp');
 
//watchタスク定義
gulp.task('watch', function () {
    //ファイルが変更されたらメッセージ表示
    gulp.watch('*', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});
 
//デフォルトタスクとしてwatch実行
gulp.task('default', function () {
    gulp.run('watch');
});

gulpfile.js

　ここでは任意のディレクトリ以下のファイル変更を監視し、変更が検知されたらメッセージを表示するだけです。gulpコマンド実行後、gulp-sampleに適当なファイルを作成していろいろといじってみましょう。

% gulp                                                                            [
[16:31:49] Starting 'watch'...
[16:31:49] Finished 'watch' after 6.44 ms
[16:31:49] Finished 'default' after 7.35 ms
File path/rour/gulp-sample/test.js was added, running tasks...
File path/rour/gulp-sample/test.js was changed, running tasks...
File path/rour/gulp-sample/test.js was deleted, running tasks...

　ファイルの追加、変更、削除がハンドリングされてコンソールに表示されています。

　ちなみに、通常はwatchイベントでテストを実行したりコンパイルを実行したりします。

　以上でGulpの設定も完了しました。これでNode.js環境が全て整いましたね。

次回はNode.jsのMVCフレームワーク「Express」について

　今回はMEANスタック要素の一つであり、中心となる技術であるNode.jsについての概要、そしてそのツールであるnpmとGulpについても基本的な使い方について解説しました。今後は、この構成を軸に他の要素について説明していきます。

　次回はMEANスタック要素の一つ、MVCフレーワーク「Express」について解説する予定です。

「MEANスタックで始めるWebアプリ開発入門」バックナンバー

• AngularJSユーザーのためのAngular2超入門
• AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本
• AngularJSの「サービス」で理解するDI（Dependency Injection：依存性注入）の基本
• Web開発者が覚えておきたい、よく使うAngularJSのビルトインディレクティブ12選まとめ
• AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方
• いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方
• いまさら聞けないMongoDBの基礎知識とインストール、CRUD操作の基本、モデリングツールMongooseの使い方
• Node.jsのMVCフレームワーク「Express」における静的ファイル、ルーティング定義、セッション管理、エラー処理
• Node.jsのMVCフレームワーク「Express」の基礎知識とインストール
• いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール
• LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成

著者紹介

中村修太（なかむら しゅうた）

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。