この記事の要点

Node.js LTS（偶数バージョン）をインストール。バージョン管理は nvm / Volta / fnm パッケージマネージャ: npm (同梱) / yarn / pnpm（高速） エディタ: VS Code 推奨 + ESLint / Prettier / Volar (Vue) / TypeScript 拡張 ビルドツール: Vite（高速 ESM 開発サーバ） / webpack / esbuild / Turbopack TypeScript + ESLint + Prettier + Vitest が現代の標準構成。Biome は ESLint+Prettier 統合代替

Node.js のインストール

JavaScript のサーバサイド実行環境。npm も同梱されます。LTS (Long-Term Support, 偶数バージョン) を選ぶのが原則。

方法1: 公式インストーラ (シンプル)

nodejs.org から OS 別インストーラをダウンロードしてインストール。確認:

node --version    # v20.10.0 など
npm --version     # 10.2.3 など

方法2: バージョン管理ツール（推奨）

プロジェクトごとに異なる Node バージョンを使い分けるなら、バージョン管理ツールが必須。

# === nvm (macOS / Linux) ===
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm install 18
nvm use 20
nvm alias default 20

# === Volta (macOS / Linux / Windows) ===
curl https://get.volta.sh | bash
volta install node@20
volta install yarn
# package.json の "volta" フィールドで自動切替

# === fnm (Fast Node Manager, macOS / Linux / Windows) ===
curl -fsSL https://fnm.vercel.app/install | bash
fnm install 20
fnm use 20

# === Windows: nvm-windows ===
# https://github.com/coreybutler/nvm-windows/releases
nvm install 20.10.0
nvm use 20.10.0

パッケージマネージャの選択

ツール	特徴	速度
npm	Node.js 同梱、最も広く使われる	△
yarn (Classic v1)	Facebook 発、npm と互換	○
yarn (Berry v3+)	PnP モード、ゼロインストール	◎
pnpm	★ 推奨。シンボリックリンクで省ディスク + 高速	◎
bun	★ Bun ランタイム同梱、超高速 (実験的)	◎◎

# pnpm インストール
npm install -g pnpm
# または corepack で
corepack enable
corepack prepare pnpm@latest --activate

# 基本コマンド対応
npm install     ↔ pnpm install     ↔ yarn install
npm add foo     ↔ pnpm add foo     ↔ yarn add foo
npm run dev     ↔ pnpm dev         ↔ yarn dev

エディタ: VS Code 推奨セットアップ

VS Code をインストール後、以下の拡張機能を導入:

拡張機能	役割
ESLint	静的解析 (dbaeumer.vscode-eslint)
Prettier	コードフォーマッタ (esbenp.prettier-vscode)
EditorConfig	プロジェクト共通のエディタ設定
GitLens	Git ブレーム表示
Vue Language Features (Volar)	Vue 3 サポート
ES7+ React/Redux Snippets	React スニペット
Tailwind CSS IntelliSense	Tailwind 補完
Path Intellisense	ファイルパス補完

.vscode/settings.json 推奨設定

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]":        { "editor.defaultFormatter": "Vue.volar" }
}

TypeScript 環境

# TypeScript プロジェクト初期化
mkdir my-app && cd my-app
npm init -y
npm install --save-dev typescript @types/node
npx tsc --init    # tsconfig.json 生成

# 実行
npx ts-node src/index.ts        # 旧来
npx tsx src/index.ts            # ★ 推奨（高速、ESM 対応）

# 監視モード
npx tsc --watch

tsconfig.json 推奨

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

ビルドツール: Vite

Evan You (Vue 作者) 製。ESM ベースの開発サーバ + Rollup ベースのビルドで webpack より大幅高速。

# 新規プロジェクト作成
npm create vite@latest my-app
# テンプレート選択: vanilla / vue / react / svelte / preact / lit / solid + TS 版

cd my-app
npm install
npm run dev     # http://localhost:5173

# ビルド
npm run build   # dist/ に出力
npm run preview # ビルド結果をプレビュー

その他ビルドツール

ツール	特徴	用途
Vite	★ 推奨、超高速 HMR	SPA / SSR
webpack	枯れている、設定豊富	レガシー / 複雑な設定
esbuild	Go 製、超高速バンドラ	低レベル組込
Rollup	ライブラリ向け Tree-shaking	npm パッケージ
Parcel	設定不要	小規模プロト
Turbopack	Next.js 向け (Vercel 製)	Next.js プロジェクト

ESLint + Prettier

# ESLint v9 (Flat Config)
npm install --save-dev eslint @eslint/js typescript-eslint
npx eslint --init    # 対話で設定生成

# Prettier
npm install --save-dev prettier
echo "{}" > .prettierrc.json    # 空でデフォルト
echo "node_modules" > .prettierignore

eslint.config.js (Flat Config v9+)

import js from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': 'error',
    },
  },
  { ignores: ['dist/**', 'node_modules/**'] }
);

Biome: ESLint + Prettier の代替

# Biome (Rust 製、超高速)
npm install --save-dev --save-exact @biomejs/biome
npx biome init
npx biome check src/    # lint + format 両対応
npx biome check --apply src/    # 自動修正

テスト環境

ツール	特徴
Vitest	★ 推奨。Vite 統合、Jest 互換 API、超高速
Jest	枯れている、React 標準
Playwright	E2E (Chromium / Firefox / WebKit)
Cypress	E2E (主に Chromium)
Testing Library	ユーザ視点の React / Vue テスト

# Vitest 導入
npm install --save-dev vitest

# package.json
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest --coverage"
  }
}

デバッガ

• Chrome DevTools: F12 → Sources でブレークポイント設定
• VS Code デバッガ: .vscode/launch.json で Node / Chrome デバッグ統合
• Node Inspector: node --inspect-brk index.js → chrome://inspect で接続
• console.log デバッグ: 簡易だが効果的。console.table / console.group も活用

現代の推奨スタック (2026)

項目	推奨
Node	v20 / v22 LTS
パッケージマネージャ	pnpm
言語	TypeScript (strict: true)
ビルドツール	Vite
lint / format	Biome (ESLint + Prettier 統合) もしくは ESLint v9 + Prettier
テスト	Vitest + Playwright
フレームワーク	React / Vue 3 / Svelte 5 / Solid（用途による）
メタフレームワーク	Next.js / Nuxt 3 / SvelteKit / Remix

FAQ

Q: npm と yarn と pnpm、どれを使うべき？
A: 新規プロジェクトは pnpm 推奨（速度・省ディスク）。既存プロジェクトは選んだものを使い続ける（ロックファイルが違うため）。

Q: TypeScript は必須？
A: 小規模スクリプトは不要、5 ファイル以上のプロジェクトなら導入推奨。型補完で開発効率と保守性が大きく向上します。

Q: ESLint v9 (Flat Config) でつまずく
A: 旧 .eslintrc 形式は v9 で非推奨。eslint.config.js に移行。プラグインも flat config 対応版（@typescript-eslint/eslint-plugin → typescript-eslint）に変更が必要。