第03章：Windowsでの開発準備（Node/TypeScript）🪟⚙️
ねらい🎯
この章のゴールはこれだけっ✨ TypeScriptを書いて → コンパイルして → Node.jsで動かす（Hello TS ✅）までを、迷子にならずに通すことだよ〜☺️🧭
3-0. まず「登場人物」をざっくり把握しよ🧑🤝🧑✨
Node.js 🟩
- JavaScriptをPC上で動かすエンジンだよ（ブラウザ外で動く！）🧠💨
- 2026年1月時点だと、**v24 が Active LTS（推奨の安定版）**になってるよ✅ (Node.js)
npm 📦
- Node.jsに付いてくる「パッケージ管理」だよ
npm i xxxで必要な道具（ライブラリ）を取ってくる🛒✨
TypeScript 🟦
- JavaScriptに“型”を足した言語だよ🧩
- ただし！Node.jsは TypeScriptをそのまま実行できないから、いったん **JavaScriptに変換（コンパイル）**するよ🔁✨
3-1. Node.js を入れる（いちばん安全ルート）🧷🟢
✅ 基本方針：LTS を入れる
- 「安定してて壊れにくい」やつが LTS ✨
- いまの推奨ラインは **Node.js 24（Active LTS）**だよ🫶 (Node.js)
インストール後の動作確認✅
PowerShell か Windows Terminal を開いて、これ👇
node -v
npm -v
v24.x.xみたいなのが出たらOK🙆♀️🎉- もし
nodeが見つからない系なら、いったんターミナルを閉じて開き直すと治ること多いよ（PATHの反映）🔁✨
3-2. TypeScript を入れる（プロジェクトにだけ入れるのが正解）🧰🟦
TypeScriptは「PC全体」に入れなくてもOK🙆♀️ プロジェクトごとに入れるのが今どきで安全だよ🛡️
① 作業フォルダを作る📁✨
mkdir mm-demo
cd mm-demo
② npm プロジェクトにする📝
npm init -y
ここで package.json ができるよ📦✨（この子がプロジェクトの“名簿”！）
③ TypeScript を開発用として追加🧩
2026年1月時点の typescript の最新は 5.9.3 だよ（npm上の Latest）(npmjs.com)
npm i -D typescript
Nodeの型も入れておくと超快適💡（process とかで怒られない）
npm i -D @types/node
3-3. 「TypeScriptが動く流れ」を体で覚えよ🔁🧠✨
イメージはこれ👇
✅ .ts（あなたが書く）
⬇️ tsc（TypeScriptコンパイラ）
✅ .js（変換される）
⬇️ node（実行）
✅ 実行結果が出る🎉
3-4. Hello TS を動かす（最短で成功する手順）🚀✅
① フォルダ構成を作る📦
mkdir src
② TypeScript設定ファイル（tsconfig）を作る⚙️
TypeScript 5.9 では tsc --init も整理されてて、最初の導入がやりやすいよ🧼✨ (Microsoft for Developers)
npx tsc --init
作られた tsconfig.json を開いて、最低限これだけ整えよう👇（初心者にやさしい安定セット🫶）
rootDir：入力（ts）置き場 →srcoutDir：出力（js）置き場 →dist
tsconfig.json の中をこうしてね👇
{
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"target": "ES2022",
"module": "CommonJS",
"strict": true
}
}
💡ここではいったん CommonJS にしておくよ！ ESM（
type: module）は“今っぽい”けど、最初は設定でつまずきやすいから、まず成功体験を取りにいこ〜☺️🎀 （後の章で、モジュール境界を作る流れの中で自然に整えていけるよ🧩）
③ src/index.ts を作る📝✨
src/index.ts にこれ👇
const appName: string = "Hello TS";
console.log(`✅ ${appName} が動いたよ〜！`);
④ コンパイル（ts → js）する🔧
npx tsc
dist/index.js ができてたら成功🎉✨
⑤ 実行する（Nodeで動かす）▶️
node dist/index.js
✅ Hello TS が動いたよ〜！ が出たらクリアだよ〜🥳💕
3-5. npm scripts を作って「毎回ラクする」🪄✨
毎回 npx tsc とか打つの面倒だよね？🥺
package.json にコマンドを登録しちゃお！
package.json の "scripts" をこう👇
{
"scripts": {
"build": "tsc",
"start": "node dist/index.js"
}
}
以後はこれでOK🎉
npm run build
npm start
3-6. よくあるつまずき集（ここだけ見れば大丈夫）🩹😵💫
❓ node が見つからない
- ターミナルを閉じて開き直す🔁
- それでもダメなら、Nodeが入ってない or PATHが通ってない可能性（再インストールが一番早いことも）🧯
❓ npx tsc が動かない
npm i -D typescriptをそのフォルダでやった？👀node_modulesが壊れてそうなら、いったん消して入れ直しもアリ👇
rmdir /s /q node_modules
del package-lock.json
npm i
❓ TypeScriptのバージョン確認したい
npx tsc -v
章末ミニ課題🧩✅（所要10〜15分）
mm-helloフォルダを新しく作って、同じ手順で Hello TS を完成させよう📁✨index.tsをちょい改造して、関数を1個作ってみてね💡
例👇
function add(a: number, b: number): number {
return a + b;
}
console.log(add(10, 7));
AI用プロンプト例🤖📝（丸投げOKだけど“確認”はあなたがえらい✨）
- 「WindowsでTypeScriptの最小構成プロジェクト作りたい。
npm initからtsconfig、build/startscriptsまで手順を短くまとめて」 - 「いまの
tsconfig.jsonを初心者向けの安全設定にしたい。rootDir=src、outDir=dist、strict=trueで、理由も1行ずつ添えて」 - 「
npx tscで出たエラー文を貼るから、原因と直し方を“1つずつ”教えて（やることチェックリスト形式で）」✅
ここまでできたら🎉
次の章からは「開発が気持ちよくなるセットアップ」へ進めるよ〜🧰✨ （整形・Lint・保存時フォーマットで、ストレス激減するやつ😌💖）