はじめに
こんにちは、ACS事業部の過部です。
ついに弊チームにGitHub Copilot for Businessが導入されましたが、使いこなすにはまだしばらく時間が掛かりそうです...
なので今回は、いつでも使い方を見返せるようにメモとしてまとめてみました。
※ IDEはVSCode、言語はJavaScriptを使用しています。
キーボードショートカット（VSCodeの場合）
| 操作 | ショートカットキー |
|---|---|
| 全てのサジェストを受け入れる | Tab |
| 1 単語ごとにサジェストを受け入れる | Ctrl ＋右矢印キー |
| サジェストの受け入れを１単語ごとに取り消す | Ctrl ＋左矢印キー |
| 全てのサジェストを拒否する | Esc |
| 次のサジェスト候補を表示する | Alt+] |
| 前のサジェスト候補を表示する | Alt+[ |
| 複数のサジェスト候補を新規タブにまとめて表示する | Ctrl+Enter |
| GitHub Copilot Labsの機能メニューを表示する | Ctrl+Shift+Alt+E |
基本的な使い方
1. サジェストしてもらう
サジェストパターンは色々あるので、主なものを記載します。
コメントからサジェストさせるパターン
サジェスト前
// フィボナッチ数列を求める function
サジェスト後
// フィボナッチ数列を求める function fibonacci(n) { if (n < 2) return n; return fibonacci(n - 1) + fibonacci(n - 2); }
インターフェースからサジェストさせるパターン
関数名、引数等からコードを生成させます。
サジェスト前
function fibonacci(n) {
サジェスト後
function fibonacci(n) { if (n < 2) { return n; } return fibonacci(n - 1) + fibonacci(n - 2); }
インターフェースとコメントからサジェストさせるパターン
サジェスト前
function fibonacci(n) { //フィボナッチ数列を求める
サジェスト後
function fibonacci(n) { //フィボナッチ数列を求める if (n < 2) { return n; } return fibonacci(n - 1) + fibonacci(n - 2); }
反復的なコードをサジェストさせるパターン
サジェスト前
const second = 60 const minute = 60 * second
サジェスト後
const second = 60 const minute = 60 * second const hour = 60 * minute const day = 24 * hour const month = 30 * day
2. サジェストを受け入れる
期待通りのサジェストが得られた場合、Tabで受け入れます。
3. （必要に応じて）他のサジェスト候補を表示する
期待外れのサジェストを得た場合、Alt + ] 又は Ctrl + Enterで他の候補を表示します。
4. （必要に応じて）サジェストを一部受け入れる
サジェスト先頭から途中までの一部だけ受け入れたい場合は、受け入れたい箇所までCtrl + →を繰り返します。
5. （必要に応じて）コメントやコードを修正する
期待通りのサジェストが得られない場合は、コメント 又は コードを編集してサジェスト精度を上げます。
良いコードをサジェストさせるには
詳細にコメントを書く
コンテキスト情報、シグネチャをコメントに含めることで、サジェスト精度が上がります。 また、処理内容を具体的に書くことも重要です。
- 具体的な処理内容
- コンテキスト: 何のための関数であるか 等
- シグネチャ: 関数名、引数の名前及びデータ型、返り値の名前及びデータ型
出力例を提供する
サジェスト前
// フィボナッチ数列を求める // 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... function
サジェスト後
// フィボナッチ数列を求める // 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
関連ファイルをIDE上の別タブで開いておく
別ファイルの変数を利用する関数を作成する場合は、対象ファイルを別タブで開いておくことで、サジェスト精度が上がる様です。
一貫性があるコードを書く
Copilotはコード内のパターンに従ってサジェストを行います。コードの一貫性が高まるほど、そのパターンにより従いやすくなるため、サジェスト精度が上がります。
適切な命名規則に則る
何もCopilot利用時に限った話ではないですが、関数名にはその関数を具体的に表す名前を使用しましょう。 そうすることで、Copilotが関数のコンテキストを理解し、より関連性の高いサジェストを生成する様になります。
良いコードを書く
GitHub Copilotは一貫性を重視してコードを生成するため、良くないコードからは良くないコードが生成されます。 そのため、上で挙げた一貫性のあるコード、適切な命名規則に限らず、ベストプラクティスに従って良くコーディングすることが重要です。
その他の便利な使い方
質問に回答させる
コードに関する質問に答えてくれるので、コードリーディング補助として利用できます。
サジェスト前
// q: この関数は？ // a: function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
サジェスト後
// q: この関数は？ // a: フィボナッチ数列を返す関数 function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
また、a:を繰り返し入力することで、回答の続きがサジェストされます。
// q: この関数は？ // a: フィボナッチ数列を返す関数 // a: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
ちなみに、コード以外についても答えてくれます。
// q: フィボナッチ数列とは // a: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... // a: 0番目と1番目は1 // a: 2番目以降は、直前の2つの数の和 // a: という数列 // a: 0番目から順に並べると、 // a: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... // a: となる // a: この数列のn番目の数を求める関数を作成せよ // a: ただし、nは0以上の整数とする // a: 例えば、n=0の場合は0を返す // a: n=1の場合は1を返す // a: n=2の場合は1を返す // a: n=3の場合は2を返す
テストコードを生成させる
サジェスト前
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // test fibonacci function
サジェスト後
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // test fibonacci function // 1. fibonacci(0) = 0 // 2. fibonacci(1) = 1 // 3. fibonacci(n) = fibonacci(n-1) + fibonacci(n-2)
単体テストを生成させる
サジェスト前
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // create unit tests for the fibonacci function
サジェスト後
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // create unit tests for the fibonacci function describe('fibonacci', function() { it('should return 0 for fibonacci(0)', function() { expect(fibonacci(0)).toBe(0); }); it('should return 1 for fibonacci(1)', function() { expect(fibonacci(1)).toBe(1); }); it('should return 1 for fibonacci(2)', function() { expect(fibonacci(2)).toBe(1); });
デバッグコードを生成させる
サジェスト前
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // debug
サジェスト後
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // debug console.log(fibonacci(10)); // 55
リファクタさせる
サジェスト前
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // refactor fibonacci
サジェスト後
function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } // refactor fibonacci function fibonacci(n) { if (n < 2) return n; return fibonacci(n - 1) + fibonacci(n - 2); }
コードからコメントを生成させる
サジェスト前
// description: function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
サジェスト後
// description: Write a function that returns the nth entry in the Fibonacci sequence, where n is a number you pass in as argument to the function. function fibonacci(n) { if (n === 0) return 0; if (n === 1) return 1; return fibonacci(n - 1) + fibonacci(n - 2); }
終わりに
私達ACS事業部はAzure・AKSを活用した内製化のご支援をしております。ご相談等ありましたらぜひご連絡ください。
また、一緒に働いていただける仲間も募集中です！
切磋琢磨しながらスキルを向上できる、エンジニアには良い環境だと思います。ご興味を持っていただけたら嬉しく思います。
