最初のプロトタイプ（試作品）段階で完璧な設計を目指す必要はまったくありません。
AIツールが優秀な今こそ、「最初はあえて1ファイルに全部書いて爆速で動かし、コードが増えたらAIに分割させる」という戦略が最も効率的です。
今回は、AIを活用した爆速プロトタイプ開発のコツと、後からコードを綺麗にするリファクタリングの手順を解説します。
なぜプロトタイプは「1ファイル実装で始める」が良いのか？
アイデアを検証するときに最も大事なのは、とりあえず動かすまでの「スピード感」です。
動かしてみると思っていたのと違うことは多々あります。
1つのファイルに全コードを詰め込んでAIに書かせるのが一番速く、AIも迷いなく機能します。
「まず動くものを作る」ことを重視して、クライアントと打ち合わせで軌道修正することが大事です。
「1,000行の壁」とトークン消費の罠
1ファイルでプロトタイプの開発を進めていくと、機能が増えるにつれてコードがどんどん長くなります。ここで注意したいのが「1,000行の壁」です。
プロトタイプが1,000行以内に収まる規模であれば問題はないのですが、規模が大きくなってくると以下のような問題が発生します。
AIの挙動が不安定になる
一度に読み込む情報量が多くなり、AIが重要な部分を見落としたり、変なコードを生成しやすくなります。
※最近のモデルはコンテキストの扱いが上手になってきているので、今後は改善されていく方向にあります。
トークン消費が増える
AIはコードを読むたびに「トークン」という消費単位を使います。ファイルが大きいと、少しの修正でも大量のトークンを消費し、利用料金や回数制限に影響します。
AIに頼む「ファイル分割リファクタリング」
コードが増えてきたら、AIに依頼してファイルを役割ごとに分割してもらいましょう。
プロンプトの例：
このファイルにまとまっているコードを、
機能ごとのモジュールに分割してリファクタリングしてください。
動作や外部の挙動は一切変更せず、保守性を高める配置にしてください。
AIは既存コードの切り分けが得意です。例えば、以下のように綺麗に分けてくれます。
- main.js: 全体の実行エントリーポイント
- api.js: 外部通信の処理
- ui.js: 画面描画の処理
こうして分割すると、AIが次からの修正で「必要なファイルだけ」を読めば済むようになり、応答の精度が上がり、トークン消費も抑えられます。
ファイル分割後は「仕様書」でAIの迷子を防ぐ
ファイルを分割したら、ひとつだけ重要な作業があります。「どのファイルが何を担当しているか」の目次（仕様書）を作っておくことです。
プロジェクトのトップフォルダに README.md や STRUCTURE.md、 SPECIFICATION.md を作成し、以下のように記載します。
ファイル構成と役割
- main.js: アプリの起動および全体のルーティング担当
- api.js: バックエンドAPIとの通信担当
- ui.js: DOM操作および画面レンダリング担当
AIツール（CursorやGitHub Copilotなど）は、作業を開始する前にプロジェクト内の設定や仕様書を検索します。この「役割ガイド」があることで、AIが関係ないファイルを誤って書き換えたり、同じ関数を重複して作ることを抑制できます。
プロトタイプは試作品と割り切って捨てる
プロトタイプで動くプログラムが完成しても、「試すための道具」であり、そのままリリースするものではありません。
「動き」を確かめるためのプロトタイプと、セキュリティや品質を担保した本番用コードは別物です。自分の中で「動く確信」が得られたら、そのプロトタイプを仕様書代わりにして、改めてクリーンな構造で書き直します。
まとめ
- 最初は1ファイルで実装のスピード感を最優先にする
- 1,000行を超えたらAIにファイル分割（リファクタリング）させる
- ファイル役割を仕様書に書いてAIをサポートする
頭の中にあるアイデアを爆速で形にできるよう、ぜひ実践してみてください！