ここまでの回では、npmを部品を取り寄せる道具として見てきました。この回では、もうひとつの顔——作業を走らせる道具を1回体験します。題材は「SassをCSSに変換する」。これが分かると、世の中のプロジェクトがnpm run buildで何をしているのかが読めるようになります。
scripts欄を先に見ておくと、この回はすっと入りますビルドとは何をすること？
ブラウザが読めない形式で書いたものを、ブラウザが読める形式に変換することです。
今回の例だと、.scssファイルはブラウザが理解できません。だから.cssに書き出す必要があります。この「書き出す」作業がビルドです。
| ビルドが無いとき | ビルドがあるとき | |
|---|---|---|
| 書くファイル | style.css | style.scss |
| ブラウザが読むファイル | style.css（同じもの） | style.css（変換で生まれたもの） |
| 保存したあと | 再読みこみするだけ | 変換 → 再読みこみ |
「保存したのに変わらない」の原因が1つ増える——これがビルドを入れることの代償です。だからこの記事では、その一手間を自動化する--watchまで通します。
用意するもの
Node.jsが入っていれば、ほかに必要なものはありません。ターミナルで確認します。
node -v
npm -vどちらもバージョン番号が出ればOKです。出ない場合は、まずNode.jsのインストールから。
npmnpmってなに？——npm installは何をしている？Node.jsとnpmの関係、インストールの話はこちらへ①練習用のフォルダを作る
好きな場所に空のフォルダを1つ作り、ターミナルでその中に移動します。VSCodeでフォルダを開いて、内蔵のターミナル（⌃＋バッククォート）を使うのがいちばん楽です。
mkdir sass-practice
cd sass-practice②package.jsonを作る
npm initで作れます。-yを付けると、全部の質問に「はい」で答えて即座に作ってくれます。
npm init -yフォルダの中にpackage.jsonができました。これがこのプロジェクトの取扱説明書です。
③sassをインストールする
変換を実行してくれる道具を入れます。開発中だけ使うものなので-D（devDependenciesに入れる）を付けます。
npm install -D --save-exact sass--save-exactは「バージョンを^なしのぴったり指定で記録する」オプションです。これを付けると、package.jsonに"sass": "1.83.0"のように書かれます（付けないと"^1.83.0"になります）。
^の便利さの裏にあるリスクと対策——なぜ固定するのか毎回--save-exactを打つのが面倒なら、フォルダの中に.npmrcというファイルを作って1行書けば、以降は自動で固定されます。
save-exact=true④ファイルを2つ用意する
変換のもとになる.scssと、変換先のフォルダを作ります。
mkdir src csssrc/style.scssを作って、Sassらしい書き方を入れてみます。
$main-color: #ff8a3d;
.card {
padding: 16px;
border: 2px solid $main-color;
&__title {
color: $main-color;
font-size: 20px;
}
&:hover {
background: #fff3ea;
}
}$main-colorが変数、&__titleがクラス名の連結（.card__titleになる書き方）です。変換後にどう展開されるかを、あとで見比べます。
⑤変換してみる
まずはコマンドを直接打ってみます。
npx sass src/style.scss css/style.cssnpxは「インストールしたパッケージのコマンドを呼び出す」ための道具です。これを付けないとsass: command not foundと言われます（そのパッケージはこのフォルダの中にしか入っていないので、名前だけでは見つけられません）。
うまくいくとcss/style.cssができています。開いてみてください。
.card {
padding: 16px;
border: 2px solid #ff8a3d;
}
.card__title {
color: #ff8a3d;
font-size: 20px;
}
.card:hover {
background: #fff3ea;
}変数は実際の値に置きかわり、&__titleは.card__titleという平らなクラス名に展開されました。 これがSassのやっていることの正体です。ブラウザは、こちらのファイルだけを読みます。
⑥scriptsに登録して短く呼べるようにする
毎回長いコマンドを打つのは現実的ではないので、package.jsonのscriptsに名前を付けます。
{
"scripts": {
"build": "sass src/style.scss css/style.css",
"watch": "sass --watch src/style.scss css/style.css"
},
"devDependencies": {
"sass": "1.83.0"
}
}これで短く呼べます。
npm run buildnpm runと打つだけで、そのプロジェクトで実行できる作業の一覧が出ます。初めて触るプロジェクトで「何ができるのか」を知りたいときに便利です。
⑦--watchで自動化する
もう1つ登録したwatchを実行してみてください。
npm run watchコマンドが終わらずに待機状態になります。この状態でsrc/style.scssを編集して保存すると、保存した瞬間に変換が走ります。ターミナルに変換のログが流れるはずです。
これで「保存 → 変換 → 再読みこみ」の真ん中が自動になり、ビルドがない状態とほぼ同じ手数で作業できます。止めるときはターミナルでCtrl + Cです。
⑧node_modulesはGitに入れない
インストールするとnode_modulesという巨大なフォルダができます。ここはpackage.jsonから復元できるので、Gitで管理しません。.gitignoreというファイルを作って書いておきます。
node_modules/逆に、package.jsonとpackage-lock.jsonは必ずGitに入れます。この2つがあれば、別のパソコンでもnpm installだけで同じ状態が復元できます。
つまずきやすいところ
| 症状 | 原因と対処 |
|---|---|
sass: command not found | npxを付ける、またはscriptsに書いてnpm runで実行する |
npm run buildでMissing scriptと出る | package.jsonのscriptsに名前が無い。綴りを確認 |
| CSSファイルができない | 出力先のフォルダ（css）が無い。先にmkdir cssする |
| 変換は成功するのに画面が変わらない | HTMLのlinkが.scssを指していないか確認。読むのは.cssのほう |
| watchが効かない | 待機状態のまま別のターミナルで保存していないか。フォルダの場所も確認 |
これが分かると読めるようになるもの
ここでやったことは、規模が大きくなっても構造は同じです。
- Reactなどのフレームワーク——
npm run buildで、ブラウザが読める形に書き出しています - Tailwind——使ったクラスだけを集めてCSSを書き出す、これもビルドです
- 画像の圧縮・TypeScriptの変換——どれも「元のファイル → 変換 → 配るファイル」の形
つまり初めて見たプロジェクトでも、package.jsonのscriptsを読めば何が起きるか見当がつくようになります。これがこの回のいちばんの持ち帰りです。
このレッスンのまとめ
- ビルド＝ブラウザが読めない形式を、読める形式に変換すること
- 直接打つときは
npx sass ...、scriptsに書けばnpm run buildで短く呼べる --watchを付けると保存した瞬間に変換が走る（止めるのはCtrl + C）- インストールは
--save-exactでバージョンを固定する（.npmrcに書けば自動） node_modulesはGitに入れない。package.jsonとpackage-lock.jsonは必ず入れる
npm run buildの正体が分かると、GitHubで見かけたプロジェクトを自分の手で動かせるようになります。