AI ペアプログラミングを使用したアプリの構築: スプリントからの教訓-jsチュートリアル-php.cn

開発者として、私たちは生産性を向上させ、ワークフローを合理化する方法を常に模索しています。 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 ツールを組み合わせて使用しました。

ChatGPT (o1 モデル): 高レベルの計画、要件の収集、一般的なガイダンス用
Claude 3.5 Sonnet via WindSurf/Cascade: コード生成と特定の開発タスクには、Codeium の WindSurf というツールを使用しました。これは本質的に、AI を備えた Visual Studio Code から構築された IDE です。コードライターが組み込まれています。ファイルに直接アクセスでき、バージョン管理を使用してファイル全体をすばやく作成および編集できます。
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.

ログイン後にコピー

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

ドキュメント

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

反復開発

Building an App with AI Pair Programming: Lessons from a our Sprint

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

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

私が見つけた巧妙なトリックは、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.

ログイン後にコピー

[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 を軌道に乗せるか、手動でコーディングするかを決定するために細心の注意を払う必要がありました。

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

Building an App with AI Pair Programming: Lessons from a our Sprint

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

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

Git を頻繁にコミットする: AI に大幅な変更を加える前に、現在の状態をコミットします。これにより、問題が発生した場合に簡単にフォールバックできます。
定型コードの準備: AI 支援を利用する前に、プロジェクトの構造と基本構成をセットアップします。私の場合、これは次のことを意味します:
- Quasar/Vue CLI のセットアップ
- Firebase CLI とコンポーネントの構成
- 基本的なプロジェクト構造の確立
明確かつ詳細なプロンプト: 要件をできるだけ具体的にします。関連するコンテキストと例を含めます。要件と設計段階にできるだけ多くの時間を費やし、可能な限り詳細を提供してください。これらのメモと指示は、プロジェクトをより適切に実行するのに役立つだけでなく、AI によって生成されるコードの品質を大幅に向上させます。
反復フィードバック: 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.

ログイン後にコピー

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

評決

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

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

楽しみにしている

Building an App with AI Pair Programming: Lessons from a our Sprint

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

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

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