検索
連載

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

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回はMEANスタックの中心となる技術、Node.jsについて基本的な部分や環境構築方法、その周辺ツールとしてnpmとGulpを紹介します。

[中村修太，クラスメソッド株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

モジュール管理ツール「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アプリ開発入門」バックナンバー

著者紹介

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

中村修太

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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る