npm run dev を打つと何が起きるか
バイブコーディングでウェブを作り始めると、ほぼ誰もが同じところで最初につまずく。コードは書けたのに、それをどこで見ればいいのか分からない瞬間だ。答えはインターネットへの公開ではなく、まず自分のパソコンの中で立ち上げることで、その入り口が npm run dev という一行だ。プロジェクトのフォルダでターミナルを開いて打つと、開発サーバー（dev server）が起動する。
開発サーバーは、書いたコードをウェブページに変えてリアルタイムで表示するプログラムだ。コマンドを打って数秒後、ターミナルにアドレスが一行出る — 'Local: http://localhost:3000'。これをブラウザのアドレス欄に貼れば、作ったばかりの画面がすぐ現れる。コードを直して保存すると、更新しなくても画面が即座に変わる。開発サーバーがファイルの変更を検知して描き直すからだ。作りながらすぐ確認できる理由がこれだ。
localhost:3000 はどこを指すか
localhost は他人のサーバーのアドレスではなく、いまコマンドを打った自分のパソコン自身を指す名前だ。数字では 127.0.0.1 で、どのパソコンで打っても常に「そのパソコン自身」を意味する。だから localhost で立ち上げた画面はインターネットに上がっているのではなく、自分のマシンの中だけで動き、同じネットワークの他人にも既定では見えない。
後ろの 3000 はポート（port）番号だ。パソコンを部屋（扉）がいくつもあるビルと考えると、このアプリは 3000 号室を使っている、という意味になる。一台のパソコンで複数のアプリを同時に立ち上げても、違う部屋番号を使えば混ざらない。既定の番号は道具ごとに違う — Next.js や React は 3000、別の道具は 5173 や 8000 を使うこともある。覚える必要はなく、ターミナルに出たアドレスをそのまま辿ればいい。
npm とは何か、package.json の役割
npm はそのコマンドを動かす道具だ。名前は Node Package Manager の略で、JavaScript プロジェクトに必要な部品（パッケージ）をダウンロードし、決められたコマンドを実行する管理者の役割を担う。JavaScript をパソコンで動かす実行環境 Node.js を入れると npm も一緒に入るので、たいてい別途インストールするものはない。
プロジェクトのフォルダの中には package.json というファイルがある。このファイルに、このプロジェクトが使う部品の一覧と、'dev'・'build'・'start' といった実行名（scripts）が書かれている。それぞれの名前には実際に走らせる本当のコマンドがひもづいている — たとえば 'dev' に 'next dev' がひもづいていれば、npm run dev を打つと npm がその 'next dev' を代わりに見つけて実行する。
この仕組みのおかげで、道具ごとに本当のコマンドが違っても、人は npm run dev 一つだけ覚えればいい。ただし、もらったばかりのプロジェクトなら手順がもう一つ先にある — npm install を先に打つ。これは package.json に書かれた部品をインターネットからダウンロードして node_modules フォルダに入れるコマンドだ。部品がないとサーバーは起動しないので、新しいプロジェクトは install が先だ。
最初から最後まで — 三つのコマンドの順序
まとめると、順序は常に三つだ。① npm install で部品をそろえ、② npm run dev で自分のパソコンに開発サーバーを立ち上げ、③ ブラウザのアドレス欄に localhost:3000 を入れて確認する。
下は npm run dev を打ったときにターミナルに実際に出る画面と、そのコマンドがどこで定義されているかを示す package.json の scripts 部分だ。確認が終わってサーバーを止めるには、ターミナルで Ctrl+C を押す。公開インターネットへの公開は、これらすべてが自分のマシンできちんと動いた後の話だ。
➜ my-app npm run dev
> my-app@0.1.0 dev
> next dev
▲ Next.js 16.2.10 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.0.10:3000
✓ Ready in 293ms{
"name": "my-app",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}初心者がつまずきやすいところ
'port already in use'（ポートがすでに使われている）というメッセージが出たら、3000 号室を別のプログラムがすでに使っているということだ。前に立ち上げたサーバーを Ctrl+C で止めていないときによく起きる。たいていは道具が 3001 のような別の番号に自動で移して立ち上げるので、ターミナルに新しく出たアドレスを辿ればいい。
コマンドを打って 'command not found' が出たら、Node.js がまだ入っていない — nodejs.org からインストールすれば npm も一緒に入る。'そのスクリプトがない' というエラーは、package.json の scripts にその名前がないという意味なので、dev の代わりに start など、実際に書かれた名前を確認する。そして画面がまったく出ないときは、npm install を忘れていないかを真っ先に見る。