AI ペア プログラミングを使用したアプリの構築: スプリントからの教訓

開発者として、私たちは生産性を向上させ、ワークフローを合理化する方法を常に模索しています。 AI の最近の進歩 (そして、これらのテクノロジが革新的になるという私の強い信念) を受けて、私はこれらのツールを現実の開発シナリオでテストすることにしました。

• 私の目標: フルスタックの AI を活用した食品追跡アプリの PoC をわずか 7 時間で構築します。

• 結果: かなりうまくいきました!しかし、課題がないわけではありません。

開発仲間として AI を使用することについて私が学んだことは次のとおりです。

プロジェクト

目標は野心的ではありましたが、焦点を絞ったものでした。ユーザーが食べ物を写真に撮り、AI 認識を使用して食べ物追跡装置に自動的に記録できるモバイル アプリを作成するというものです。技術スタックには、私の頼りになる Quasar Framework (VueJS Framework)、Google Firebase、Capacitor (Mobile Dev Framework) と、AI 推論用の Google Gemini 2.0 Flash が含まれていました。

超豪華なものはありませんが、AI 支援をテストするには十分以上の複雑さがあります。

A.I.ツール

プロジェクトのさまざまな側面を支援するために、AI ツールを組み合わせて使用​​しました。

1. ChatGPT (o1 モデル): 高レベルの計画、要件の収集、一般的なガイダンス用
2. Claude 3.5 Sonnet via WindSurf/Cascade: コード生成と特定の開発タスクには、Codeium の WindSurf というツールを使用しました。これは本質的に、AI を備えた Visual Studio Code から構築された IDE です。コード ライターが組み込まれています。ファイルに直接アクセスでき、バージョン管理を使用してファイル全体をすばやく作成および編集できます。
3. Google Gemini 2.0 Flash: 画像認識と食品分類用。このモデルは非常に強力で、非常に安価です。

「開発インターンとしての AI」アプローチ

私が得た最も貴重な洞察の 1 つは、ジュニア開発者またはインターンとして AI について考えたことです。このメンタル モデルは、コラボレーションに対する私のアプローチ方法を完全に変えました。新しいインターンの机にプロジェクト全体を放り込んで完璧な結果を期待しないのと同じように、私は次のことを学びました:

• 指示は明確にしてください
• タスクを管理可能なチャンクに分割する
• 出力を確認し、フィードバックを提供します
• 一度に多くを期待しすぎないでください
• 必要に応じてガイダンスや指示を与える

このアプローチはより良い利益をもたらし、AI を「全知」または「完全に信頼できない」ものとして扱うよりも効果的でした。

うまくいったこと

計画と要件

AI は計画段階で非常に役立つことが証明されました。私はプロジェクトの大まかな概要から始めて、プロンプトを繰り返して改良していきました。たとえば、私の最初のプロンプトの 1 つは次のとおりです:

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

これにより、プロジェクトの範囲とスケジュールを具体化するのに役立つやり取りが発生し、より現実的で詳細な計画につながりました。

ドキュメント

AI ツールはドキュメントの生成と維持に優れていました。包括的なマークダウン ファイルを迅速に作成し、プロジェクトの進化に応じてファイルを更新し続けることができます。これにより、貴重な時間を実際の開発作業に費やすことができました。

反復開発

開発をより小さく、焦点を絞ったプロンプトに分割することは、非常に効果的であることが証明されました。コンポーネント全体を一度に生成しようとするのではなく、プロンプトのカスケードを使用し、それぞれが前のプロンプトに基づいて構築しました。例:

1. まず、Firebase バックエンド インフラストラクチャをセットアップします
2. 次に、フロントエンドのボイラープレートを構築します
3. カメラキャプチャ画面などの特定の機能を次に示します
4. 最後に、データ処理と表示機能を追加します

私が見つけた巧妙なトリックは、AI を搭載することでした。進行状況と次のステップをメモしておき、プロンプトの間に参照できるようにします。 WindSurf を使用していたので、「マスター プロンプト」を使用して会話を続けることができました。マスター プロンプトは AI に指示します。コードを書きながらメモを参照して追加します。

バグ修正と開発後

WindSurf が光ったもう 1 つの場所は、バグ修正と開発後のタスクです。

アプリをテストしていくつかのバグに気づいた後、リストを WindSurf に渡すと、問題をすぐに特定して修正し、修正が機能することを確認するためのテスト ケースも生成できました。これにより、時間と労力が大幅に節約されました。

次のようなバグのリストがありましたが、手動で修正する必要があったのはほんの数回だけでした。

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

• [x] バグ> 写真を撮ってキャンセルを押した後にカメラが空白になる (Web 実装)
• [x] バグ> 検出された食品ビュー内 食品が検出されなかった場合、リストは空白になりますが、これは良いことですが、食品が検出されていないことを説明するために、何らかのアイコンとテキストを表示する必要があります。追加または検出されました
• [x] バグ> 検出された食品ビューで、各項目 (テキスト タイトル、信頼度、削除ボタン、一致する食品ドロップダウンの選択) を追加して、より明確にグループ化するとよいでしょう。これらすべての要素は、同じ食品検出の一部です。これは、Q カード、より良いスタイルなどを介して行うことができます
• [ * ] バグ> 検出された食品ビューで、(カメラ経由で追加されたアイテムではなく) 検索のみで追加されたもののドロップダウンを開こうとすると、[一致する食品を選択] ドロップダウンが適切に再度開かない)
• [x] バグ> 検出された食品ビューで、[キャンセル] ボタンを押すとユーザーはダッシュボードに戻るはずです 入力が空の場合、debounceSearch は起動されません
• [-] 機能> エントリーの送信 (バックエンド) - IMG を取得し、サイズ変更、トリミング、圧縮などを行って、画像を 128*128 の正方形にうまく収まるようにします。画像に複数のサイズを作成し、送信用のレコードに画像へのリンクを (imageUrl とともに) 追加します
• [x] 機能> ダッシュボード - キャプチャされた各食事エントリの IMG を表示し、適切なサイズを読み込みます
• [x] 機能> 食事ページの追加 ->すべての詳細とチャートなどを表示
• [x] 機能> 食事編集機能の追加 ->カメラ ページ ビューからモーダルを戻しますが、モーダルのみを使用します。カメラを起動しないでください。
• [x] 機能> 食事の削除機能を追加
• [x] 機能> 食事の履歴表示: すべての食事エントリを日ごとにページ分けして表示する機能。クエーサー タイムラインを使用する ->メニューに「食事」ボタンがあり、このページに移動します。このページには、IndexPage.vue
の食事エントリに表示されるのと同じ種類のカードが表示されるはずです。
• [x] 機能> 水の履歴表示: すべての水のエントリを日ごとにページ分けして表示する機能、Quasar タイムラインを使用 ->メニューに「水」ボタンがあり、このページに移動します。このページには、IndexPage.vue
の水のエントリに表示されるのと同じタイプのカードが表示されるはずです。
• [x] バグ> 水履歴編集が機能しない
• [x] バグ> 水履歴データがおかしい

課題と落とし穴

すべてが順風満帆だったわけではありません。いくつかの重要な課題が明らかになりました:

ファイル編集の問題

ファイルの変更に関していくつかの制限があることがわかりました:

• 開いているファイルがロックされているように見える、または WindSurf によって編集できなくなることがある
• 会話が長くなると、コード編集の品質が確実に低下します

注: これを書いている時点では、ファイル ロック/ファイル編集失敗のバグは WindSurf の最新バージョンで修正されているようです。

コンテキスト管理

会話が長くなると AI 支援の品質が低下しました。 1 つの長いセッションを維持しようとするのではなく、新しいコンポーネントについて新たな会話を開始し、凝縮されたコンテキストを提供することを学びました。

コードが長く複雑になるにつれて、AI は追いつくのに苦労しました。品質を維持するためにタスクをより小さく管理しやすい塊に分割するか、AI を軌道に乗せるために多くの詳細とコンテキストを提供する必要がありました。

軌道から外れると、機能を削除したり、関連するコードを削除したり、場合によっては完全に間違ったものを構築したりする必要があります。これは大きな時間のロスであり、AI を軌道に乗せるか、手動でコーディングするかを決定するために細心の注意を払う必要がありました。

手動でコーディングするタイミングを知る

場合によっては、自分でやった方が単に早い場合もあります。これらの瞬間を認識することを学ぶことで、かなりの時間とフラストレーションを節約できました。私の開発ログには次のように記されています: 「うまくいくときはうまくいきますが、うまくいかないときは時間がかかる可能性があります。」

現れたベストプラクティス

1. Git を頻繁にコミットする: AI に大幅な変更を加える前に、現在の状態をコミットします。これにより、問題が発生した場合に簡単にフォールバックできます。

2. 定型コードの準備: AI 支援を利用する前に、プロジェクトの構造と基本構成をセットアップします。私の場合、これは次のことを意味します:

   • Quasar/Vue CLI のセットアップ
   • Firebase CLI とコンポーネントの構成
   • 基本的なプロジェクト構造の確立

3. 明確かつ詳細なプロンプト: 要件をできるだけ具体的にします。関連するコンテキストと例を含めます。要件と設計段階にできるだけ多くの時間を費やし、可能な限り詳細を提供してください。これらのメモと指示は、プロジェクトをより適切に実行するのに役立つだけでなく、AI によって生成されるコードの品質を大幅に向上させます。

4. 反復フィードバック: AI を修正したり指導したりすることを躊躇しないでください。たとえば、要件と完全に一致しない出力を受け取ったときは、次のような具体的なフィードバックを提供しました。
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
</information>

この種の具体的なフィードバックは通常、迅速かつ正確な修正につながります。

評決

AI を使用することで開発が確実に加速しました。指導と時折の修正が必要でしたが、ChatGPT と Claude を WindSurf と組み合わせることで、同じ時間枠で単独で達成できるよりもはるかに進歩することができました。

とはいえ、成功するには、これらのツールの機能と制限の両方を理解する必要がありました。鍵となったのは、AI 支援と人間の専門知識の適切なバランスを見つけ、それぞれが得意とするところを活用することでした。

楽しみにしている

この実験は、AI ツールが開発ワークフローの不可欠な部分になる未来を示唆しています。今のところ、開発者に取って代わるのではなく、その機能を強化します。重要なのは、これらのツールを効果的に使用する方法を学び、その長所と限界を理解し、短所を最小限に抑えながら利点を最大化するワークフローを開発することです。

ワークフローに AI を組み込むことに興味のある開発者には、小規模から始めて対話の明確なパターンを確立し、AI の機能と制限に慣れてきたら段階的に AI の役割を拡大することをお勧めします。

ツールはジュニア開発者のレベルにあり、十分なトレーニング データと反復があれば、すぐにさらに多くのことができるようになります。これらのツールが最終的にはアプリケーション全体を作成し、開発プロセスの大部分を処理していることがわかります。モデルが上級開発者をシミュレートできるようになるまでは、依然として人間の監視と指導が必要です。

強み:

• ドキュメント: ドキュメントの生成と維持
• マイナーなバグ修正 / トラブルシューティング: バグの特定と修正
• 単体テスト: テスト ケースを生成し、コードの品質を確保します
• コード生成 / 小規模コンポーネント: 開始するための定型コードと基本コンポーネントの作成
• 計画と要件の収集: プロジェクトの範囲とスケジュールの概要を説明します
• インフラストラクチャのセットアップ: Terraform、Dockerfiles などを使用して、基本的なプロジェクト構造とセットアップを構成します。
• 急速な学習とプロトタイプの生成: 新しいフレームワークを迅速に学習し、プロトタイプを生成します

弱点:

• 複雑なロジック: 複雑なビジネス ロジックまたは複雑なアルゴリズムの処理
• デザインと UX: 視覚的に魅力的なインターフェイスまたはユーザー エクスペリエンスの作成
• より大きなコンポーネントの作成: 複雑なモジュールまたはより大きなコンポーネントをエンドツーエンドで作成します
• コンテキスト / メモリ: 長い会話または複数のコンポーネントにわたってコンテキストを維持します
• 複雑なデバッグ: 複雑な問題や特殊なケースのトラブルシューティングには、多くの場合、役立つガイダンスが必要です
• 最新のテクノロジーを最新の状態に保つ: 最新のフレームワーク、ライブラリ、ベスト プラクティスを常に把握する

このテクノロジーが今後どのような方向に進み、ソフトウェア開発の未来をどのように形作るのかを見るのが楽しみです。

写真！！！

ここに、7 時間で構築できたアプリの簡単なスクリーンショットをいくつか示します。完璧ではありませんが、順調なスタートです!

(カメラを使用して食べ物を撮影する)

(食品認識のために画像を A​​I に送信)

(結果の表示 - トラッカーへの食品の追加)

(食べ物の入力の確認)

(ダッシュボードビュー)

(食品エントリービュー)

恥知らずだが関連性のあるプラグ:

この投稿で言及されているフード アプリにまだ取り組んでいますが、WindSurf と A.I. を使用して別のプロジェクトを非常に早く完了することができました。

コミット メッセージとリリース ノートの保守を容易にする AI を活用した Git CLI ヘルパーに興味がある場合は、eGit をチェックしてください

以上がAI ペア プログラミングを使用したアプリの構築: スプリントからの教訓の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。