過去 2 年間にわたり、Work & Co のチームと私は、Copilot、Cursor、Claude、ChatGPT などの AI コーディング ツールをテストし、徐々に統合して、大衆が使用する Web エクスペリエンスを提供できるようにしてきました。確かに、最初は懐疑的で、いくつかのなるほどと思った瞬間を経て、さまざまな AI ツールが私の日常の使用に取り入れられました。時間が経つにつれて、AI に任せることが合理的であると判断したアプリケーションのリストが増え始めたので、私が「責任ある開発者」と呼んでいる人向けに、AI ツールの実用的な使用例をいくつか共有することにしました。 責任ある開発者とは何を意味しますか? 私たちは、利害関係者やクライアントが期待する高品質のコードを確実に提供する必要があります。私たちの貢献 (つまり、プルリクエスト) は、私たちの作業をレビューしてテストする必要がある同僚にとって負担になるべきではありません。また、会社に勤めている場合: 当社が使用するツールは雇用主の承認が必要です。セキュリティやプライバシーなどの機密性の高い側面は適切に処理する必要があります。ポリシーの承認なしに機密情報、顧客データ (PII)、または独自のコードをツールに貼り付けないでください。インターネット上の見知らぬ人からのコードのように扱ってください。常にテストして検証してください。 注: この記事は、VSCode 内の Copilot や Cursor などの AI コーディング ツールに関する基本的な知識があることを前提としています。これらすべてがまったく新しく、馴染みのないものに聞こえる場合は、Github Copilot ビデオ チュートリアルが素晴らしい出発点となります。
AI コーディング ツールの役立つアプリケーション 注: 次の例は主に、React、Vue、Svelte、Angular などの JavaScript ベースの Web アプリケーションでの作業に焦点を当てています。 馴染みのないコードベースを理解する 確立されたコードベースで作業することは珍しいことではありませんが、大規模なレガシー コードベースに参加することは恐ろしい場合があります。プロジェクトと AI エージェント (私の場合は VSCode の Copilot Chat) を開いて、同僚に質問するのと同じように質問を開始するだけです。一般に、私は他の人間と話すのと同じように、AI エージェントと話すのが好きです。 より洗練されたプロンプトの例を次に示します。 「アーキテクチャの概要を説明してください。エントリポイント、ルーティング、認証、データ層、ビルドツールです。次に、順番に読むファイルを 5 つリストアップします。説明は仮説として扱い、参照ファイルにジャンプして確認してください。」
「ルーティングはどのように詳細に機能しますか?」などのフォローアップの質問を続けることができます。または、「認証プロセスと方法について話してください」と尋ねると、なじみのないコードベースの暗闇に光を当てるための役立つ指示が得られます。 依存関係をアップグレードする際の重大な変更の優先順位付け npm パッケージの更新は、特に重大な変更が伴う場合、退屈で時間のかかる作業となり、かなりの量の回帰をデバッグする必要があります。最近、データ視覚化ライブラリのplotly.jsをメジャー リリース バージョン2から3にアップグレードする必要があり、その結果、一部のグラフの軸ラベルが機能しなくなってしまいました。 続けてChatGPTに質問してみました。 「Plotly を使用する Angular プロジェクトを更新しました。plotly.js (dist パッケージをバージョン 2.35.2 から 3.1.0 に更新しました) を更新しました。x 軸と y 軸のラベルが消えました。何が起こったのでしょうか?」
エージェントはすぐに解決策を持って戻ってきました (下記をご覧ください)。 注: 修正を出荷する前に、公式の移行ガイドと照らし合わせて説明を確認しました。
ファイル間でリファクタリングを安全に複製する コードベースの成長により、コード統合の機会が明らかになります。たとえば、単一の関数またはコンポーネントに抽出できるファイル間でコードが重複していることに気づきます。その結果、代わりに含めることができる共有コンポーネントを作成し、そのリファクタリングを 1 つのファイルで実行することにしました。ここでは、残りのファイルにこれらの変更を手動で実行する代わりに、エージェントにリファクタリングをロールアウトするよう依頼します。 エージェントを使用すると、複数のファイルをコンテキストとして選択できます。 1 つのファイルのリファクタリングが完了したら、リファクタリングされたファイルと変更されていないファイルの両方をコンテキストに追加し、「ファイル A に加えた変更をファイル B にもレプリケートする」のように、他のファイルに変更をロールアウトするようにエージェントに指示できます。 馴染みのないテクノロジーでの機能の実装 AI コーディング ツールを使用して私が最も気に入った瞬間の 1 つは、これまであまり馴染みのなかった言語である GLSL で非常に複雑なグラデーション アニメーションを作成するのに役立ったときです。最近のプロジェクトで、当社のデザイナーは 3D オブジェクトの読み込み状態としてアニメーション化されたグラデーションを考案しました。私はそのコンセプトがとても気に入ったので、ユニークでエキサイティングなものをクライアントに提供したいと考えていました。の問題: 実装するのに 2 日しか時間がありませんでしたが、GLSL の学習曲線は非常に急でした。 ここでも AI ツール (この場合は ChatGPT) が役に立ち、キャンバスと非常にシンプルなアニメーション カラー グラデーションをレンダリングするスタンドアロン HTML ファイルを作成するよう、非常に単純にツールに指示するようになりました。適切な結果に到達するまで、段階的に AI にさらに細かい調整を加え、シェーダーを実際のコードベースに統合し始めることができるようにしました。 最終結果: お客様は非常に満足し、AI のおかげで複雑な機能を短時間で提供できました。 ライティングテスト 私の経験では、適切な単体テストと統合テストのスイートを継続的に作成して維持するのに十分な時間がプロジェクトにあることはほとんどありません。その上、多くの開発者はテストを作成する作業をあまり楽しんでいません。 AI ヘルパーにテストのセットアップと作成を促すことは完全に可能であり、短時間で実行できます。もちろん、開発者は、テストが実際にアプリケーションの重要な部分を調べ、賢明なテスト原則に従っていることを確認する必要がありますが、テストの作成を AI ヘルパーに「アウトソーシング」することもできます。 プロンプトの例: 「Jest を使用して、この関数の単体テストを作成します。ハッピー パス、エッジ ケース、障害モードをカバーします。各テストが存在する理由を説明します。」
以下のように、テストの第一人者である Kent C. Dodds のテストのベスト プラクティスをガイドラインとしてエージェントに伝えることもできます。
内部ツーリング 前述のシェーダーの例と似ていますが、私は最近、コードベース内のコードの重複を分析し、リファクタリングの前後を比較するという任務を与えられました。ファイルを手動で比較するという時間のかかる方法をとりたくない場合は、確かに簡単な作業ではありません。 Copilot の助けを借りて、コードの重複を分析し、出力を表に整理して順序付けし、Excel にエクスポートするスクリプトを作成しました。それから私はさらに一歩進めました。コードのリファクタリングが完了したとき、私はエージェントに、既存の Excel シートをベースラインとして取得し、現在の重複状態を別の列に追加してデルタを計算するように指示しました。 ずっと前に書かれたコードを更新する 最近、私の古いクライアントから、時間の経過とともに、彼のウェブサイトでいくつかの機能が適切に動作しなくなったため、私に連絡がありました。 問題点: この Web サイトはほぼ 10 年前に構築され、JavaScript と SCSS は requireJS などのかなり古いコンパイル ツールを使用しており、セットアップには古いバージョンの Node.js が必要でしたが、私の 2025 MacBook では動作しませんでした。 ビルド プロセス全体を手動で更新するには数日かかるため、AI エージェントに「JS および SCSS ビルド プロセスを Vite のようなリーン 2025 スタックに更新できますか?」と尋ねることにしました。確かにその通りで、エージェントと約 1 時間調整した後、SCSS と JS ビルドを Vite に切り替えて、実際のバグ修正に集中することができました。ビルド プロセスにこのような重要な変更を加える場合は、出力ファイルとコンパイルされたファイルを適切に検証するようにしてください。 要約と草稿 最近のコード変更をすべてコミット メッセージの 1 つの文に要約したいですか、それともコミットの長いリストがあり、それらを 3 つの箇条書きに要約したいですか?問題ありません。AI に任せてください。ただし、校正は必ず行ってください。 プロンプトの例は、「最近の変更点を簡潔に箇条書きで要約してください」というメッセージを他の人間に送信するのと同じくらい簡単です。 ここでのアドバイスは、GPT を使用して作成する場合は注意すること、コードと同様に、送信または送信する前に出力を確認することです。 推奨事項とベストプラクティス プロンプト AI を使用することのあまり明らかではない利点の 1 つは、プロンプトがより具体的でカスタマイズされているほど、出力が向上することです。 AI エージェントを促すプロセスでは、コードを作成する前に要件をできるだけ具体的に定式化する必要があります。このため、一般的なルールとして、プロンプトをできるだけ具体的にすることを強くお勧めします。 Remix の共著者である Ryan Florence は、最初のプロンプトを次の文で終えることで、このプロセスを改善するシンプルかつ強力な方法を提案しています。 「始める前に、何か質問はありますか？」
この時点で、AI は通常、ユーザーの具体的な意図を明確にするための役立つ質問を返し、エージェントがタスクに合わせたより適切なアプローチを提供するように導きます。
バージョン管理を使用し、消化可能なチャンクで作業する git のようなバージョン管理を使用すると、単一のコードベースでチームとして共同作業するときに便利なだけでなく、緊急時にロールバックできる安定したポイントを持つ個人の投稿者。 AI はその非決定的な性質により、場合によっては不正行為を行い、達成しようとしている目的にまったく役に立たない変更を加え、最終的には物事を取り返しのつかないほど破壊してしまう可能性があります。 作業を複数のコミットに分割すると、物事がうまくいかなかった場合に戻せる安定したポイントを作成するのに役立ちます。また、意味的に適切に構造化されたチャンクにコードが分割されると、コードをレビューしやすくなるため、チームメイトもあなたに感謝するでしょう。 徹底的に見直す これは一般的なベスト プラクティスですが、開発作業に AI ツールを使用する場合は、コードの最初の批判的レビュー者になることがさらに重要になると私は考えています。他の人のコードをレビューするのと同じように、時間をかけて変更を 1 行ずつ確認し、自分のセルフレビューに合格した場合にのみ作業を送信してください。 「今、私にとって 2 つのことは両方とも当てはまります。AI エージェントは驚くべきものであり、生産性を大幅に向上させます。また、脳の電源を切って完全に解放すれば、巨大なスロップマシンにもなります。」— Armin Ronacher のブログ投稿「エージェント精神病: 私たちは狂気になっているのか?」
結論と批判的思考 私の意見では、AI コーディング ツールは、開発者としての日常的な生産性を向上させ、より多くの計画や高度な思考のための精神的余裕を解放します。それらは、私たちが望む結果を細心の注意を払って明確に表現することを私たちに強います。 どの AI も時として幻覚を見ることがありますが、これは基本的に自信に満ちた口調で横たわっていることを意味します。したがって、特に疑問がある場合は、必ず確認してテストしてください。 AI は特効薬ではありません。開発者としての卓越性と問題解決能力は決して時代遅れになることはないと私は信じています。 キャリアを始めたばかりの開発者にとって、これらのツールが作業の大部分を自分に代わってやってくれることは非常に魅力的です。ここで失われる可能性があるのは、デバッグと解決が難しいバグや問題を処理する、しばしば骨の折れる骨の折れる作業、別名「グラインド」です。 Cursor AI 自身の Lee Robinson でさえ、自身の投稿の 1 つでこれに疑問を抱いています。
AI コーディング ツールは急速に進化しており、次に何が起こるかが楽しみです。この記事とそのヒントがお役に立てば幸いです。ぜひご自身でこれらのいくつかを試してみてください。
