JavaScript で GitHub Copilot を使う
前のユニットでは、Copilot を設定する方法を示し、開発者がコードの記述をより速く開始する方法について説明しました。
このユニットでは、Copilot が既存のプロジェクトを支援し、より複雑なタスクを支援する方法について説明します。
GitHub Copilot を使用した開発
多くの場合、プロジェクトをビルドするときに、コードが最新で、かつ更新されていることを継続的に確認する必要があります。 さらに、場合によっては、発生したバグを修正するか、新機能を追加して機能性と使いやすさの向上を図る必要があります。 GitHub Copilot と GitHub Copilot Chat (コード関連の質問と回答をやり取りするための対話型チャット インターフェイス) を使用して更新する方法をいくつか見てみましょう。
プロンプト エンジニアリング
GitHub Copilot では入力時にコードを提案できますが、プロンプトをビルドして便利な候補を作成することもできます。 入力であるプロンプトは、コードの生成に役立つ命令またはガイドラインのコレクションです。 プロンプトは、Copilot から特定の応答を生成するのに役立ちます。 GitHub Copilot Chat を使用している場合、プロンプトは、Copilot にコードを自動生成させたり、Copilot が自動補完するコードを記述させたりするためのコメントや入力として機能することができます。
Copilot からの出力の品質は、プロンプトを作成する方法によって異なります。 効果的なプロンプトを作成することは、目的の結果を達成する上で不可欠です。 たとえば、次のようなプロンプトがあるとします。
// Create an API endpoint
プロンプトはあいまいで漠然としているため、GitHub Copilot の結果がニーズに合っていない場合があります。 たとえば、あなたが知らないフレームワークが使われている、またはあなたが認識しないデータを必要とするエンドポイントが使われていることがあります。 しかし、次のようなプロンプトがある場合:
// Create an API endpoint using the React framework that accepts a JSON payload in a POST request
この最後のプロンプトは具体的で明確であり、これにより GitHub Copilot はタスクの目標とスコープを理解できます。 コメントやコードを使用して Copilot にコンテキストと例を提供することもできますが、GitHub Copilot Chat のチャット オプションを使用することもできます。 適切なプロンプトであれば、モデルは確実に高品質な出力を出力します。
GitHub Copilot を使用したベスト プラクティス
Copilot は生産性を高めますが、品質を確保するにはいくつかの適切なプラクティスが必要です。 Copilot を使用する場合のベスト プラクティスは次のとおりです。
プロンプトをシンプルにして、次のように、さらに複雑なコンポーネントを追加します。
create an HTML form with a text field and button次に、より具体的な提案を得るプロンプトについて詳しく説明します。
Add an event listen to the button to send a POST request to /generate endpoint and display response in a div with id "result"候補を切り替えるには、Ctrl+Enter (Mac 上では Cmd+Enter) を使用します。 Copilot からさまざまな提案を受け取り、最適な出力を選択できます。 GitHub Copilot Chat を使用する場合は、必要に応じて、チャット入力を使用してプロンプトを追加し、出力を操作できます。
先に進めない場合や、必要な結果が得られない場合は、プロンプトを書き直すか、オートコンプリートするように Copilot のコードの記述を開始します。
Note
GitHub Copilot は、テキスト エディターで開いているファイルを追加のコンテキストとして使用します。 これは、記述しているプロンプトやコードに加えて有用な情報を提供するため、便利です。 GitHub Copilot が他のファイルに基づいて提案を提供する必要がある場合は、それらを開くか、GitHub Copilot Chat を使用している場合はプロンプトで @workspace を使用できます。