第05章：VS Code必須操作（リファクタの道具）🧑💻🧰
ねらい🎯
リファクタで超よく使う 3大操作 を、手が勝手に動くレベルまで覚えるよ〜！😊🫶
- ① 検索・置換（安全に！）🔎🧯
- ② リネーム（壊さずに！）🏷️🛟
- ③ 参照ジャンプ（迷子にならない！）🧭✨
今日のゴール🌸
この章が終わるころに、次のことができればOKだよ🙆♀️💖
- 文字列を「全部置換」する前に、影響範囲を見てから 置換できる👀✅
- 変数名や関数名を、ただの置換じゃなく“安全リネーム” で変えられる🏷️🛟
- 定義→参照→元の場所、を 一瞬で行き来 できる🧭🔁
まず覚える「安全ショートカット」6つ🧠✨
🔎 検索・置換
- ファイル内検索：
Ctrl + F - ファイル内置換：
Ctrl + H - プロジェクト全体検索（検索ビュー）：
Ctrl + Shift + F - プロジェクト全体置換（置換 in files）：
Ctrl + Shift + H
🏷️ 安全リネーム＆参照
- 参照一覧：
Shift + F12 - シンボルの安全リネーム：
F2
🧭 迷子防止（めっちゃ大事！）
- 定義へ：
F12 - 戻る／進む：
Alt + ← / →
超重要：置換より先に「参照」を見よう👀🛟
「えいっ！置換！」は事故りやすいの…😵💫💥 代わりにこうするのが安全だよ👇✨
- 変えたい名前にカーソルを置く🏷️
Shift + F12で 参照（使われてる場所） を全部見る👀- いけそうなら
F2で 安全リネーム 🛟
ハンズオン①：安全リネーム体験（置換は使わない！）🏷️🛟✨
1) まずはサンプルを用意🧪
エディタで2ファイル作って貼り付けてね😊📁
calc.ts
export function calcTotal(price: number, taxRate: number) {
return price + price * taxRate;
}
main.ts
import { calcTotal } from "./calc";
export function printReceipt(price: number) {
const total = calcTotal(price, 0.1);
return `TOTAL: ${total}`;
}
2) 参照を見てからリネーム👀➡️🏷️
calcTotalにカーソルを置くShift + F12で参照一覧を出す👀F2を押してcalculateTotalに変える🏷️✨main.tsの import も一緒に直ってるか確認✅（言語機能が効いてると自動で追従しやすいよ💡）
3) 事故りポイント⚠️（ここだけ注意！）
- ❌
Ctrl + HでcalcTotalを置換すると、コメントや別の文字列まで巻き込む危険あり😱 - ✅
F2は「シンボル（意味のある名前）」単位で変えやすい🛟
ハンズオン②：検索・置換を“安全運転”する🔎🧯✨
1) ファイル内（小さめ）から慣れる😊
- 検索：
Ctrl + F🔎 - 置換：
Ctrl + H♻️
検索欄の右側にある切り替え（超便利！）👇
- 大文字小文字：
Alt + C - 正規表現：
Alt + R - 単語単位：
Alt + W
💡「正規表現オンのまま」事故があるあるだよ〜😇（意図せず爆発💥）
2) プロジェクト全体（大きめ）は“確認してから”👀
- 検索ビュー：
Ctrl + Shift + F - 置換 in files：
Ctrl + Shift + H
👉 ここで大事なのは いきなり全部置換しない こと！ 検索結果（ヒット一覧）を見て、「このファイル群だけならOK」 を確認してから置換するよ👀✅
ハンズオン③：定義ジャンプ→戻る（迷子ゼロ）🧭🔁✨
calculateTotal（さっきリネームした関数）にカーソルを置くF12で定義へジャンプ🏃♀️💨- 「元の場所に戻りたい！」→
Alt + ←で戻る🔙 - 「戻りすぎた！」→
Alt + →で進む🔜
よくある失敗あるある😵💫➡️こう直す🛟
- 「どこを置換したか分からなくなった」 → 置換前に 検索結果（一覧）を眺める 👀
- 「関数名を変えたらimportが壊れた」
→ まず
Shift + F12で参照確認→F2でリネーム🏷️🛟 - 「ジャンプしすぎて迷子」
→
Alt + ← / →を最優先で覚える🧭✨
ミニ課題✍️（10〜15分）🌷
課題A：安全リネーム🏷️
printReceipt を formatReceipt に変えてみよう😊
- 参照を見る：
Shift + F12👀 - 安全リネーム：
F2🛟
課題B：安全置換🔎
テンプレ文字列の "TOTAL:" を "TOTAL(JPY):" に変えてみよう💴✨
- まず
Ctrl + F/Ctrl + Shift + Fでヒット確認👀 - 置換は「本当にそこだけ？」を見てから♻️
課題C：迷子ゼロ🧭
F12 で定義に飛んだあと、必ず Alt + ← で戻ってこれるようにしよう🔁
AI活用ポイント🤖🃏（ショートカット暗記をラクにする）
1) “暗記カード”を作らせる🃏✨
AIチャットにこう頼むよ👇😊
- 「VS Codeのショートカットを暗記カードにして！表面＝やりたいこと、裏面＝ショートカット（Windows）で10枚。リファクタでよく使う順に！」🃏🤖
- できたカードは、実際にVS Codeで押して動くか を必ず確認✅（ここ大事！）
2) “置換していいか”の判断を手伝わせる👀🤖
- 「この検索結果のヒットパターンだと、置換のリスクは何？ どんな事故が起きそう？」
- 「安全にやるなら、置換じゃなくてRename Symbol（F2）が良いケース？」
3) “リネーム案”を複数出させる🏷️🌸
- 「
calcTotalの代わりに、意味が伝わる名前を5つ（単位や税の意味も分かるように）出して！」
この章のまとめ📌✨
- 置換より先に、参照を見る：
Shift + F12👀 - 名前変更は“安全リネーム”：
F2🛟 - 定義へ飛んだら、戻る：
Alt + ← / →🧭🔁 - 検索と置換：
Ctrl + F / Ctrl + H、全体はCtrl + Shift + F / H🔎♻️