embeddedなブログ

組み込みシステムに関することや趣味に関することをダラダラと書いていきます(^^)

Visual Studio CodeでGitHub Copilotを使ってみる(AIがコーディングをしてくれるツール)

2023-08-30 21:23:33 | Visual Studio Code on Mac

GitHub Copilotは、AI ペアプログラマーがVisual Studio Codeのオートコンプリートのようなスタイルで、次に入力するコードの候補を提案してくれる開発を効率化するツールです。OpenAIモデルを採用することでユーザーが入力したコードやコメントの記述内容から新しい行または関数を自動で提案してくれます。当然、Visual Studio 2022などでも使えます。

今回、お試しにこのGitHub Copilotを使ってみたので、簡単にご紹介させていただきます。実際に使ってみると、その効果を実感できると思います。

まず、Visual Studio CodeにGitHub Copilotをインストールします。Visual Studio CodeのExtensionsで、「GitHub Copilot」を検索してインストールします。

インストール後、GitHubへのサインインなど、いくつかの必要な設定を行った後、最後に一番下の「Mark Done」をクリックして設定を終了します。

設定後、下記のようなウィンドウが表示されたら「Sign in with GitHub to use GitHub Copilot (1)」をクリックします。

GitHubへの認証を要求されますので、了承する場合は「Authorize Visual-Studio-Code」をクリックします。

「Open」をクリックします。

下記の画面が表示されたら必要に応じてCopilotの設定する場合は「Copilot Settings」をクリック、必要ない場合は「Dismiss」をクリックします。

以上で、GitHub Copilotのインストールは完了です。ここからは実際に使ってみます。まず、試しに、Visual Studio Codeで「test.cpp」というC++のソースファイルを新規作成します。

次に下図のように「#include t」まで入力するとグレーの文字でCopilotから補完候補が提案されます。通常はtest.cppのヘッダファイルは test.h なので、ヘッダファイルのインクルードが提案されたわけですね。

タブキーを押下することで提案候補が確定されます。次の候補を提案して欲しいときは Alt+] キー(Macの場合は option+] )を押下します。一つ前の提案に戻したいときは Alt+[ キー(Macの場合は option+[ )を押下します。「#include test.h」を確定してEnterキーで改行すると、次は下図のように「#inlcude 」が提案されます。おそらく、I/O系の実装が一般的には多いのでしょうね。

ひとまずタブキーで確定します。

次にメイン関数を入力するために「int」まで入力するだけで下図のようにメイン関数の提案をしてくれました。

引数が欲しいところですが、一旦タブキーで確定します。下図のようにHello Worldまで提案してくれています。

引数を入力します。「main(」の後ろにカーソルを移動して「in」まで入力したタイミングで下図のように引数が提案されました。

タブキーで引数を確定します。

次は関数内の実装をします。テキストファイルを読み込んで、読み込んだ文字列から「Hello」という文字列を検索する機能を実装するとします。コメントで実装したい機能の説明を入力して「Ctrl+Enter」キーでその説明を実装するコードの複数候補を一気に提案してくれます。ここでは「// テキストファイルを読み込んで、内容から文字列"Hello"を検索する」というコメントを入力して「Ctrl+Enter」キーを押下します。すると下図のようにウィンドウ右側に候補が表示されます。

「Suggestion xx」をクリックして適切な候補を確定します。ここでは「Suggestion 3」をクリックして確定します。

次はテキストファイルを読み込んでマップ化する実装を試します。下記のコメントを入力します。

// マップの変数を定義する
// テキストファイルを読み込んで、文字列単位でマップに格納する。キーは文字列、値は出現回数。

Ctrl+Enterキーを押下して候補を表示します。

提案候補を確定します。

std::map や std:string はインクルードされていないので赤い下線がついてしまっていますので、インクルード文を書きます。「#」を入力するだけで適切にと<map>のインクルードが提案されます。
</map>

インクルード文を確定します。

最後の例です。OpenCVを使ってエッジ検出をしてみたいと思います。下図のように「// OpenCVで画像を読み込んで、エッジ検出をする」とコメントを入力します。

Ctrl+Enterキーを押下して候補を表示します。

カラー画像を読み込んで、グレースケール変換してからエッジ検出する候補8を選択します。

確定した結果が下図です。

OpenCV関連のインクルード文が不足しているので、「#include 」の横で改行するだけでOpenCVのインクルード文が提案されます。

確定します。私の環境ではopencvのインクルードパスが設定されていないので、下図のようにインクルード文に赤下線が表示されてしまっていますが、きちんとパス設定がされていれば問題ないはずです。

以上で、Copilotのお試し例の説明は終わりです。提案はOpenAI(Chat GPT)なので、時々間違うこともありますが、今回のお試し例ではそれなりに正しい候補が提案されています。開発経験が多くても、いろんなAPIなどまで記憶はしていないので、いちいちWebやドキュメントを検索して実装する必要がありますが、Copilotを使うとほぼその作業が不要になり、開発効率は劇的に向上すると思います。ぜひ、お試しください。


最新の画像もっと見る