ウェブ制作の現場では作業の自動化が流行っています。「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です。
$ npm run hoge
> echo 'Hello world!!'
Hello world!!
※上記の例ではechoコマンドを使用していますが、OS特有のコマンドを使用した場合、環境によって動作しない場合があります。UNIXのコマンドやWindowsのコマンドを使用する際は気をつけましょう。
npm-scriptsの使い方
SassとTypeScriptのビルドを例にnpm-scriptsの使い方をさらに詳しく解説します。
1. モジュールのインストール
SassとTypeScriptのビルド用モジュールをそれぞれインストールします。プロジェクト単体で使用するモジュールとしてインストールしたいのでオプションに--save-dev(ショートカットは-D)を指定します。
npm i -D sass
npm i -D typescript
2. モジュールのコマンド実行
インストールが完了したのでsassのコマンドを登録します。--save-dev(もしくは-D)でインストールしたモジュールのコマンドは、グローバルなコマンドとして実行できません。package.jsonファイル内のscriptsフィールドにコマンドを記載することで実行できるようになります。package.jsonファイルに以下の内容を追記しましょう。
▼package.jsonファイル（一部抜粋）
{
"scripts": {
"sass:version": "sass --version"
}
}
追加したsass:versionコマンドをnpm run sass:versionと入力して実行してみます。npm-scriptsに記述したタスクはnpm run タスク名と入力することで実行可能です。
$ npm run sass:version
> sass --version
1.25.0 compiled with dart2js 2.7.0
$
無事sassのバージョンが表示されました。このようにモジュールの機能はGulpやGruntを介せずともnpm-scriptsから使用可能です。
3. scriptsの整理術
npm-scripts記述においてのちょっとした整理術を紹介します。まず実際にwatchするためのnpm-scriptsをpackgage.jsonに記載します。
{
"scripts": {
"watch:sass": "sass --watch input.scss output.css",
"watch:ts" : "tsc -w main.ts"
}
}
SassとTypeScriptをそれぞれwatchするためのコマンドが完成しました。実行するためには以下のコマンドを実行します。
※TypeScriptのwatchを始める前にtsc --initコマンドなどでtsconfig.jsonを用意しておいてください。
npm run build:scss & npm run build:ts
シェルスクリプトは&で接続することで並列処理、&&では直列処理を行うことができます。しかし、コマンドを接続したことで冗長になってしまいました。使用する上で少々不便なので、このコマンドもnpm-scriptsへ追加してしまいます。
{
"scripts": {
"watch" : "npm run watch:sass & npm run watch:ts", // <= 追加
"watch:sass": "sass --watch input.scss output.css",
"watch:ts" : "tsc -w main.ts"
}
}
以下のように短いコマンドでSassとTypeScriptのwatchを同時に実行可能になりました。
npm run watch
同じようにビルドコマンドを追加してひととおり完成です。buildとwatchの行いやすい整理されたnpm-scriptsができあがりました。
{
"scripts": {
"build" : "npm run build:sass && npm run build:ts",
"build:sass": "sass input.scss output.css",
"build:ts" : "tsc main.ts",
"watch" : "npm run watch:sass & npm run watch:ts",
"watch:sass": "sass --watch input.scss output.css",
"watch:ts" : "tsc -w main.ts"
}
}
4. おまけテクニック
npm-scriptsにはユーザーのアクションをきっかけに自動で実行してくれるコマンドがいくつか用意されています。その中のpostinstallコマンドを使用することで、より効率良い開発環境構築が行えるようになるので少しだけ紹介します。
postinstallコマンドとはnpm installコマンドの終了時に実行されるコマンドです。
{
"scripts": {
"build:ts" : "tsc main.ts",
"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"
}
}
一見、エイリアスを介すことで煩わしくなったように思えますが、利点があります。
gulpコマンドをグローバルにインストールする必要がないgulpコマンドのバージョンがプロジェクト毎に固定されるため、Gulpの大きな仕様変更にも左右されない- npmの知識だけあればタスクが実行できる
このように併用することで、より効率の良い環境をつくる事が可能です。Gruntの場合も同様です。
終わりに
意外と知られていないnpm-scriptsの使い方ですが、知っていると非常に役立ちます。ICSでもnpm-scriptsを積極的に活用しています。webpackとgulpとnpm-scriptsを組み合わせるのがとても便利です。
また、npm-scriptsは多くのエディターでサポートされています。Visual Studio CodeやWebStormだとマウス操作でnpm scriptsを呼び出せます。わざわざターミナルを起動する必要がなく効率的なので、下記の記事を参考にしてくださいませ。
npmモジュールの流行り廃りは早いですが、npm自体はしばらくは廃れることもないはずなので、フロントエンドエンジニアの基礎知識としてみなさんも是非この機会に触れてみてください。