GitHub Copilotの便利な機能を体験してみよう
ここまででGitHub Copilotを利用する準備ができたので、以下では実際に便利な機能を体験してみましょう。なお、AIによる処理のため、記事内容と同じ操作をしても、必ずしも同じ結果が得られるとは限らない点に注意してください。
プログラムコードの生成
最初に、GitHub Copilotにプログラムコードを生成させてみます。Visual Studio Codeのエディター画面を開いて、Ctrl+Iを押すと、GitHub Copilotに命令するテキストボックスが開きます。このテキストボックスに生成したいプログラムコードの内容(ここでは「コマンドラインから入力されたパスのテキストファイルを読み取って変数に格納するNode.jsの実装」とします)を入力してリターンキーを押すと、図9の通りプログラムコードが提案されます。「同意する」をクリックすると提案内容がエディターに反映され、「破棄」をクリックすると削除されます。再読み込みボタンをクリックすると、もう一度コードの生成が試みられます。
生成されたソースコードの例をリスト1に示します。(1)でファイル処理に必要なfsモジュールをrequire関数で取得します。(2)でコマンドライン引数からファイルパスをpathに格納し、そのパスから(3)でfs.readFileメソッドでファイルを読み込みます。読み込んだファイル内容は(4)でfileContentに格納されます。基本的な処理としては十分な内容といえます。
const fs = require('fs'); // ...(1) const path = process.argv[2]; // ...(2) // ファイルの読み取り ...(3) fs.readFile(path, 'utf8', (err, data) => { if (err) { console.error(err); return; } // ファイルの内容を変数に格納 ...(4) const fileContent = data; // 変数に格納されたファイルの内容を利用する処理をここに記述 console.log('ファイルの読み取りが完了しました。'); });
プログラマーの意図を先読みした実装の提案
次にGitHub Copilotにプログラマーの意図を先読みさせてみます。リスト1(2)で定義されたファイルパスの変数pathからファイル名を取得する意図で「const fileName =」まで入力すると、「path.split('/').pop();」という実装が提案されます(図10)。提案が表示された状態でタブキーを押すと、提案を反映できます。
この実装はファイル名を取得するために、パス文字列を「/」で分割して最後の要素を取得する処理を表しています。GitHub CopilotのAIがプログラマーの意図を先読みして、求められている処理内容を推測した結果といえます。変数名を変えると提案内容が変わる(図11)ため、変数名も解釈して提案に利用しているのがうかがえます。
[補足]GitHub Copilotは間違うこともある
GitHub Copilotの提案はいつも正しいとは限らず、間違う場合もあります。例えば図10で提案された「path.split('/').pop();」という処理は、パス区切り文字が「/」であることが前提なので、パス区切り文字が「\」であるWindowsでは正しく動作しません。
この場合、ソースコードをCtrl+Aで全選択したあと、Ctrl+Iでテキストボックスを表示させ、「Windowsで動作するよう修正」と命令すると、GitHub Copilotがpath.basenameメソッドでファイル名を取得する修正を提案します。また、この時リスト1(2)の変数pathが、Node.jsのpathモジュールと名前が競合するため、変数名をfilePathと変更してくれます。
GitHub CopilotのようなAIツールを適切に活用して、いかに正しく実装していくか、最終的な責任はやはりAIツールを利用する人間の側にあるといえます。
実装からコメントを、コメントから実装を生成
GitHub Copilotは、プログラマーが実装にコメントを入力しようとしたときに、実装に対応したコメント内容を提案します。例えば図13では「コマンドライン引数からファイルパスを取得」する処理内容を実装から読み取って、コメントを提案しています。
また逆に、先にコメントを入力して実装を生成させることもできます。「ファイル内容をコンソールに出力」というコメントを入力後リターンキーを押すと、図14の通りconsole.logでファイル内容を出力する実装が提案されます。
GitHub Copilotの支援を受けて実装を進め、最終的に出来上がったソースコードをリスト2に示します。リスト1をもとに、ファイル名を取得する処理、ファイル内容とファイル名をコンソールに出力する処理が追加されました。
const fs = require('fs'); const path = require('path'); // コマンドライン引数からファイルパスを取得 const filePath = process.argv[2]; // ファイル名を取得 const fileName = path.basename(filePath); // ファイルの読み取り fs.readFile(filePath, 'utf8', (err, data) => { if (err) { console.error(err); return; } // ファイルの内容を変数に格納 const fileContent = data; // ファイル内容をコンソールに出力 console.log(fileContent); // ファイル名をコンソールに出力 console.log(fileName); console.log('ファイルの読み取りが完了しました。'); });
AIとの対話(Copilot Chat)
最後に、Copilot ChatによるAIとの対話を試します。Copilot ChatはCtrl+Alt+Iで起動できます。Copilot Chatに質問する時には、質問対象のコードを選択しておくと、そのコードについての質問ができます。ここではリスト2のコードを全選択したあとで「このコードを実行する方法」と質問すると、図15の通り回答をもらえます。
この回答をもとに、Visual Studio Codeの統合ターミナルで「node readFile.js <ファイルパス>」と実行すると、ファイルパスで指定したファイルを読み込んでファイル内容とファイル名を表示できます(図16)。
まとめ
本連載では、GitHubのAIコーディング支援ツール「GitHub Copilot」について紹介していきます。今回はGitHub Copilotでできることの概要を紹介し、契約と環境設定を行った後で、簡単な例でGitHub Copilotの便利さを体験しました。次回は、より詳細な操作方法を説明するとともに、プログラミング言語の学習時や実際の開発時といったシーンでの活用例を紹介していきます。