Node.js と npm ― 点検項目のデータを、ブラウザの外でチェックする

点検チェックシートを、1つのファイルから役割ごとのファイルに分けました。あわせて Node.js と npm を使い、点検項目のデータに書き間違いがないかを、コマンド1つで確かめられるようにしました。基準値の min と max を逆に書いてしまっても、現場に出す前に気づけます。

前回は HTML・CSS・JavaScript だけで、1ファイルの点検画面を作りました。今回はその JavaScript を、ブラウザの外でも動かします。

Node.js は「ブラウザの外の JavaScript」
1ファイルを、役割ごとに分ける
export と import でつなぐ
Node.js で点検項目をチェックする
npm と package.json
ハマりどころ
1. npm init が “type”: “commonjs” を入れてくる
2. ファイルを分けたら、ダブルクリックで開けなくなった
まとめ

Node.js は「ブラウザの外の JavaScript」

JavaScript は、もともとブラウザの中で動く言語です。Node.js は、それを PC のコマンドから動かせるようにしたものです。画面はありませんが、そのかわりファイルの読み書きができます。

JavaScript を動かす場所として、画面を扱うブラウザと、PC のコマンドで動く Node.js を並べた図 — Node.js は、ブラウザの外で JavaScript を動かすしくみ

フロントエンドの開発で Node.js が欠かせないのは、開発の道具のほとんどが Node.js で動いているからです。次回使う Vite も、のちの回で使うコードの整形やテストの道具も、Node.js の上で動きます。作ったツールを使う人の端末に Node.js は要りません。必要なのは作る人の PC だけです。

インストールは公式サイトから、LTS（長期サポート版）と書かれた方を選ぶのが無難です。入ったら、コマンドで版を確かめます。npm は Node.js と一緒に入ります。

$ node --version
v25.2.1
$ npm --version
11.6.4

（この記事を書いた PC での表示です。版の数字は環境によって違います）

1ファイルを、役割ごとに分ける

まず、前回の index.html（213行）を分けました。CSS は style.css へ。JavaScript は「データ」「判定のルール」「画面と操作」の3つに分けて、src フォルダに入れました。

1ファイルの index.html を、index.html・style.css・src の3つの JavaScript・チェック用スクリプト・package.json に分けた図 — 1ファイルを、役割ごとのファイルに分けた（行数は実際のもの）

分け方で大事にしたのは、画面に触る部分と、触らない部分を分けることです。items.js（点検項目のデータ）と judge.js（基準内かの判定）は、画面のボタンや入力欄を一切使いません。だから、画面のない Node.js でもそのまま動きます。

export と import でつなぐ

分けたファイルどうしは、export（外に出す）と import（借りてくる）でつなぎます。このしくみをモジュールと呼びます。

// src/judge.js（出す側）
export function judge(item, value) {
  if (item.type === 'okng') return value === 'ok';
  return value >= item.min && value <= item.max;
}

// src/main.js（借りる側）
import { MACHINE, ITEMS } from './items.js';
import { judge, parseNumber } from './judge.js';

main.js（ブラウザ）と check-items.js（Node.js）が、どちらも items.js と judge.js を import している図 — export した部品を、ブラウザ側と Node.js 側の両方が import する

HTML 側は、<script> に type="module" を付けて、入口の main.js だけを読み込みます。main.js が必要なファイルを順にたどってくれます。

<link rel="stylesheet" href="style.css">
...
<script type="module" src="src/main.js"></script>

ついでに、前回のハマりどころ「空欄が 0 として判定される」の対策も judge.js に移しました。入力欄の文字を数値に変える parseNumber が、空欄や数字でない文字には null（未回答）を返します。画面のコードから判定の決まりごとが消えて、読みやすくなりました。

Node.js で点検項目をチェックする

点検項目は、設備ごと・現場ごとに書きかえていくデータです。書きかえるたびに画面で全部試すのは大変なので、間違えやすいところを Node.js で機械的に確かめるスクリプト scripts/check-items.js を作りました。

id が重複していないか（記録の取り違えのもと）
数値の項目に min と max があり、min が max より小さいか
単位 unit が書いてあるか、type が okng か num か
判定のルールが境目で正しいか（20℃ ちょうどは良、60℃ は否、空欄は未回答など6通り）

import { ITEMS } from '../src/items.js';
import { judge, parseNumber } from '../src/judge.js';

for (const item of ITEMS) {
  if (ids.has(item.id)) errors.push(`${where}: id が重複しています`);
  ...
  if (item.min >= item.max) errors.push(`${where}: min (${item.min}) が max (${item.max}) 以上です`);
}
...
if (errors.length) {
  console.error(`NG: ${errors.length} 件の問題があります`);
  process.exit(1);   // 失敗として終わる
}

画面と同じ items.js と judge.js を import しているのがポイントです。チェック用に別のデータを用意するのではなく、本番で使うデータそのものを確かめています。

実行した結果です。右は、わざとエア圧の基準を逆にし、id を重複させたデータで試したものです。

npm run check を実行した結果。正しいデータでは OK、エア圧の基準を逆にし id を重複させたデータでは NG が2件出る — npm run check の実際の出力。右はわざと基準を逆にし、id を重複させたもの

失敗したときに process.exit(1) で終わるようにしておくと、ほかの道具から「失敗した」とわかります。のちの回で、変更を送るたびに自動でチェックを走らせる（CI）ときに、そのまま使えます。

同じチェックを、ブラウザで触れるようにしました。表の値を書きかえたり、下のボタンを押したりしてみてください。

npm と package.json

npm は、Node.js のプロジェクトを管理する道具です。主な仕事は2つあります。

パッケージ（人が作った部品）を入れる：npm install で取ってきて、node_modules フォルダに置く
よく使うコマンドに名前を付ける：npm run check のように短く呼べる

その設定を書くのが package.json です。プロジェクトのフォルダで npm init -y を実行すると作られます。

package.json の中身と、name・version・private・type・scripts それぞれの意味を書き添えた図 — package.json は、プロジェクトの名札と、よく使うコマンドの置き場

"private": true：社内向けのツールを、うっかり npm の公開サイトに出してしまわないための印
"type": "module"：このプロジェクトの .js は import / export で書く、という宣言（下のハマりどころ参照）
"scripts"：npm run check で node scripts/check-items.js が動く

今回はまだパッケージを1つも入れていないので、node_modules はありません。次回、Vite を入れるとできます。node_modules は npm install でいつでも作り直せるので、git には入れません（.gitignore に書いておきます）。

ハマりどころ

npm init が “type”: “commonjs” を入れてくる

npm init -y で作られた package.json には、"type": "commonjs" が入っていました。CommonJS は、import / export より前からある Node.js の古い書き方です。このまま実行すると、こう止まります。

$ node scripts/check-items.js
Warning: Failed to load the ES module: ...\scripts\check-items.js.
Make sure to set "type": "module" in the nearest package.json file
or use the .mjs extension.
...
SyntaxError: Cannot use import statement outside a module

エラーの文がそのまま答えを書いてくれています。"type": "module" に直したら動きました。ブラウザ用のコードは import / export で書くので、Node.js 側もそろえておくのがわかりやすいです。

ファイルを分けたら、ダブルクリックで開けなくなった

前回までは index.html をダブルクリックすれば動きました。モジュールに分けたあと同じように開くと、見出しだけで点検項目が1つも出ません。ブラウザの開発者ツール（F12）のコンソールには、こう出ていました。

Access to script at 'file:///…/tenken_check/src/main.js'
from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: ... http, https, ...