2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCode Github Copilot拡張機能チートシート[ChatGPT 4o 以外にも ChatGPT o1-preview(o1-mini)・Claude 3.5 Sonnetとチャットできるようになりました!]

Last updated at Posted at 2024-11-25

Wondershare Uniconverter 15_000005.GIF
みなさんコーディングの際,お供としてGithub Copilotを使用していますか??
実はGithub Copilotを使うといろんなことができます!コード補完だけできるものだと思っていませんか??

スクリーンショット 2024-11-22 14.22.10.png

そもそも...
GitHub Copilotは,IDE上でAIを活用したコーディング支援を実現する強力な拡張機能である.

本記事では,Visual Studio CodeにおけるGithub Copilot拡張機能の主要な機能と活用方法について解説する.

他のチートシート

git/gh コマンド(gitコマンド以外にもgitの概念も書いてあります)

lazygit

Docker コマンド(dockerコマンド以外にもdockerの概念の記事へのリンクもあります)

ステータスコード

TypeScript

Go/Gorm

SQL

Vim

プルリクエスト・マークダウン記法チートシート

ファイル操作コマンドチートシート

OpenAI Assistants API

他のシリーズ記事

TypeScriptで学ぶプログラミングの世界
プログラミング言語を根本的に理解するシリーズです.

情報処理技術者試験合格への道[IP・SG・FE・AP]
情報処理技術者試験の単語集です.

IAM AWS User クラウドサービスをフル活用しよう!
AWSのサービスを例にしてバックエンドとインフラ開発の手法を説明するシリーズです.

主要機能

VSCodeの拡張機能としてGithub Copilotを使用した場合

1. コード補完

エディタ上で左クリック(Macなら右クリック)とは違うが,コーディング中にコードを自動で補完してくれる.

Wondershare Uniconverter 15_000005.GIF

動作の仕組みとできること

  • 入力中のコードを文脈から理解し,次の行以降のコードを予測して提案する
  • 関数やクラスの実装全体を自動生成することができる
  • 変数名やメソッド名の命名を適切に提案することができる

2. Copilot Chat

これもエディタ上で左クリック(Macなら右クリック)とは違うが,VSCodeの右下のcopilotのボタンを押すと...
スクリーンショット 2024-11-24 11.32.17.png
このような画面が出てくるので,「Github Copilot Chat」を押す
スクリーンショット 2024-11-24 11.33.23.png
VSCodeの右側にこのような画面が現れる.
スクリーンショット 2024-11-24 11.34.53.png

ここで質問の入力欄の右下に使用するモデルの選択ができる.

github universe 2024で出るようになった機能です!!

スクリーンショット 2024-11-24 11.35.38.png

この中から選択できる.
スクリーンショット 2024-11-24 11.35.58.png

このようにChatをすることができる.
Wondershare Uniconverter 15_000012.GIF

動作の仕組みとできること

  • 自然言語で書かれたコメントから,対応するコードを自動生成する
  • 実装したい機能を日本語や英語で記述すると,それに応じたコードを提案する

上記のGIFでもソースコードの説明をCopilotに生成させたががソースコード上で左クリック(Macなら右クリック)をすると「Copilot > 説明」 でもソースコードの説明を生成できる.
スクリーンショット 2024-11-24 11.56.59.png

3.修正・リファクタリング支援

「Copilot > 修正」でソースコードの修正を生成させることもできる
スクリーンショット 2024-11-22 10.21.25.png

ソースコードの修正をcopilotに提案させて変更提案を適用したりすることもできる.
Wondershare Uniconverter 15_000010.GIF

動作の仕組みとできること

  • 既存コードのパターンを学習し,より良い実装方法を提案する.
  • コードの整理や最適化のためのサジェストを提供する.

4.コードレビュー

「Copilot > レビューとコメント」でソースコードのレビューを生成させることもできる
スクリーンショット 2024-11-22 10.21.25.png

このようにある関数に対してコードレビューさせ,2件のレビューを生成させることができた.各レビューに対して変更を適用するかどうかを選択できる.
Wondershare Uniconverter 15_000013.GIF

5.ソースコードからドキュメント生成

「Copilot > レビューとコメント」である関数やメソッド,クラスについてのドキュメントを生成させることができる.
スクリーンショット 2024-11-22 10.21.25.png

このように関数の説明と引数,返り値の説明を関数の上に生成してくれる.

Wondershare Uniconverter 15_000011.GIF

6. テストコードの生成

「Copilot > テストを生成する」である関数やメソッド,クラスについての単体テストを生成させることができる.
スクリーンショット 2024-11-22 10.21.25.png

このように現在エディタ上にあるファイルの単体テストを生成してくれる.

Wondershare Uniconverter 15_000014.GIF

動作の仕組みとできること

  • 実装済みのコードに対する単体テストを自動生成する.
  • テストケースの網羅性を考慮したコードを提案する.

活用のベストプラクティス

1. 効果的な活用方法

  • コメントは具体的かつ明確に記述する
  • 生成されたコードは必ずレビューし,必要に応じて修正する
  • 繰り返し使用することで,より精度の高い提案を得られる

2. 注意点

  • セキュリティに関わるコードは特に慎重にレビューする
  • ライセンスの扱いに注意を払う
  • 生成されたコードをそのまま使用せず,ビジネスロジックに合わせて適切に調整する

GitHub Copilotは,開発効率を大幅に向上させる可能性を秘めたツールである.適切に活用することで,開発者は本質的な問題解決により多くの時間を費やすことができるため,開発効率をアップさせよう!...

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?