AIコーディングアシスタントを使ってフロントエンドでVibeCodingしてみた所感

前提

今回の開発環境は以下のとおりです。

• モデルは Claude Sonnet 4 を主に利用
• IDEは Cursor や VS Code + GitHub Copilot を利用

小〜中規模のWebアプリケーションをフロントエンド中心に実装しながら、実際の体験をまとめています。

---

全体を通しての所感

• 設計書ありきの進め方が必須 です。正しい情報がSSoT（Single Source of Truth）として設計書にまとまっていないと、後半で破綻します。
• 毎日違うメンバーに仕事を依頼しているような感覚になります。
• 過去に人へタスクを振る業務をしていた経験があれば活かせますが、一人で使う場合は大変さが増します。
• 結局のところ、ボトルネックは人間のレビュー速度 でした。AIの提案スピードに人間が追いつくのは容易ではありません。

---

実際にやってみて感じたこと

コンテキストの忘却

• すぐにコンテキストを忘れる 傾向があります（特にClaudeは顕著と感じました）。
• タブを切り替えるとまず忘れてしまいます。
  • ただし、あえてコンテキストを引き継がないでほしいときや、文脈不要でできる作業では便利でもあり、一長一短です。

コンテキストが膨大になると

• 大事な部分を忘れることが増えます。
  • 設計書やルールに書いてあっても忘れることがあります。
  • その結果、ハルシネーションが発生しやすい と感じました。
• コードやコンテキストが大規模になると、理解力やコーディング性能が落ちます。
  • 読み込みにリソースを取られ、誤った判断をするケースもあります。
  • そのため、作業箇所を厳密に指定 してあげないといけなくなります。

ドキュメント化の必要性

• 途中から増えたルールや仕様を、自動でドキュメント化する仕組み が必要だと強く感じました。
• コーディング中に「正しいルート」を進んだ場合、それを評価してルールとしてドキュメントに追加する仕組みが欲しいです。
  • そうでないと、忘れたときに再び正しいルートをたどってくれません。

リファクタリングタスクの難しさ

• コード量が多い状態で「全体に適用するリファクタリング」を雑に依頼すると、
  一度に保持できるリソース量の制約によりコード全体を把握できません。
• そのため、人間側で咀嚼し、適切に分割して渡す必要 があります。

指示の精度と「ガチャ化」

• 雑に指示すると結果がガチャのようになりがちです。
• 応答を重ねるとコンテキストがさらに増え、忘却が発生します。
• 最初から丁寧に指示 する必要があります。
  • ただし、それは非常に面倒でもあります。

---

まとめ

AIコーディングアシスタントを使ってフロントエンドでVibeCodingを試してみると、
設計書とSSoTの重要性、コンテキスト管理の難しさ、そして人間のレビュー速度が最大のボトルネックであることを痛感しました。

便利さの一方で、雑に依頼すると結果が不安定になり、
安定して成果を出すには「設計書」「ルールの明確化」「丁寧な指示」「適切な分割」が欠かせません。

AIの提案を活かすには、最初から仕様や設計の完成度を高めておくことが前提条件になります。
これは近年注目されている SDD（Spec Driven Development） の考え方とも重なり、
今後の開発スタイルを大きく変えていく鍵になると感じています。