環境
- windows10
- macOS Monterey 12.0.1
- VsCode
GitHub Copilot Labsは、ソースコードの解説・他言語への変換・リファクタリング・バグ修正・テスト自動生成などができる神ツールです。
拡張機能のインストール
https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs
インストールすると、サイドバーにCopilotのアイコンが出現する。アイコンをクリックするといろいろな項目がある
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/17f817d90c424e2985ca847037fe51df/image.png)
以降、GitHub Copilot Labsの機能を紹介する。
EXPLAIN
該当のソースコードに対する説明や、そのソースコードの使用例などを提案してくれる。文字通り説明関連の機能。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/205a4e1fcc294072a9a7854e36cbb282/image.png)
LANGUAGE TRANSLATION
同じ実装のまま、他の言語へ置き換えてくれる。複雑なsqlとかシェルスクリプトな簡単なJavascriptやPythonなどで書いて変換できると結構便利かも。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/9714469512074e03a129e0b07240d8b7/img_6455ada223bef.gif)
BRUSHES
コードの品質改善関連の機能が複数ある。
READABLE
コードの見やすさを改善してくれる。以下のコード例では関数の中でxという意味のない説明変数を使用しているが、これを意味のある変数名に置き換えてくれている
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/60f615d634cf40298c5bd9c855494ed6/img_645c38cc381eb.gif)
ADD TYPES
型付けしてくれる。以下のコード例では関数の返り値の型が抜けているが、これを自動で付与してくれる。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/0ff81ff0e5bd40d7be213c69e9169aa1/img_645c3937f2922.gif)
FIX BUG
コード内にバグがあれば、そのバグを自動修正してくれる
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/6d8dbf93842845f0b39fbaf370dacf66/img_645c39c6e6353.gif)
DEBUG
デバック用のコードを追加してくれる。反対に、CLEAN
をクリックすると、デバック用のコードを削除してくれる。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/3e916be4cb404affa20c3af2689a7032/img_645c3a3a6851c.gif)
LIST STEPS
アルゴリズムをステップごとに説明してくれる
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/65e587fa27264268922b0d7d1cdb398b/img_645c3aa341d52.gif)
MAKE ROBUST
より堅牢なコードにしてくれる(やりすぎは注意)。以下のコード例では文字列リテラルのユニオンに存在しない引数が指定された際、例外がスローされるようになっている
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/b4321328be7d424692c04b423ba3ba6d/img_6455975d3abb2.gif)
CHUNK
コードを意味のある単位で分割してくれる。巨大な関数などをリファクタリングする際に有用そう。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/4b53f8d074b749f18b2f683a54652278/img_6455981b0bcc3.gif)
DOCUMENT
ソースコードの説明をドキュメントとしてコメントを自動で追記してくれる。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/e0cd08c939ab4d379a5cdcd6155d87d9/img_64559a9a4d42e.gif)
CUSTOM
選択されているコードを使って、そこから別のコードを展開してくれる。例えば「log」と入力すると、選択したコードの実行結果をlog出力するコードを自動生成してくれる。ほかにも、「画面に表示」になどと入力すると、選択したコードを使用した、Reactのjsxなどが自動生成されたりする
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/f15999af8a8c410ab49f65e1b6f83711/img_645599c7202b2.gif)
他にも、単体テストの生成など
TEST GENERATION
単体テストを生成できる。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/7ee5b75934d641588a0375266f206ad0/img_6455b4adf3917.gif)
現状(2023.5.6時点)では、JavaScriptとTypeScriptだけの模様。また、テストライブラリや細かい書き方の指定などができないので、少し不便。上述のCustomにてテストを生成するほうが取り回しがききそう。
![](https://images.microcms-assets.io/assets/c8f47cd9ef654a2d9ca6b6e579be433f/dd4d8b68d01f472396bef414ff9361f1/image.png)
以上です。
まとめ
いかがでしたでしょうか。本記事では、GitHub Copilot関連の神拡張機能であるGitHub Copilot Labsを紹介しました。インストール方法と具体的な機能についてコード例を挙げながら詳細に解説していますので、是非参考にしてみてください。