コード補完機能を使ってみよう

このカリキュラムではGitHub Copilotの機能の一つであるコード補完機能について学びます。

コード補完機能とは

リンクをコピーしました

GitHub Copilotのコード補完機能とは、開発者がコードを書き始めると、GitHub Copilotが自動的に補完候補を提示してくれる機能です。これから実装するコードを自動で提案してくれるため、自分でコードを記述する時間を短縮することができます。

例えば以下のようにJavaScriptの関数を定義する場合、関数名から推測してコードを補完してくれます。
補完されたコードを反映させる場合はTabキーを押すと反映されます。

コードの補完を体験してみよう

リンクをコピーしました

それではコードの補完を体験してみましょう。

まずはコードを入力するためのファイルを作成しましょう。
任意の場所にcopilot_curriculumというディレクトリを作成し、VSCodeで開いてください。
そしてscript.jsというファイルを作成してください。

作成したscript.jsファイルにコードを打ち込み、コードが補完されるか体験してみましょう。
入力するコードは「function add」で試してみましょう。

関数名は関数の内容をわかりやすくした名前にすると補完の精度が高まります。
以下の関数名でも実際に入力してコードが補完されるか確認してみましょう。

• multiply
• concatStrings

コメントを使った補完を体験してみよう

リンクをコピーしました

GitHub Copilotは関数名や変数名をもとにコードを補完してくれます。ただし、名前の情報だけを基に補完を行う場合、期待するコードの精度が十分ではないことがあります

そのため、詳しいコメントを記述することで、補完されるコードの精度が向上します。
例えば以下のように配列内の数値をすべて合計して返す関数を作成してもらう際の具体的な内容をコメントとして残すと、そのコメント通りのコードを補完してくれます。

それではコメントを使ったコード補完を体験してみましょう。以下の内容をコメントで記述し、改行をしコードの補完を体験してみましょう。

• // 配列内の数値をすべて合計して返す関数を作成

上の動画のような結果になればうまく補完ができています。
うまく補完ができたら、以下の例でも試してみましょう。

• 与えられた文字列を大文字で返す関数を実装
• 数字を1つ受け取り、それを2倍にして返す関数を作成

便利なショートカットキーを使ってみよう

リンクをコピーしました

このようにしてコードの補完が行われますが、GitHub Copilotには便利なショートカットキーが用意されています。

部分的な補完

リンクをコピーしました

コードが補完されるとTabキーを押すことでコードに反映させることができました。しかし、時には全てを反映させるのではなく、部分的に反映させたい時があります。その時にcommand（⌘）キーを押しながら→キー（Windowsの場合はcontrolキーと→キー）を押すと一つ一つの単語ごとに反映させることができます。

それでは先ほどのコメントから補完されるコードをショートカットキーを使って部分的に補完してみましょう。

• // 配列内の数値をすべて合計して返す関数を作成

上の動画のように部分的に補完ができるか確認しましょう。

複数の候補の確認

リンクをコピーしました

コードが補完される際、補完されるコードは表示される1種類ではなく、裏では複数のコードが補完されています。別の補完されたコードを確認するには、候補が表示された状態でoption（⌥）キーを押しながら]キーを押すことで次の候補を表示させることができます。またoptionキーを押しながら[キーを押すと前の候補を表示させることができます。

また候補が表示された状態でcontrol （^）キーを押しながenterキーを押すと右枠に新たなタブが開いて複数の候補を確認することができます。反映させたければ「accept suggestion」をクリックするとコードが反映されます。

このようにして全ての候補を確認することができるので、非常に便利です。

それではコードが補完されている状態で、ショートカットキーを使い、複数の候補を表示してみましょう。

上の動画のように複数の候補が表示されるか確認をしましょう。

まとめ

リンクをコピーしました

このようにGitHub CopilotはAIを使ってさまざまな情報からコードの補完をしてくれます。
この機能により、コードを書く手間が省けたり、自分で関数名を考える必要がなくなるため、開発効率が向上します。

その際はできるだけ詳しい情報をGitHub Copilotに送る必要があるので、関数名や変数名に気をつけたり、詳しいコメントを残すということが重要です。