生成AIを活用した大規模
ウェブアプリ開発のコツ

by

ウェブアプリの開発において、生成AIは強力な味方です。しかし、AIを使って大規模なプロジェクトを進めていくと、いくつかの課題に直面します。コードの重複、管理の複雑化、会話の散漫化、コンテキスト窓の限界など、特有の問題が発生します。この記事では、そうした課題を乗り越え、効率的に開発を進めるためのコツを紹介します。

関連記事

1. 生成AIでの開発に特有の課題

ウェブアプリを開発しているのですが、どうすれば大規模なツールを完成させることができますか？今まで徐々に機能を追加しているのですが、だんだん苦しくなってきました。 といって、はじめから大規模な設計をしても、うまくいきません。

とくに生成AIでコードを生成しているときに、重複するコードなどが散在してしまって、管理が複雑になってしまうようです。あるいは、チャットが長引くとコードを散漫になってきて、ダラダラ長くなりがちなんです。コードが大きくなると、コンテクストウィンドウのサイズの限界を感じます。

特に、モジュール分割をするタイミングと大きな機能を追加するタイミングで、うまくいかないです。

ウェブアプリの開発を始めるとき、多くの人は小さな機能から徐々に拡張していきます。この方法は確かに理にかなっていますが、規模が大きくなるにつれて様々な問題が発生します。特に生成AIを使った開発では、以下のような独特の課題があります。

1.1. コードの重複と散在

生成AIを使ってコードを作成していると、知らず知らずのうちに似たようなコードが複数の場所に書かれてしまうことがあります。これは料理で同じ調味料を何度も買ってしまうようなもので、整理が大変になり、変更が必要になったときに全箇所を探して修正しなければならなくなります。

1.2. 長いチャットでの散漫化

AIとの会話が長く続くと、焦点がぼやけてきて、コードが段々と整理されなくなります。これはミーティングが長引くと話題が脱線していくのに似ています。最初は明確だった方向性が、だんだんとあいまいになっていくのです。

1.3. コンテキスト窓の限界

生成AIには「記憶」の限界があります。会話が長くなりすぎると、以前の内容を忘れてしまい、一貫性のあるコードが作れなくなります。これは、大きな本を一度に読もうとするより、章ごとにしっかり理解していく方が効果的なのと同じです。

2. 効率的な開発のための基本戦略

これらの課題を乗り越えるには、いくつかの基本的な考え方が役立ちます。

2.1. 小さく始めて段階的に拡張する

最初から完璧を目指すのではなく、動く最小限のものを作り、そこから少しずつ機能を追加していきます。これは家を建てるとき、まず基礎と骨組みをしっかり作ってから、内装や設備を整えていくのに似ています。

AIに指示を出すときも、「全部を一度に作って」ではなく、「まず基本構造を作って」→「次に○○機能を追加して」というように段階的に進めるといいでしょう。

2.2. コードの構造化と再利用

似たような機能やデザインは、再利用できるコンポーネントにまとめます。例えば、ボタンのデザインが複数の場所で必要なら、Button.jsというコンポーネントを作り、色やサイズをパラメータで変えられるようにします。

AIに「再利用可能なコンポーネントとして作成して」と明確に指示すると、より整理されたコードが得られます。

2.3. モジュール分割と責任の明確化

アプリ全体を機能ごとに分け、各部分の役割を明確にします。例えば、「ユーザー認証」「データ表示」「設定管理」のように分けると、それぞれの部分を独立して開発・管理できます。

これは大きな掃除をするとき、部屋ごとに片付けていくのに似ています。全部を一度にやろうとすると混乱しますが、区切って進めると効率的です。

3. 生成AIとの効果的な対話方法

生成AIを使いこなすには、効果的な対話の方法を知ることが重要です。以下のポイントを押さえることで、より良いコードを効率的に生成できます。

3.1. チャットを目的ごとに区切る

一つのチャットですべてを作ろうとせず、機能ごとに新しいチャットを始めましょう。例えば、「ログイン機能の開発」「商品一覧表示の作成」のように目的を絞ります。

これは仕事のプロジェクトを複数のミーティングに分けるのと同じで、一度に扱う情報を適切な量に保つことで、議論が散漫になるのを防ぎます。

3.2. AIへの明確な指示出し

AIに指示を出すときは、具体的で明確な表現を心がけます。「なんとなくいい感じのデザインにして」より、「青を基調とした、角が丸いボタンで、ホバー時に少し明るくなるデザインにして」のように具体的に伝えると、意図した結果が得られやすくなります。

また、コードの生成を依頼するときは、「前のコードに追加して」より、「以下の部分を更新して」と具体的な箇所を指定する方が効果的です。

3.3. コンテキスト管理の工夫

AIとの長い会話では、重要な情報をコンパクトにまとめて伝えることが大切です。例えば、プロジェクトの構造や主要コンポーネントの説明を簡潔にまとめたものを用意し、新しいチャットの冒頭で共有すると効率的です。

プロジェクト概要：ECサイト
主要コンポーネント：
- 商品一覧(ProductList.js)
- 商品詳細(ProductDetail.js)
- カート(Cart.js)
- 注文処理(Checkout.js)
データフロー：商品一覧→詳細→カート→注文
Code language: CSS (css)

このように簡潔な情報を提供することで、AIは全体像を把握しながら、各部分の開発に集中できます。

4. モジュール分割と機能追加のタイミング

モジュール分割と機能追加のタイミングは、多くの開発者が頭を悩ませる部分です。それぞれ最適なタイミングと方法を見ていきましょう。

4.1. モジュール分割のタイミング

モジュール分割は、以下のサインが見られたときに検討するとよいでしょう：

  1. コードの重複が目立ち始めたとき: 同じようなコードが3箇所以上で登場したら、共通化を検討するタイミングです。
  2. ファイルの行数が増えすぎたとき: 一つのファイルが300行を超えたら、機能ごとに分割するサインです。
  3. 機能の境界が明確になったとき: 「これは独立した機能だ」と認識できたら、個別のモジュールに分けるべきです。

分割する際のコツは、一度にすべてを分けようとせず、最も明確な境界から始めることです。例えば、認証関連の機能は他と分離しやすいので、まずそこから着手するといいでしょう。

モジュール分割は料理のレシピをカテゴリーに分けるようなものです。最初は全部混ざっていても、「前菜」「メイン」「デザート」など、明らかな区分から整理していくと全体が見やすくなります。

4.2. 機能追加のベストタイミング

大きな機能を追加するタイミングも重要です。効果的なアプローチとしては：

  1. 既存機能が安定しているとき: 今ある機能のバグが落ち着いてから、新機能に着手します。
  2. 全体構造が整理できているとき: コードのリファクタリングが完了し、全体像が明確なときが最適です。
  3. 段階的な実装計画があるとき: 大きな機能も「まず最小限の動く版を作る→徐々に拡張する」というステップに分解します。

大きな機能追加は引っ越しのようなものです。今住んでいる家がきれいに片付いた状態で計画的に行うと、混乱なく進められます。

AIに機能追加を依頼するときは、「まず○○の基本部分を作って、その後で××の機能を追加する」というように段階的に指示すると、整理されたコードが得られやすくなります。

4.3. コード構造の整理と管理

大規模アプリでは、以下のようなモジュール構成が一般的です：

  1. コアモジュール: アプリ全体で使う基本機能（認証、APIアクセスなど）
  2. 共通コンポーネント: ボタン、フォーム、カードなど再利用可能なUI要素
  3. 機能モジュール: 特定の機能に関するコード一式（商品管理、ユーザー設定など）
  4. ページコンポーネント: 実際に表示される各ページ

この構成は図書館に似ています。基本的な分類（コア）があり、共通の棚（共通コンポーネント）があり、テーマごとのセクション（機能モジュール）があり、最終的に読者が手に取る本（ページ）があります。

アプリが大きくなると、データの流れや状態の管理も複雑になります。ReduxやVuexなどの状態管理ライブラリを導入すると、データフローがクリアになり、バグも減ります。これは、家族の予定表を冷蔵庫に貼っておくようなもので、情報が一箇所にまとまっていると管理しやすくなります。

5. コンテキスト窓の限界を突破する方法

生成AIの「記憶」には限界があります。大規模プロジェクトでこの限界を突破するには、次のような工夫が役立ちます。

5.1. モジュール分割アプローチ

アプリ全体ではなく、一度に1つのコンポーネントや機能に集中します。「今日はカート機能だけ」「明日はユーザープロフィール」というように区切ることで、AIが処理する情報量を適切に保てます。

これは大きな小説を書くとき、章ごとに集中して書いていくのに似ています。全体の構成は頭に入れつつも、今書いている部分に集中することで質が高まります。

5.2. 階層的な説明方法

まず全体構造を簡潔に説明し、その後で各部分の詳細を説明します。例えば、家の設計図を説明するとき、まず間取り全体を示してから、各部屋の詳細に進むのと同じです。

1. アプリの全体構造：認証→ダッシュボード→各機能
2. 今回開発する「ダッシュボード」の役割：ユーザー情報表示、最近の活動、機能へのリンク
3. ダッシュボードの詳細設計：レイアウト、コンポーネント構成、データ取得方法

このようにステップを踏むことで、AIは文脈を理解しながら詳細な実装に取り組めます。

5.3. ファイル単位の開発

一度に1つのファイルだけに集中することで、コンテキスト窓の限界を回避できます。例えば、「今回はProductList.jsの改良に集中します」と伝え、そのファイルだけを対象にします。

これは、大きなプロジェクトでもタスクを細分化して「今日はこの部分だけ」と集中するのと同じ発想です。

6. よくある失敗パターンと回避方法

生成AIを活用した開発では、以下のようなアンチパターンに注意が必要です。

6.1. 設計段階のアンチパターン

  1. 過剰な設計（オーバーエンジニアリング） 最初から完璧な設計を目指し、複雑すぎる構造を作ってしまうパターンです。例えば、小さなアプリに大企業向けの複雑なフォルダ構造やデザインパターンを適用してしまい、開発速度が遅くなります。 回避方法: まずは最小限の構造から始め、必要に応じて拡張します。「この機能は本当に必要か？」と常に問いかけることが大切です。
  2. 設計なしの場当たり的な開発 逆に、全く設計せずに「とりあえず動けばいい」という考えで進めるパターンです。AIに「こんな機能を作って」と次々指示するだけで、全体の整合性を考慮しません。 回避方法: 簡単でもいいので全体像の設計図を描き、それに沿って開発を進めます。機能追加の前に「この機能はどこに位置づけられるか」を考えることが重要です。

6.2. 実装段階のアンチパターン

  1. コピペの連鎖 AIが生成したコードをそのままコピペし続け、似たようなコードが散在する状態です。修正が必要になった時に全箇所を探し出せず、一部だけ修正して不整合が生じます。 回避方法: 似たコードが出てきたら即座に共通化を検討します。AIに「このコードと似た部分がありますが、共通コンポーネントにできますか？」と質問するのも効果的です。
  2. 巨大ファイルの肥大化 1つのファイルにどんどん機能を追加し、数千行の巨大なコードになるパターンです。特にApp.jsやindex.jsなどの主要ファイルがこうなりがちです。 回避方法: ファイルが300行を超えたら分割を検討します。機能単位でファイルを分け、それぞれの役割を明確にします。
  3. AIへの丸投げ 「全部やってください」とAIに投げて、生成されたコードの仕組みを理解せずに使うパターンです。後々修正や拡張が必要になった時に手が出せなくなります。 回避方法: 生成されたコードを必ず確認し、理解します。わからない部分はAIに説明を求め、知識を身につけながら進めます。

6.3. モジュール分割と機能追加の失敗パターン

  1. 中途半端な分割 モジュール分割を始めたものの、一部だけで中断してしまい、アプリ内に異なる設計思想が混在するパターンです。新しく参加した開発者が混乱する原因になります。 回避方法: 分割を始めたら一定の範囲で完了させ、明確な境界を作ります。「今回はユーザー関連だけ分割する」といった具合に範囲を限定すると効果的です。
  2. 抽象化の過剰と不足 極端に汎用的なコンポーネントを作りすぎて複雑になるか、逆に全く抽象化せずに個別実装が乱立するかのどちらかに陥るパターンです。 回避方法: 「3回ルール」を適用します。同じようなコードが3回出てきたら抽象化を検討し、それ以前は具体的なまま実装します。
  3. 大きすぎる機能追加 一度に大きな機能を追加しようとして、計画通りに進まず、中途半端な状態で放置されるパターンです。 回避方法: 大きな機能も小さなステップに分解し、一つずつ実装・テストします。例えば「支払い機能追加」ではなく「まず支払い画面の UI 作成」「次に入力検証の実装」といった具合に細分化します。

7. まとめ

生成AIを使った大規模ウェブアプリ開発では、コードの重複や管理の複雑化、コンテキスト窓の限界という課題がありますが、適切な戦略を用いることでこれらを克服できます。

効果的なアプローチをまとめると：

  1. 小さく始めて段階的に拡張する
  2. コードを構造化して再利用する
  3. チャットを目的ごとに区切る
  4. AIに明確な指示を出す
  5. コンテキスト管理を工夫する
  6. モジュール分割と機能追加のタイミングを見極める
  7. よくある失敗パターンを理解し回避する

これらのテクニックを取り入れることで、生成AIの力を最大限に活かしながら、整理されたコードベースを持つ大規模ウェブアプリを構築できるでしょう。理想的な開発は、一度に達成されるものではなく、継続的な改善の積み重ねによって実現します。