動きはそのまま、
中身を整える。

そもそも「リファクタリング」とは

リファクタリングとは、サイトの見た目や動きはまったく変えずに、コード（中身）だけを整理して、きれいにする作業のことです。お客さまから見える部分は、リファクタリングの前後で1ミリも変わりません。変わるのは、あなた（と Claude）にとっての“扱いやすさ”だけです。

たとえるなら、お店のバックヤードの整理整頓です。お客さまに出す料理（=サイトの見た目）は同じでも、調味料が整理され、道具が定位置にあれば、次の調理がぐっと速く・正確になります。リファクタリングは、その「裏側の片づけ」です。

なぜ、わざわざ整理するのか

「動いているコードを、わざわざ触るなんて怖い」と感じるかもしれません。でも、整理せずに放っておくと、こんなことが起きます。

1. 同じ修正を何か所もする羽目になる：似たコードがあちこちにコピーされていると、1つ直すのに5か所直す——直し忘れも生まれます。
2. どこを触ればいいか分からなくなる：散らかったコードは、半年後の自分にとって「他人が書いた暗号」です。
3. 新しいことを足すのが、どんどん大変になる：土台が散らかっていると、その上に何かを乗せるのが怖くなります。

つまりリファクタリングは、「これから先、ラクに・安全に育てていくための、土台の手入れ」です。今ちょっと整えておくことで、未来の修正がずっと速く、ずっと安全になります。

Claude Code なら、整理のハードルが一気に下がる

これまで、リファクタリングは「地味で、時間がかかって、後回しにされがち」な作業でした。でも、Claude Code を使えば話が変わります。「この辺りが散らかっているから整理して」と日本語で頼むだけで、AIがコード全体を見て、きれいに整えてくれるからです。

人間が何時間もかけて慎重に進めていた作業を、AIが一気に、しかも安定した品質で。だからこそ今は、こまめに整理しながら育てるのが当たり前にできる時代になりました。整理を“贅沢”だと思わず、開発の一部として組み込みましょう。

整理を始める前の「2つの安全装置」

リファクタリングで唯一こわいのは、「整理したつもりが、うっかり動きを壊してしまう」ことです。これを防ぐ安全装置が、ちょうど前の章までで学んだ2つです。

1. git でコミットしておく（3-1）：整理を始める前に、いまの状態を必ずコミット。もし壊れても、ひと言で元に戻せます。
2. テストを用意しておく（3-5）：整理の前後でテストを回し、どちらも緑なら「動きは変わっていない」と証明できます。リファクタリングとテストは、最高の相棒です。

① Claude Code に整理を頼む

準備ができたら、Claude にお願いします。ポイントは、「動きは変えないで」と必ず言い添えること。これがリファクタリングの合言葉です。

このファイルをリファクタリングしてください。
・サイトの見た目や動きは一切変えないこと
・同じような記述が重複していたら、まとめて整理すること
・変数や関数の名前を、意味が伝わるわかりやすい名前に直すこと
何をどう変えたか、変更点を最後に説明してください。

どこを整理すべきか自分では分からないときは、診断から頼むのも有効です。

このプロジェクトのコードを見て、リファクタリングすると良くなりそうな箇所を、優先度の高い順に3つ挙げてください。それぞれ、なぜ整理した方がいいのかも初心者にわかるように説明してください。

どんな整理があるの？（代表例）

用語を覚える必要はありませんが、「こういう整理があるんだ」と知っておくと、頼みやすくなります。

1. 重複をまとめる：あちこちにコピーされた同じ処理を、1つにまとめる。直すのが1か所で済むようになります。
2. 名前を分かりやすくする：a や data2 のような名前を、customerName のように意味の通る名前に。
3. 長いかたまりを分割する：1つの長すぎる処理を、役割ごとの小さなまとまりに分ける。読みやすくなります。
4. 不要なものを消す：もう使っていない古いコードやコメントを片づける。

② 整理後に、必ず確認する

AIが整理してくれたら、動きが本当に変わっていないかを確かめます。ここが最重要です。

1. テストを回す：npm test で、整理前と同じく全部緑になればOK。動きは保たれています。
2. 実際に画面で触る：テストでカバーしきれない見た目も、ブラウザで開いて、いつもどおり動くか確認します。
3. 問題なければコミット：「○○をリファクタリング」とメッセージを付けて、整理した状態を記録します。

コツは「小さく、こまめに」

一度に大量に整理しようとすると、もし動きが変わったとき、原因を探すのが大変になります。だから、小さく区切って、整理→確認→コミット、をこまめに繰り返すのが鉄則です。1ファイルずつ、1テーマずつ。これなら、万一おかしくなっても、戻すのは直前の一歩だけで済みます。

この章で出てきた言葉

リファクタリング

見た目や動きを変えずに、コードの中身だけを整理して読みやすく・直しやすくする作業。

技術的負債

散らかったまま放置されたコード。借金のように、後の修正をどんどん重くしていきます。

重複

同じような記述があちこちにコピーされている状態。まとめると修正が1か所で済みます。

機能追加

新しい動きを足すこと。リファクタリング（中身の整理）とは別作業。同時にやらないのが安全。

コミット

git の記録。整理を始める前に必ず取っておけば、いつでも元に戻せます。