メインコンテンツまでスキップ

第2章：環境構築（Windows + VS Code + TypeScript）🛠️✨

この章のゴールは「迷子にならない土台」を作って、実行✅ / テスト✅ / 整形✅ / Lint✅ がワンボタンで回るミニ雛形を完成させることだよ〜！😊💕

0) まず“今の最新”を押さえる（2026-01-20時点）📌🗓️​

  • Node.js は v24 系が Active LTS（安定して長く使う枠）で、直近もセキュリティリリースが出てるよ 🔒✨ (Node.js)
  • TypeScript は公式サイトで「最新は 5.9」として案内されてるよ 🧩 (typescriptlang.org)
  • ESLint は “Flat Config” が主流になってて、defineConfig() などの流れが整理されてきてるよ 🧹 (eslint.org)
  • Prettier は直近で 3.8.0（2026-01-14） の告知が出てるよ ✨ (prettier.io)
  • Vitest は「Node 20 以上」など要件が明記されてるよ（Node 24 ならOK）🧪 (vitest.dev)

1) Node.js を入れる（まずはここ！）🟩⬇️​

  1. Node.js をインストール
  2. PowerShell を開いて、ちゃんと入ったか確認するよ✅
node -v
npm -v

💡 目安：Node が v24.x になってたらOKだよ〜！ (Node.js) （ちなみに v24.13.0 は 2026-01-13 のセキュリティリリースだよ🔒） (Node.js)

2) VS Code に “開発セット” を入れる 🧰✨​

Environment

VS Code の拡張機能で、最低これだけ入れよう〜！😊

  • ESLint（Lint 表示）
  • Prettier - Code formatter（自動整形） (Visual Studio Marketplace)
  • Vitest（テストが見やすい：任意だけど便利）🧪
  • GitHub Copilot（AI補助🤖）

3) ミニプロジェクト雛形を作る（コピペでOK）📦✨​

3-1. フォルダ作成 & npm 初期化 📁​

mkdir sm-ts-starter
cd sm-ts-starter
npm init -y
mkdir src

4) パッケージを入れる（最小で強いセット）💪✨​

4-1. TypeScript 実行（tsx）＋型チェック（tsc）🧠🏃‍♀️​

  • tsx は「TypeScript をそのまま実行」できる便利ランナーだよ（ただし 型チェックはしない ので、tsc も併用が推奨）🧩 (Node.js)
  • さらに tsx watch で保存のたびに再実行できるよ！👀✨ (tsx)
npm i -D typescript tsx @types/node

4-2. ESLint（Flat Config）🧹​

TypeScript-ESLint の Quickstart が超素直でおすすめだよ〜！📘 (TypeScript ESLint)

npm i -D eslint @eslint/js typescript-eslint

4-3. Prettier（整形担当）✨​

npm i -D prettier

4-4. テスト（Vitest）🧪​

Vitest は要件として Node 20+ などが明記されてるよ（Node 24 ならOK）✅ (vitest.dev)

npm i -D vitest vite

5) 設定ファイルを作る（ここが“迷子防止”の要）🧭✨​

5-1. tsconfig.json（TypeScript のルール）🧩​

ルートに tsconfig.json を作ってね👇

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",

    "rootDir": "src",
    "outDir": "dist",

    "strict": true,
    "skipLibCheck": true,

    "sourceMap": true
  },
  "include": ["src"]
}

💡 TypeScript 5.9 は tsc --init の体験も改善されてるよ（最近の既定が良くなってきてる）🧁 (Microsoft for Developers)

5-2. eslint.config.mjs（Flat Config でいくよ）🧹✨​

ルートに eslint.config.mjs を作る👇（ほぼ公式の形） (TypeScript ESLint)

// @ts-check
import eslint from '@eslint/js';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';

export default defineConfig(
  eslint.configs.recommended,
  tseslint.configs.recommended
);

5-3. Prettier 設定（.prettierrc.json）✨​

ルートに .prettierrc.json を作るよ👇 （Prettier は設定ファイル形式がいろいろ選べるって公式にも書いてあるよ） (prettier.io)

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all"
}

ついでに .prettierignore もあると気持ちいい😊

dist
node_modules

5-4. VS Code の保存設定（自動で整うやつ）💖​

.vscode/settings.json を作って👇（フォルダに .vscode も作ってね）

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

6) サンプルコードを置く（動作確認用）✅🎉​

6-1. src/index.ts​

export function main() {
  console.log('Hello TypeScript 🎉');
}

main();

7) package.json に “ワンボタンコマンド” を作る 🧰✨​

package.json の "scripts" をこうするよ👇

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "typecheck": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/index.js",

    "lint": "eslint .",
    "format": "prettier . --write",

    "test": "vitest",
    "test:watch": "vitest --watch",

    "check": "npm run typecheck && npm run lint && npm run test"
  }
}

8) 動作チェック（ここまで来たら勝ち🏆）🎮✨​

順番に打っていこ〜！😊

npm run dev

別ターミナルで：

npm run lint
npm run format
npm run test
npm run check

全部通ったら、雛形完成〜！！🎉🎉🎉

9) ありがちな詰まりポイント（ここだけ見ればだいたい助かる）🆘💡​

🟨 npm が PowerShell で動かない（npm.ps1 がうんぬん）​

PowerShell の実行ポリシーで止まるやつ！ （“CurrentUser だけ”にしておくのが無難だよ〜）

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

🟦 ESLint の設定が古い形で生成されがち​

AI が昔の .eslintrc 前提で書いちゃうことがあるの…🥺 今は Flat Config が基本で、eslint.config.* を使う流れが強いよ〜 (eslint.org)

10) AIに頼ると爆速になる“聞き方テンプレ”🤖💬✨​

コピペで使ってOKだよ〜！

  • 「この eslint.config.mjs の意味を、初心者向けにやさしく説明して！例もつけて🥺」
  • 「tsconfig.json の module と moduleResolution を NodeNext にした理由を、図解っぽく説明して〜🧠✨」
  • 「いま出てるこのエラー文を貼るから、原因候補を3つと直し方を順番に教えて🙏」
  • 「この雛形に“状態機械の状態・イベント”が増えても崩れないフォルダ構成案ちょうだい📁✨」

✅ この章の“完成チェックリスト”🧾💖​

  • node -v が v24 系になってる🟩 (Node.js)
  • npm run dev で Hello TypeScript が出る🎉
  • npm run lint が動く🧹
  • npm run format で整形できる✨
  • npm run test が動く🧪 (vitest.dev)
  • 最後に npm run check が通る✅

次の第3章からは、いよいよ「状態」と「イベント」で世界を見る練習に入るよ〜🚦💞