AIコーディングの天敵「秘伝のタレ」を卒業！リファクタリングしてファイルを整理しよう

何がだめなの？「秘伝のタレ」コードの落とし穴

動いているなら、そのままでもいいのでは？と思うかもしれません。でも、継ぎ足しすぎた「秘伝のタレ」状態になると、コードが1つのファイルに長く、複雑に絡み合ってしまい、以下のような困ったことが起こり始めます。

AIが物忘れをする

AIには一度に読み取れる情報の限界（トークン制限）があります。コードが長すぎると、最初の方の指示を忘れてバグを出す原因に。

修正箇所が見つからない

ボタンの色を変えたいだけなのにどこに書いてあるのかわからない、といった、広い砂漠の中から針を探すような作業になってしまいます。

ちょっと直すと他が壊れる

すべてが複雑に繋がっていると、一箇所直しただけで全く関係ない機能が動かなくなる「ドミノ倒し」のような現象が起こる…かも…。

動作が重くなる

無駄な処理が積み重なり、アプリの動きがモッサリしてしまうことも。

そこで登場するのが、リファクタリングです！

リファクタリングとは

リファクタリングとは、見た目や挙動は変えずに、中身の構造を整理して、内容を理解しやすい状態にする作業です。お部屋の片付けに例えると分かりやすいかもしれませんね。物を減らし、似たものをまとめ、取り出しやすく並べ直すことで、見た目は大きく変わらなくても暮らしやすくなります。コードも同じで、動きはそのままに読みやすく整えます。

リファクタリングをするメリット

リファクタリングすると、コードが整理されてAIが文脈を正しく読み取りやすくなり、提案や修正の精度が上がります。また、構造が整うことで新機能の追加や変更もしやすくなり、開発スピードが落ちにくくなります。さらに、不要な部分を見直しながら整える過程で仕組みへの理解が深まり、自分自身のスキルアップにもつながりますね！

リファクタリングしてみよう！

それでは、実際にAIを使って、膨れ上がったコードをスッキリさせる5つのステップをご紹介します。この通りにプロンプト（指示文）を出せば、初心者の方でも安心です！

Step 1: プロジェクト全体の現状分析と方針決定

いきなりファイルにメスをぶっ刺して切り刻むのは失敗の元。まずはAIに「設計図」を書かせましょう。

実行プロンプト例:

「現在、この1つのファイルに全ての機能が詰まっていてコードが長すぎます。このファイルに含まれているコンポーネントやロジックを分析して、React（※お使いの言語に合わせて変更してください）のベストプラクティスに基づいた『推奨されるフォルダ構成とファイル名』のリストを作成して提示してください。」

よく使われる定番の名前ルール

AIが提案してくるカタカナ文字に戸惑わないよう、よくあるフォルダ名をまとめておきました！

Step 2: 共通UIパーツ（コンポーネント）の切り出し

まずは、見た目のパーツから整理しましょう。

実行プロンプト例:

「Step 1の提案に基づき、まずはUIパーツを切り出します。このコードの中から『ナビゲーションバー』と『共通ボタン』を抽出し、それぞれ Header.tsx と Button.tsx として別ファイルに作成してください。元のファイルではこれらをインポート（読み込み）して使うように書き換えて。」

Step 3: データ処理（ロジック）の外部化

「見た目」と「計算（動き）」を分けます。これでコードの通しが良くなります！

実行プロンプト例:

「次に、メインファイルに残っている『データの計算ロジック』や『API通信の処理』を、カスタムフックとして src/hooks フォルダに切り出してください。見た目と動きを分離して、コードを読みやすくしたいです。」

Step 4: ファイルパスとインポートの整合性チェック

ファイルを分けると、読み込みの道筋（パス）がズレることがあります。

実行プロンプト例:

「ファイルを複数に分けました。全てのファイル間でインポートが正しく行われ、エラーなくアプリが動作するか最終チェックをしてください。もし不足している設定やパスのミスがあれば修正案を出して。」

Step 5: 不要なコードの削除とお掃除

最後に、使い終わった不要なコードを整理しちゃいましょう。

実行プロンプト例:

「最後に、どのファイルからも使われていない変数や、不要になった古いコメントをすべて削除して、コードを完全にクリーンな状態に仕上げてください。」

他にも変数名を見直したり、繰り返し似たような処理をしてないかチェックしたり…もあるんですが、最新のAIでは最初からそのへんも考えてコードを書いてくれている気がします。必要であればより細かいリファクタリングのステップを組んでおくと良いですね。

AIに「リファクタリングして」って言えばいいんじゃない？

最近のAIなら、一言「綺麗にして！」と言うだけでも、ある程度はやってくれます。シングルページのシンプルなWebアプリであれば、このような指示でいい感じにしてくれたりもします：

「このファイルが長すぎて読みづらいので、保守性が高くなるように複数のファイルに分割して。一般的なベストプラクティスに基づいたフォルダ構成とファイル名で分割して。」

ただ、丸投げにはちょっとしたリスクがあるんです。

「やりすぎ」で動かなくなる

AIが良かれと思って、あなたが知らない高度な技術を勝手に導入してしまい、自分では修正不能になることがあります。

あなたの意図が無視される

AIは技術的な正解は知っていますが、あなたが次にどんな機能を足したいかは知りません。

私も実際にうまくいっていた動作がいじられて原因究明に時間を割く羽目になってしまったり、コンテンツ内の文章を微妙に変更されたりしました…（微妙すぎて全然気づかなかったw）。だからこそ、ステップごとに自分の目で確認しながら進めるのが、バイブコーディングを長く楽しむコツです。

リファクタリングを成功させる3つのコツ

1. バックアップを取っておく！

これが一番大事です。作業前に今のファイルをコピーしておくか、Gitなどで保存しておきましょう。壊れても戻せるという安心感が、大胆な整理を可能にします。

2. 一気にやらない

1つファイルを分けたら、一度動かしてみる。この小刻みな確認が、結果的に一番の近道になります。

3. 機能追加と同時にやらない

新しい機能を作るときに、ついでに整理もしちゃおう！という考えは、バグが起きたときに原因が分からなくなる最大の原因です。お掃除はお掃除、増築は増築、と時間を分けましょう！

リファクタリングは、最初は少し面倒に感じるかもしれませんが、一度スッキリした環境を味わうと、もう「秘伝のタレ」には戻れませんよ！本当は最初からしっかりと計画して、指示書を作っておけば、もっと楽に進められるんですけどね…。バイブコーディングって名前の通り、ノリで開発し始めることもありますよ…ね…？次は指示書のお話でも書いてみようかしら。

ところで私も現在、AIコーディングを絶賛楽しみながら、便利なツールを開発中です。私が作ったアプリやその手順を記事にまとめているので、ぜひ読んでみてくださいね！

• Antigravityを使ってコーディング（ほぼ）なしで目標設定アプリ作った
• 自転車レース「富士ヒル」のペース配分表を開発してわかった、人間だからこそ気づけたこと