ウェブ制作の現場では作業の自動化が流行っています。「Gulp」「Grunt」などのタスクランナーや「webpack」などのビルドシステムなどのツールにより人力の作業を減らすことができ、生産効率や品質の向上につながります。

どちらもNode.jsのモジュールとして動作するツールですが、実はこれらのタスクランナーを使わずとも、Node.jsインストール時に付属するnpm(Node Package Manager)を使用すれば、タスク処理が実現できます。

npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。Gulpやwebpackは有用ですが、npm-scriptsと併用することでさらに便利になります。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。

そもそもnpm-scriptsとは何か？

npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。

▼package.jsonファイル

{
  "scripts": {
    "hoge": "echo 'Hello world!!'"
  }
}

上のようにpackage.jsonファイルに記述しておけば以下のコマンドでエイリアスを実行可能になります。これがnpm-scriptsです。

※上記の例ではechoコマンドを使用していますが、OS特有のコマンドを使用した場合、環境によって動作しない場合があります。UNIXのコマンドやWindowsのコマンドを使用する際は気をつけましょう。

npm-scriptsの使い方

SassとTypeScriptのビルドを例にnpm-scriptsの使い方をさらに詳しく解説します。

1. モジュールのインストール

SassとTypeScriptのビルド用モジュールをそれぞれインストールします。プロジェクト単体で使用するモジュールとしてインストールしたいのでオプションに--save-dev(ショートカットは-D)を指定します。

npm i -D node-sass
npm i -D typescript

2. モジュールのコマンド実行

インストールが完了したのでnode-sassのコマンドを実行してヘルプを表示させましょう。

コマンドが見つからずエラーが表示されました。--save-dev(もしくは-D)でインストールしたモジュールのコマンドは、グローバルなコマンドとして実行することができません。npm-scriptsとして記載することで実行可能です。

▼package.jsonファイル

{
  "scripts": {
    "scss:help": "node-sass --help"
  }
}

追加したscss:helpコマンドをnpm run scss:helpと入力して実行してみます。npm-scriptsに記述したタスクはnpm run タスク名と入力することで実行可能です。

無事node-sassのヘルプが表示されました。このようにモジュールの機能はGulpやGruntを介せずともnpm-scriptsから使用可能です。

3. scriptsの整理術

npm-scripts記述においてのちょっとした整理術を紹介します。まず実際にwatchするためのnpm-scriptsをpackgage.jsonに記載します。

{
  "scripts": {
    "watch:scss": "node-sass ./scss --output ./css -w",
    "watch:ts"  : "tsc -w"
  }
}

SassとTypeScriptをそれぞれwatchするためのコマンドが完成しました。実行するためには以下のコマンドを実行します。

※TypeScriptのwatchを始める前にtsc --initコマンドなどでtsconfig.jsonを用意しておいてください。

npm run build:scss & npm run build:ts

シェルスクリプトは&で接続することで並列処理、&&では直列処理を行うことができます。しかし、コマンドを接続したことで冗長になってしまいました。使用する上で少々不便なので、このコマンドもnpm-scriptsへ追加してしまいます。

{
  "scripts": {
    "watch"     : "npm run watch:scss & npm run watch:ts", // <= 追加
    "watch:scss": "node-sass ./scss --output ./css -w",
    "watch:ts"  : "tsc -w"
  }
}

以下のように短いコマンドでSassとTypeScriptのwatchを同時に実行可能になりました。

npm run watch

同じようにビルドコマンドを追加してひととおり完成です。buildとwatchの行いやすい整理されたnpm-scriptsができあがりました。

{
 "scripts": {
    "build"     : "npm run build:scss && npm run build:ts",
    "build:scss": "node-sass ./scss --output ./css",
    "build:ts"  : "tsc",
    "watch"     : "npm run watch:scss & npm run watch:ts",
    "watch:scss": "node-sass ./scss --output ./css -w",
    "watch:ts"  : "tsc -w"
  }
}

4. おまけテクニック

npm-scriptsにはユーザーのアクションをきっかけに自動で実行してくれるコマンドがいくつか用意されています。その中のpostinstallコマンドを使用することで、より効率良い開発環境構築が行えるようになるので少しだけ紹介します。

postinstallコマンドとはnpm installコマンドの終了時に実行されるコマンドです。

{
 "scripts": {
    "build:ts"   : "tsc",
    "postinstall": "npm run build:ts"
  }
}

この例では、開発者がnpm installを実行してモジュールのインストールが終了したタイミングでbuild:tsコマンドを実行してくれます。postinstallコマンドを用意しておくことで、ちょっとした手間を解消できるのでオススメです。

GulpやGruntは使うべきではないのか？

npm-scriptsを使うことでGulpやGruntを介さずにタスクの実行ができることがわかりました。ではGulpやGruntはもう使うべきではないのでしょうか？　そうとは言えません。npm-scriptsのみを使用する場合のメリットとデメリットを挙げます。

メリット

• Gulpで実行するより処理速度が早い
• 使用可能なnpmモジュールが豊富

デメリット

• 複雑なタスクは行いづらい
• npm-scriptsだけで構築していると、scriptsが大量増産されてpackage.jsonファイルが読みにくくなる
• シェルスクリプトの知識が必要

複雑なタスクを必要としないプロジェクトであればnpm-scriptsのみで完結しますが、普通のプロジェクトではGulpを使用することが一般的です。その場合もnpm-scriptsは活用できます。

Gulpを例に解説しましょう。次の例は前章で作成したpackage.jsonのタスクをGulpで置き換えたものです。

▼package.jsonファイル

{
  "scripts": {
    "build"     : "gulp build",
    "build:scss": "gulp build:scss",
    "build:ts"  : "gulp build:ts",
    "watch"     : "gulp watch",
    "watch:scss": "gulp watch:scss",
    "watch:ts"  : "gulp watch:ts"
  }
}

一見、エイリアスを介すことで煩わしくなったように思えますが、利点があります。

1. gulpコマンドをグローバルにインストールする必要がない
2. gulpコマンドのバージョンがプロジェクト毎に固定されるため、Gulpの大きな仕様変更にも左右されない
3. npmの知識だけあればタスクが実行できる

このように併用することで、より効率の良い環境をつくる事が可能です。Gruntの場合も同様です。

終わりに

意外と知られていないnpm-scriptsの使い方ですが、知っていると非常に役立ちます。筆者もnpm-scriptsを積極的に活用しています。webpackとgulpとnpm-scriptsを組み合わせるのがとても便利です。

npmモジュールの流行り廃りは早いですが、npm自体はしばらくは廃れることもないはずなので、フロントエンドエンジニアの基礎知識としてみなさんも是非この機会に触れてみてください。