npm startとnpm run devの違い

npm start と npm run dev の違いを説明します。

方法1: 開発モードで起動する(推奨)

開発中は通常こちらを使用します:

npm run dev

これで http://localhost:3000 でアプリケーションが起動します。

方法2: ビルドしてから本番モードで起動する

本番環境と同じ動作を確認したい場合:

npm run build
npm start

それぞれの違い

• npm run dev (開発モード)
  • ホットリロード機能あり
  • コード変更が即座に反映される
  • デバッグ情報が豊富
• npm run build → npm start (本番モード)
  • 最適化されたビルド
  • 高速なパフォーマンス
  • 本番環境用

開発中であれば npm run dev を使用することをお勧めします。

主な違い

npm start

• 標準的なスクリプト: npmの特別なコマンドの一つ
• package.json の scripts セクションに "start" として定義されている
• run を省略できる（npm run start でも同じ）
• Create React App では開発サーバーを起動
• 実行内容: 通常は react-scripts start

npm run dev

• カスタムスクリプト: 開発者が自由に定義するコマンド
• package.json の scripts セクションに "dev" として定義されている必要がある
• 必ず npm run dev と書く必要がある（run は省略不可）
• Vite や Next.js などのフレームワークでよく使われる
• 実行内容: プロジェクトによって異なる

package.json の例

Create React App の場合

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

→ npm start を使用

Vite の場合

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

→ npm run dev を使用

Next.js の場合

{
  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build"
  }
}

→ 開発時は npm run dev、本番環境では npm start

まとめ