SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「GitHub Copilot」入門

AIと共同でプログラミングする新時代へ──AIコーディング支援ツール「GitHub Copilot」へ入門しよう

「GitHub Copilot」入門 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

GitHub Copilotの便利な機能を体験してみよう

 ここまででGitHub Copilotを利用する準備ができたので、以下では実際に便利な機能を体験してみましょう。なお、AIによる処理のため、記事内容と同じ操作をしても、必ずしも同じ結果が得られるとは限らない点に注意してください。

プログラムコードの生成

 最初に、GitHub Copilotにプログラムコードを生成させてみます。Visual Studio Codeのエディター画面を開いて、Ctrl+Iを押すと、GitHub Copilotに命令するテキストボックスが開きます。このテキストボックスに生成したいプログラムコードの内容(ここでは「コマンドラインから入力されたパスのテキストファイルを読み取って変数に格納するNode.jsの実装」とします)を入力してリターンキーを押すと、図9の通りプログラムコードが提案されます。「同意する」をクリックすると提案内容がエディターに反映され、「破棄」をクリックすると削除されます。再読み込みボタンをクリックすると、もう一度コードの生成が試みられます。

図9 GitHub Copilotによるプログラムコードの生成
図9 GitHub Copilotによるプログラムコードの生成

 生成されたソースコードの例をリスト1に示します。(1)でファイル処理に必要なfsモジュールをrequire関数で取得します。(2)でコマンドライン引数からファイルパスをpathに格納し、そのパスから(3)でfs.readFileメソッドでファイルを読み込みます。読み込んだファイル内容は(4)でfileContentに格納されます。基本的な処理としては十分な内容といえます。

[リスト1]GitHub Copilotが生成したソースコードの例
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)。提案が表示された状態でタブキーを押すと、提案を反映できます。

図10 GitHub Copilotによる実装の提案
図10 GitHub Copilotによる実装の提案

 この実装はファイル名を取得するために、パス文字列を「/」で分割して最後の要素を取得する処理を表しています。GitHub CopilotのAIがプログラマーの意図を先読みして、求められている処理内容を推測した結果といえます。変数名を変えると提案内容が変わる(図11)ため、変数名も解釈して提案に利用しているのがうかがえます。

図11 変数名を変えた時の提案内容の変化
図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と変更してくれます。

図12 図10で提案された実装をWindows向けに修正させた様子
図12 図10で提案された実装をWindows向けに修正させた様子

 GitHub CopilotのようなAIツールを適切に活用して、いかに正しく実装していくか、最終的な責任はやはりAIツールを利用する人間の側にあるといえます。

実装からコメントを、コメントから実装を生成

 GitHub Copilotは、プログラマーが実装にコメントを入力しようとしたときに、実装に対応したコメント内容を提案します。例えば図13では「コマンドライン引数からファイルパスを取得」する処理内容を実装から読み取って、コメントを提案しています。

図13 GitHub Copilotが実装からコメントを提案する様子
図13 GitHub Copilotが実装からコメントを提案する様子

 また逆に、先にコメントを入力して実装を生成させることもできます。「ファイル内容をコンソールに出力」というコメントを入力後リターンキーを押すと、図14の通りconsole.logでファイル内容を出力する実装が提案されます。

図14 GitHub Copilotがコメントから実装を提案する様子
図14 GitHub Copilotがコメントから実装を提案する様子

 GitHub Copilotの支援を受けて実装を進め、最終的に出来上がったソースコードをリスト2に示します。リスト1をもとに、ファイル名を取得する処理、ファイル内容とファイル名をコンソールに出力する処理が追加されました。

[リスト2]リスト1をもとにGitHub Copilotの支援を受けて実装したソースコード(p001-readFile/readFile.js)
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の通り回答をもらえます。

図15 Copilot Chatにコードの実行方法を質問した様子
図15 Copilot Chatにコードの実行方法を質問した様子

 この回答をもとに、Visual Studio Codeの統合ターミナルで「node readFile.js <ファイルパス>」と実行すると、ファイルパスで指定したファイルを読み込んでファイル内容とファイル名を表示できます(図16)。

図16 リスト2の実行結果(p001-readFile/readFile.js)
図16 リスト2の実行結果(p001-readFile/readFile.js)

まとめ

 本連載では、GitHubのAIコーディング支援ツール「GitHub Copilot」について紹介していきます。今回はGitHub Copilotでできることの概要を紹介し、契約と環境設定を行った後で、簡単な例でGitHub Copilotの便利さを体験しました。次回は、より詳細な操作方法を説明するとともに、プログラミング言語の学習時や実際の開発時といったシーンでの活用例を紹介していきます。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「GitHub Copilot」入門連載記事一覧
この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19383 2024/05/08 18:41

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング