Tweet
Tweet

Slide 1

Slide 1 text

Github Copilot Chat 本日より
 は
 でありま〜〜〜すッ！！！
 Gunma.web #55 生成AI LT会 Ver.2 ゆっきー たぶん


Slide 2

Slide 2 text

名前: ゆっきー。 TwitterX: @Yu_yukk_Y 仕事: 某マッチングアプリの 　　 サーバーサイドエンジニア 趣味: ポケモンなどなど 技術: 仕事ではRuby、個人では　　　　　　 TypeScriptを書きがち 　　 その他色々 その他: 前橋市出身です。今月末に　　　 　　　 東京から高崎市に引越します。

Slide 3

Slide 3 text

そもそもGithub Copilotって？？ - Microsoft製のAIコーディングアシスタント - 人間が記述したコードを元に追加のコードを提案した り、コメントで質問に答えてくれる

Slide 4

Slide 4 text

そもそもGithub Copilot Chatって？？ - 既存のファイルを参照しながらコーディング関連の質 問に答えてくれるインターフェース - スラッシュコマンドを用いてテストを書かせたりもでき る - commit messageを考えさせたりできる - PRのtitleとdescriptionを考えさせることもできる - 同梱されたCopilot Editsを用いて、テキストで指示を 出しながらファイルを編集させることもできる - cursorやclineのように実行までしてくれるわけではない - Agents Modeでは上記のようなこともできるが、現状 GAされ ていない

Slide 5

Slide 5 text

私の感じているGithub Copilot Chatの優位性 - Microsoft製 - 日系企業でも比較的導入提案しやすい - Copilot本体に危険なコードが混入する可能性が低い - GithubやVS Codeとの連携が強い - 当分はメンテナンスされ続ける - Github登録のついでに使える

Slide 6

Slide 6 text

私の感じているGithub Copilot Chatへの課題感 - 実装経緯などのコンテキストなしに会話を進めてしまう - 都度チャットで指示を出さねばならず、守ってほしい設計や規則などを適用させる のが面倒 - 共通ルールセットが設定できれば。。 - テストの実行とか依存関係の追加までやってほしい - Github Copilot Agent待ってれば良さそう

Slide 7

Slide 7 text

私の感じているGithub Copilot Chatへの課題感 - 実装経緯などのコンテキストなしに会話を進めてしまう - 都度チャットで指示を出さねばならず、守ってほしい設計や規則などを適用させる のが面倒 - 共通ルールセットが設定できれば。。 - テストの実行とか依存関係の追加までやってほしい - Github Copilot Agent待ってれば良さそう

Slide 8

Slide 8 text

本当に？？

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

できるじゃん🫠

Slide 11

Slide 11 text

現状できること(ドキュメント調べ) - そもそも現段階ではVS Code, VS, Web Editorでしかサポートされてない - コード生成時のカスタム命令の追加 - テストコード生成時のカスタム命令の追加 - コミットメッセージ生成時のカスタム命令の追加 - Pull Request作成時のカスタム命令の追加 - コードレビュー時のカスタム命令の追加 ref: https://code.visualstudio.com/docs/copilot/copilot-customization

Slide 12

Slide 12 text

とりあえず 試してみよう！

Slide 13

Slide 13 text

目標 ケロロ軍曹

Slide 14

Slide 14 text

1. コード生成時のカスタム命令の追加 2. テストコード生成時のカスタム命令の追加 3. コミットメッセージ生成時のカスタム命令の追加 4. Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 15

Slide 15 text

ベースとなるプロンプトの作成

Slide 16

Slide 16 text

1. コード生成時のカスタム命令の追加 2. テストコード生成時のカスタム命令の追加 3. コミットメッセージ生成時のカスタム命令の追加 4. Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 17

Slide 17 text

コード生成時のカスタム命令の追加 - .github/copilot-instructions.mdという ファイルに書いた命令が参照される - chatの返答とeditsの返答などの際に自 動で参照される

Slide 18

Slide 18 text

コード生成時のカスタム命令の追加 命令追加前 命令追加後

Slide 19

Slide 19 text

コード生成時のカスタム命令の追加 いつでも軍曹っぽく答えてくれるよ うになった🙌

Slide 20

Slide 20 text

コード生成時のカスタム命令の追加 editsも同様

Slide 21

Slide 21 text

1. ⭕コード生成時のカスタム命令の追加 2. テストコード生成時のカスタム命令の追加 3. コミットメッセージ生成時のカスタム命令の追加 4. Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 22

Slide 22 text

テストコード生成時のカスタム命令の追加 - setting.jsonで github.copilot.chat.testGeneration.instructionsに 設定した値を参照する - テキストのみならず、ファイルを参照させることもできる

Slide 23

Slide 23 text

テストコード生成時のカスタム命令の追加 fizzbuzz関数に対して テストコードを 生成させてみると。。 ※一度生成した際に写真を撮り損ねており、再 度同じことをして写真だけとっています

Slide 24

Slide 24 text

テストコード生成時のカスタム命令の追加 軍曹っぽい🎉

Slide 25

Slide 25 text

1. ⭕コード生成時のカスタム命令の追加 2. ⭕テストコード生成時のカスタム命令の追加 3. コミットメッセージ生成時のカスタム命令の追加 4. Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 26

Slide 26 text

コミットメッセージ生成時のカスタム命令の追加 - setting.jsonで github.copilot.chat.commitMessageGeneration.i nstructionsに設定した値を参照する - テキストのみならず、ファイルを参照させることもできる

Slide 27

Slide 27 text

コミットメッセージ生成時のカスタム命令の追加 VS CodeのGitタブで自動生成する コミットメッセージに反映された🎉 設定なし 設定あり

Slide 28

Slide 28 text

1. ⭕コード生成時のカスタム命令の追加 2. ⭕テストコード生成時のカスタム命令の追加 3. ⭕コミットメッセージ生成時のカスタム命令の 追加 4. Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 29

Slide 29 text

Pull Request作成時のカスタム命令の追加 - setting.jsonで github.copilot.chat.pullRequestDescriptionGene ration.instructionsに設定した値を参照する - テキストのみならず、ファイルを参照させることもできる

Slide 30

Slide 30 text

Pull Request作成時のカスタム命令の追加 別途Github Pull Requestsの拡 張機能が必要なので インストール

Slide 31

Slide 31 text

Pull Request作成時のカスタム命令の追加 Github Pull Requestsの タブから PRを作成し、AI生成のボタン (✨みたいなやつ)を押すと。。

Slide 32

Slide 32 text

Pull Request作成時のカスタム命令の追加

Slide 33

Slide 33 text

1. ⭕コード生成時のカスタム命令の追加 2. ⭕テストコード生成時のカスタム命令の追加 3. ⭕コミットメッセージ生成時のカスタム命令の 追加 4. ⭕Pull Request作成時のカスタム命令の追加 5. コードレビュー時のカスタム命令の追加

Slide 34

Slide 34 text

もう軍曹じゃん！！

Slide 35

Slide 35 text

コードレビュー時のカスタム命令の追加 - setting.jsonで github.copilot.chat.reviewSelection.instructions に設定した値を参照する(はず) - テキストのみならず、ファイルを参照させることもできる (は ず)

Slide 36

Slide 36 text

コードレビュー時のカスタム命令の追加 - MacだとShift + Command + Pでコマンドパレット を呼び出し「review」などと検索することでレビュー 機能が使える - まだpublic previewらしい - 選択したコードに対してレビューしてくれる

Slide 37

Slide 37 text

コードレビュー時のカスタム命令の追加 私の環境ではプロンプトが反 映されませんでした；； (public previewだから、、？)

Slide 38

Slide 38 text

1. ⭕コード生成時のカスタム命令の追加 2. ⭕テストコード生成時のカスタム命令の追加 3. ⭕コミットメッセージ生成時のカスタム命令の 追加 4. ⭕Pull Request作成時のカスタム命令の追加 5. ❌コードレビュー時のカスタム命令の追加

Slide 39

Slide 39 text

まだ軍曹じゃないじゃん！！

Slide 40

Slide 40 text

まとめ - Github Copilot Chatにも共通プロンプトを読み込ませる機能がある - コミット作成やコード生成など、用途ごとに読み込ませるプロンプトを分けられる - コードレビュー機能だけはまだ動作しないっぽい(結果論) - Github Copilot Chatは本日よりケ◯ロ軍曹になることはなかった

Slide 41

Slide 41 text

良いGithub Copilot ライフを！！ よかったら繋がってくださいmm Twitter: https://x.com/Yu_yukk_Y 今日使ったコード: https://github.com/Yoshino-Yukitaro/copilot-chat-to-keroro