【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

近年のWeb制作ではタスクランナーと呼ばれる、コーディングの自動化がスタンダードになってきています。

その中でも今まではGulpを用いたコーディングが主流となっていましたが、フロントエンジニアの学習ロードマップとして有名なroadmap.shのウェブサイトに掲載されている「Frontend Developer 2023年版」からGulpの存在が消えてしまい「npm-scripts」が推奨されていることなど、さまざまな要因からGulpではなく「npm-scripts」を使った制作環境の構築が今後は主流になっていきそうです。

npm-scriptsをはじめとしたタスクランナーは「node.js」や「npm」・「package.json」などの知識も必要ですが、今までなんとなく理解していたつもりで使っていたため、これを機に「npm-scripts」を利用する上で欠かせない「npm」周りの知識を再度理解を深めるべく、初心者の方でもわかるようにそれぞれの言葉の意味を説明しつつ、「npm-scripts」をSassのコンパイルを例に使い方を説明してきます。

npm-scriptsとは

「npm-scripts」とは、「node.js」のプロジェクトを作成する際に生成される「package.json」の中に記述した「scripts」を「aliasコマンド」として実行できる「npm」の仕組みです。
web制作においての立ち位置としては、「Sassのビルド」や「画像の圧縮」などのタスクランナーとしてだけではなく、ローカルサーバーの立ち上げなどコーディングの開発環境としての役割を担っています。
また「npm-scripts」を利用する際に幾つかの専門知識が必要になるため、それぞれの役割についても説明してきます。
以下の説明は初心者の方でもわかりやすいように、自分の解釈も交えつつ噛み砕いて解説していますので、一度ご自身でも調べてみるとより理解が深まるかと思います。

タスクランナーとは

SassのコンパイルなどWeb制作で必要な処理を、あらかじめプログラムとして登録することで、それらの処理を自動で実行しているツールのことです。
今回は「npm-scripts」をタスクランナーとして利用します。

package.jsonとは

プロジェクト（webサイト）単位で利用する「Node.js」のパッケージに関する情報を記述し、管理するファイルのことです。「package.json」ファイルにプロジェクトで利用しているパッケージや、パッケージの処理を記載していくため、コーディングにおいての設計書のようなファイルになります。

aliasコマンドとは

「aliasコマンド」とはJavaScriptの変数のようなイメージで、長いプログラミングの処理や、よく使うコマンドを使いやすくする為、別名で短いコマンドとして登録するコマンドのことです。
「npm-scripts」では「package.json」に使用するプログラムを「aliasコマンド」として登録し、npmコマンドで実行します。

パッケージ（ライブラリ）とは

ある機能を持ったプログラムのかたまりを一つのパッケージとして定義します。
Sassを利用する場合は「sass」というパッケージをインストールして「package.json」に処理内容を記述することで、簡単に「sass」の機能を使うことができるようになります。

npmとは

「Node Package Manager」の頭文字をとった略称のことで、Node.jsのパッケージを管理するツールです。
上記で説明した「package.json」で管理するパッケージをインストールする機能や、そのパッケージを実行する際に必要になるシステムになります。

Node.jsとは

Node.jsとはWebページ作成などの際に使われるJavaScriptを、サーバー側で動作させる、Javascriptを使った設計手法です。
Node.jsについてはともて奥が深いため、今回に関しては「npm」を利用するために必要な実行環境だと認識していただければいいかと思います。
興味がある方はご自身で調べていただくことをおすすめします。

Node.js・npmをインストールする

npm-scriptsを利用するには「Node.js」と「npm」をパソコンにインストールする必要がありますので、インストールされていない方はインストールを行いましょう。

インストールされているか確認したい方は、下記のコマンドを実行して確認します。
バージョンが表示されたらインストールされている証拠です。

# Node.jsのバージョン確認
$ node -v
# npmのバージョン確認
$ npm -v

バージョンが表示されない方はそれぞれインストールを行なってください。
ちなみにnpmはNode.jsをインストールすると自動でインストールされます。

「Node.js」は公式サイトからもインストールすることができますが、今後の運用を考えるとバージョン管理ツール経由でインストールする方がおすすめです。

下記の記事で「Volta」というNode.jsのバージョン管理ツールのインストール方法を詳しく説明していますので、これを機にバージョン管理ツールからNode.jsをインストールすることをお勧めします。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

プロジェクトを作成

それでは実際にnpm-scritsを利用してSassをcssにコンパイルする機能を作ってみましょう。
まずはデスクトップなど好きな場所に移動して、練習用のフォルダを作成し、カレントディレクトリをプロジェクトフォルダに移動しましょう。

手動でフォルダを作成することも問題ありませんが、下記のコマンドを実行することでもフォルダを作成できます。
mkdirがフォルダを作成するコマンドで、mkdirの次に記述した名前のフォルダが作成されます。
cdがチェンジディレクトリの略称でルートディレクトリから見て、cdの次に記述されているフォルダに移動します。
※ 階層が上がる場合は「../」と記述します。

# フォルダを作成
$ mkdir npm-practice
# ルートディレクトリを新しく作成した「npm-practice」に移動
$ cd npm-practice

package.jsonを作成する

テスト用のプロジェクトを作成したら、「package.json」を作成するために下記のコマンドを実行します。
いくつか質問が返されますが全ての質問にエンターを押してしまって大丈夫です。

$ npm init

{
  "name": "npm-scripts",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

また、npm initに 「-y」というオプションをつけてnpm init -yと実行するとnpm initで質問された項目に全てYesで回答した状態で実行されます。

$ npm init -y

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

package.jsonが作成できたら今度はSassを使用するために必要なパッケージをインストールしましょう。
下記のコマンドを実行してsassをインストールします。

$ npm i -D sass

そうすると「package.json」に下記のような記述が追加されて、「package-lock.json」と「node_modules」がルートディレクトリに作成されていることが確認できれば、インストール完了です。

{
  ...
 "devDependencies": {
    "sass": "^1.57.1"
  }
}

devDependenciesとは

パッケージをインストールする方法は「ローカル」と「グローバル」の2種類あり、devDependenciesがローカル側のインストールになります。
ちなみにグローバルの場合はdependenciesです。

一般的にローカルとグローバルの使い分けとしては、ローカル（自分のPC）でコーディング（開発）を行う際に利用するパッケージはdevDependenciesにインストールし、jQueryなどのサーバーにもアップする必要があるパッケージはdependenciesにインストールすると言われています。
いわゆるタスクランナーとして利用する「sass」などはサーバーにアップしませんので、devDependenciesにインストールを行います。

node_modulesとは

先ほどnpmでインストールしたパッケージが格納されているフォルダのことで、この中にあるパッケージを呼び出して利用しています。
「node_modules」の中身は基本的に直接触ることはありませんので無視して問題ありませんが、削除はしないようにしましょう。

実際に「node_modules」の中を見てみると今回インストールした「sass」のフォルダが入っています。「sass」以外にもいくつかのフォルダが入っていますが、これは「sass」に依存したファイルが自動的に生成されていて、「sass」をアンインストールするとそれらも一緒に削除されるようになっています。

package-lock.jsonとは

それぞれの開発者が異なる環境で開発を行なっていても、全ての環境で同じものをインストールできるために必要なファイル。
主にチーム内で共有する際に、同じ環境を構築するために必要になるファイル。
基本的に直接触ることはありませんので無視していて問題ありませんが、削除はしないようにしましょう。

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

パッケージのインストールができたらパッケージのアンインストールについても学んでおいた方が後ほど役に立つので、先ほどインストールしたsassを一度アンインストールしてみましょう。

実際にアンインストールする前にアンインストールされたことがわかりやすいように、package.jsonを開いてdevDependenciesの中にsassが記載されていることを確認してみましょう。

それでは下記のコマンドでアンインストールを実行します。

$ npm uninstall -D sass

実行したら先ほど開いておいたpackage.jsonを確認してみましょう。
devDependenciesの記述が丸ごと削除されていたらアンインストール成功です。

ちなみに先ほど説明したnode_modulesの中にあったファイルも一式消えているので、確認してみましょう。

パッケージを再インストール

パッケージのアンインストールが確認できたら先ほどと同じ方法でインストールして、元の状態に戻しておきましょう。
下記のコマンドでsassを再度インストールします。
そうするとpackage.jsonとnode_modulesも元の状態に戻っています。

$ npm i -D sass

タスク（パッケージ）を実行する

パッケージのインストールが完了したら、いよいよSassをcssにコンパイルしてみましょう。
まずは下準備としてSassファイルを下記のようなディレクトリで作成してみましょう。

npm-scripts
└src
 └sass
  └style.scss

コマンドで作成する場合はこちら↓

$ mkdir -p src/sass/ && touch src/sass/style.scss

scssファイルを作成したら「style.scss」ファイルに下記のように適当なscssのコードを記載してください。

div {
  color: aqua;
  & p {
    color: gold;
  }
}

scssをcssにコンパイルする

ファイルの準備が整ったら早速「scss」を「css」にコンパイルしてみましょう。
下記のコマンドを実行すると「dist/css/」というフォルダが自動で生成され、その中にコンパイルされた「style.css」が作成されます。

$ npx sass src/sass/:dist/css/

タスクをpackage.jsonに登録する

先ほど「style.scss」を「style.css」にコンパイルする処理を成功しましたが、実はまだ「npm-scripts（タスクランナー）」としては完成していません。
sassのコンパイルなどの頻繁に使うコマンドは、「package.json」にタスクとして登録し、そのタスクを実行するという流れをとることでより分かりやすく、簡単に処理を実行することができます。

それでは「package.json」を開き「scripts」の中に、先ほどnpxで実行したコマンドを下記のように追加してみましょう。
※「scripts」に書かれている「test」は必要ないの削除してしまって構いません。

{
  ...
  "scripts": {
    "sass": "sass src/sass/:dist/css/"
  },
  ...
}

package.jsonにタスクを追加したら、style.scssの中身をコンパイルできたか分かるように、なんでもいいので変更してみましょう。

div {
  color: aqua;
  & p {
    color: gold;
  }
  & h1 {
    color: green;
  }
}

それでは登録したタスクを下記のコマンドで実行してみましょう。
実際にpackage.jsonに登録する前のコードより記述が短くなり、使いやすくなっているのが分かるかと思います。
それではstyle.cssを確認し、中身が正しく変更されていたら「npm-scripts」の完成です。

$ npm run sass

パッケージのオプションを追加する

先ほど「package.json」にタスクを登録して「npm-scripts」が完成しましたが、現状のままではまだタスクランナーとしては使い勝手が悪い部分があります。

パッケージにはいくつかのオプションが用意されていて、オプションを使いこなすことでより使い勝手の良い開発環境を作ることができます。

「npm-scripts」においてオプションは必須の知識になりますので、オプションを設定してみましょう。

自動でコンパイルする

現状のsassの機能としてはコンパイルする際に毎回コマンドを実行する必要があるため、対象のファイルを監視して、変更が保存されたタイミングで自動でコンパイルできるようにオプションを追加してみましょう。

オプションは処理の後ろに「--<オプション名>」を追加することで実行できます。

scriptsに「--watch」を追加します。

{
  ...
  "scripts": {
    "sass": "sass src/sass/:dist/css/ --watch"
  },
  ...
}

追加したら再度下記のコマンドを実行し、style.scssを好きなように編集して保存してみましょう。
style.cssが正しく変更されていたら成功です。

$ npm run sass

ちなみに「watch」機能を実行している場合は他のコマンドが使えないので、停止したい場合は「Ctrl + C」で処理を停止することでコマンドが利用できるようになります。

プロジェクトメンバーに共有する

web制作は運用も含めると複数のメンバーが関わることになりますので、最後に自身が作成したプロジェクトをチームメンバーに共有する方法を紹介します。

今回は練習用に一人二役で擬似的にプロジェクトを共有するため、あらかじめ適当なディレクトリを作っておきましょう。

$ mkdir new-project

必要なファイル

今回作成したsassのプロジェクトで、共有するために必要なファイルは以下の3つです。

npm-scripts
  └package.json
  └package-lock.json
  └src/以降全て

node_modulesとdistについては後ほど共有した際にインストールコマンドを実行すると自動で生成されるため、共有する必要はありません。
また、「npm-scriptsプロジェクト」をgitで管理する際はnode_modulesとdistは.gitignoreで管理対象から除外しましょう。
node_modulesはファイルがかなり多くプロジェクトの容量が無駄に大きくなり、push・pullする際にも余計な時間がかかってしまいます。
distについてはコンフリクトの原因にもなりやすいため、gitの管理から外しておいた方が良いでしょう。

インストール

それでは上記で説明した必要なファイルを新しく作ったプロジェクトフォルダにコピーしましょう。

プロジェクトフォルダのルートディレクトに移動して以下のコマンドを実行して、node_modulesフォルダが生成されていることを確認しましょう。

$ npm install

タスクを実行

新しいプロジェクトでインストールが完了したら、sassのタスクを実行して実際にプロジェクトが機能するか確認しましょう。
下記のコマンドを実行して「style.scssを編集してみましょう。
distフォルダにstyle.cssが正しく変更されていたらプロジェクトの共有が完了です。

$ npm run sass

まとめ

以上でnpm-scriptsのプロジェクトの立ち上げから、プロジェクトの共有までの方法でした。
npm-scriptsを始めたい方・改めて理解を深めたい方の参考になれば幸いです。