近年の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のコンパイルを例に使い方を説明してきます。
INDEX
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をインストールすることをお勧めします。
プロジェクトを作成
それでは実際にnpm-scritsを利用してSassをcssにコンパイルする機能を作ってみましょう。
まずはデスクトップなど好きな場所に移動して、練習用のフォルダを作成し、カレントディレクトリをプロジェクトフォルダに移動しましょう。
手動でフォルダを作成することも問題ありませんが、下記のコマンドを実行することでもフォルダを作成できます。mkdir
がフォルダを作成するコマンドで、mkdir
の次に記述した名前のフォルダが作成されます。cd
がチェンジディレクトリの略称でルートディレクトリから見て、cd
の次に記述されているフォルダに移動します。
※ 階層が上がる場合は「../」と記述します。
# フォルダを作成
$ mkdir npm-practice
# ルートディレクトリを新しく作成した「npm-practice」に移動
$ cd npm-practice
package.jsonを作成する
テスト用のプロジェクトを作成したら、「package.json」を作成するために下記のコマンドを実行します。
いくつか質問が返されますが全ての質問にエンターを押してしまって大丈夫です。
$ npm init
npm init とは
npm init
コマンドは、npmで管理するプロジェクトの初期化コマンドのことで、実行するとpackage.json
がルートディレクトリに生成されます。
npm-scriptsを使ったコーディングにはpackage.json
が必ず必要になるため、プロジェクトを立ち上げる際にはじめに行うおまじないのようなものだと思っていただくのが良いかと思います。
またnpm init
コマンドを実行すると、プロジェクトのパッケージ名などいくつか質問が表示されますが全てEnterを押してしまって構いません。
そうすると以下のように記述が書かれたpackage.json
ファイルが作成されます。
今回質問された項目は、コーディングを行う際にはほとんど関係のない項目のため、項目の説明については割愛させていただきます。
{
"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
npm i -D とは
npm i -D パッケージ名
はnpmでパケージをインストールする際のコマンドです。npm i -D パッケージ名
のようにnpm i -D
の後にパッケージ名を入力することで、指定したパッケージをインストールできます。
実はnpm install --save-dev パッケージ名
を省略したコマンドで、i
がinstall
・-D
が--save-dev
の略称で「devDependencies」の中にパッケージをインストールするというオプションになります。
※「devDependencies」については後ほど解説します。
そうすると「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/
npx とは
npx
はローカルにインストールしたパッケージを実行するコマンドです。npx
の後に実行するパッケージ、実行する処理を記述することで実行することができます。
今回のコマンドは「src/sass/」というフォルダの中のファイルを「dist/css/」の中にcssとしてコンパイルするという処理を行なっています。
※実際のnpm-scriptsではnpx
は利用せずpackage.jsonに処理を記述してタスクを実行するという流れで開発を行います。詳しくは後ほど解説します。
dist とは
「dist」とは「distribution」の略で「配布・公開」という意味があります。
webやプログラミングをする人の現場では、実際にサーバーにデプロイするファイルのことを指す用語として使われています。
ちなみに「style.scss」が入っている「src」ファイルはサーバーにはアップしない開発用のコードが入っているファイルとして使われています。
タスクを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
npm run とは
package.json
のscripts
に登録している処理を実行できるコマンドです。npm run <スクリプト名>
で登録されているスクリプトを実行することができます。
パッケージのオプションを追加する
先ほど「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を始めたい方・改めて理解を深めたい方の参考になれば幸いです。