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

第2章：Windows + VS Code 開発環境セットアップ🛠️💻✨

この章が終わったら…👇 「TSプロジェクトを作る → ビルドする → きれいに整形する → ルール違反を見つける → Gitで管理する」まで一気にできるようになるよ〜！🎉😆

Dev Toolkit

0. まずは完成形イメージ🌈✨​

最終的に、プロジェクト直下がこんな感じになってればOKだよ👇📁

  • src/index.ts（コード置き場）
  • dist/（ビルド結果）
  • tsconfig.json（TypeScript設定）
  • eslint.config.js（ESLint設定：Flat Config）
  • .prettierrc（Prettier設定）
  • package.json（コマンド集）

1. VS Code を最新にする🧠✨​

VS Codeは月1くらいで新しいバージョンが出るよ🗓️（自動更新もOK）(Visual Studio Code) 直近のリリースノート例だと 2026-01-08に “December 2025 (1.108)” が出てる みたいな感じで更新が回るよ📦✨(Visual Studio Code)

やること✅

  • VS Codeを起動
  • メニューから ヘルプ → 更新の確認（または自動更新に任せる）🔄✨

2. Node.js（LTS）を入れる🟩⚡​

TypeScript開発は Node.js が土台だよ〜！🧱✨ Node.js 24.x は LTS（長期サポート）に移行していて、サポートは 2028年4月末までの予定だよ📅🛡️(Node.js) （現場はだいたい LTS 使うのが安心💞）

インストール後の確認コマンド🔍​

PowerShell / Windows Terminal で👇

node -v
npm -v

数字が出たら成功〜！🎉

3. Git を入れる🐙📌​

Gitは「変更履歴を安全に保存するタイムマシン」だよ⏳✨ Windows向けの最新Gitは **2.52.0（2025-11-17）**って案内されてるよ🧰(Git)

Gitの確認🔍​

git --version

最低限の初期設定（これだけでOK）📝​

git config --global user.name "あなたの名前"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main
git config --global core.autocrlf true

core.autocrlf true は Windowsの改行（CRLF）事故を減らす定番のやつだよ〜🧯✨

4. VS Code 拡張を入れる🧩✨（必須セット）​

入れておくと「ミスが減る」「読みやすくなる」「レビューが楽」になるよ〜💖🥳

4-1. ESLint（ルールチェック）🧹​

  • 拡張：ESLint（dbaeumer.vscode-eslint）

ESLintは最近 Flat Config（eslint.config.js）が新しい標準になってるよ📘(ESLint) VS CodeのESLint拡張側も、Flat config前提の説明があるよ🧠(Visual Studio Marketplace)

4-2. Prettier（自動整形）💅✨​

  • 拡張：Prettier - Code formatter

最近の Prettier 3.7 は TypeScriptまわりの整形も磨いてるよ〜✨(Prettier)

4-3. AI支援（Copilot系）🤖💡​

VS CodeまわりはAI機能がどんどん統合されてて、Copilot拡張は“早めに廃止予定”でMarketplaceから消える予定って明言があるよ⚠️(Visual Studio Code) なので今後は「拡張を入れる」より、VS Code内の Copilot/Chat/Agent系UIにサインインして使う流れが強くなるはずだよ〜🔐✨

5. いよいよ TypeScript プロジェクト作成🎮✨（超ミニ）​

5-1. フォルダ作って開く📁​

mkdir solid-ts-ch02
cd solid-ts-ch02
code .

5-2. npm初期化📦​

npm init -y

5-3. TypeScriptを入れる（プロジェクト内に入れるのが安定）🧠​

TypeScript公式の案内は npm install -g typescript だけど、教材では プロジェクトごとに入れるのが事故りにくいよ〜🫶 （とはいえ “最新は 5.9 系” って公式も案内してるよ）(TypeScript)

npm i -D typescript
npx tsc --init

6. tsconfig を「いい感じ」にする🛡️✨​

tsconfig.json をちょこっと編集しよ〜✍️ （迷ったらこれでOKなバランス⚖️）

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

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

    "strict": true,
    "noUncheckedIndexedAccess": true,

    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

7. まず動くコードを書く🚀✨​

src/index.ts を作って👇

const name: string = "Campus Café";
console.log(`Hello, ${name}! ☕️✨`);

8. npmスクリプト（コマンド）を登録する🎛️✨​

package.json の "scripts" をこんな感じにしておくと超ラク🧸

{
  "scripts": {
    "build": "tsc",
    "dev": "tsc -w",
    "start": "node dist/index.js",
    "typecheck": "tsc --noEmit"
  }
}

動作確認いくよ〜！💨

npm run build
npm run start

☕️✨ が表示されたら勝ち〜！！🎉🥳

9. ESLint + Prettier をセットアップ🧹💅✨​

9-1. インストール📦​

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

TypeScript向けESLintの公式Quickstartは typescript-eslint の “flat config” ルートが用意されてるよ🧠✨(TypeScript ESLint)

9-2. eslint.config.js を作る🧩​

プロジェクト直下に eslint.config.js 👇

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

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,

  {
    files: ["**/*.ts"],
    languageOptions: {
      parserOptions: {
        project: true
      }
    }
  },
  {
    ignores: ["dist/**", "node_modules/**"]
  }
];

9-3. ESLintコマンド追加🧪​

package.json に追記👇

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

実行っ✨

npm run lint

9-4. Prettier設定💅​

.prettierrc を作って👇（超ベーシック）

{
  "singleQuote": true,
  "semi": true
}

package.json に追記👇

{
  "scripts": {
    "format": "prettier . --write"
  }
}

実行っ✨

npm run format

10. Gitで「保存」しておく📌✨​

git init
git add .
git commit -m "ch02: setup TypeScript project"

ここまでできたら、もう一生強い💪🥹✨

ミニ課題（この章のゴール）🎓🎉

次を全部クリアしたら合格〜！✅💮

  1. npm run build が通る🎯
  2. npm run start でメッセージが出る☕️✨
  3. npm run lint が動く🧹
  4. npm run format が動く💅
  5. git commit まで完了📌

よくある詰まりポイント集🧯😵‍💫

❌ node が見つからない​

✅ ターミナルを開き直す🔄 ✅ それでもダメなら再インストール（PATHが通ってない系）🛠️

❌ tsc が見つからない​

✅ グローバルじゃなくてOK！ npx tsc -v で確認してね🫶

❌ VS CodeでESLintが効かない​

✅ ESLint拡張が入ってるか確認 ✅ eslint.config.js がプロジェクト直下にあるか確認（Flat Config前提）(ESLint) ✅ “フォルダを開く” がルートになってるか確認📁（サブフォルダだけ開くと迷子になりがち💦）

次の章（第3章）では、この環境の上で「クラス設計の最低限（class / interface / private / readonly）」を“注文アプリ題材”で作り始めるよ〜🏫📦✨