Slide 1
Slide 1 text
GitHub
Copilot
ソフトウェア開発をよりよく改善するためには
2024/11/26
株式会社福岡情報ビジネスセンター
OT勉強会資料
Slide 2
Slide 2 text
アジェンダ
1. GitHub Copilotとは
2. GitHub Copilotのセットアップ
3. ハンズオン
4. GitHub Copilot Chatを使用してプロジェクトを探索、解析する
5. 応用編
6. その他の生成AIとの違い
7. 今後試してみたいこと
8. 〆
Slide 3
Slide 3 text
1. GitHub
Copilotとは
基本的に出来ることは以下の2つ
いま入力しているコードの内容を補間する(今
後入力されうる候補を出してくれる)
主にプログラムについて質疑応答をおこなう
Slide 4
Slide 4 text
2. GitHub
Copilotのセット
アップ
Slide 5
Slide 5 text
GitHub Copilotが有効化されているかを確認する
Slide 6
Slide 6 text
日本語設定
Slide 7
Slide 7 text
3. ハンズオン
今からRust, Go, Kotlin, Swiftの
コードを書いてもらいます！！
Slide 8
Slide 8 text
git clone https://github.com/Fukuoka-
Business-Information-Center/copilot-
hanson.git .
Slide 9
Slide 9 text
課題
日付のフォーマット関数
金額のフォーマット関数
日付の差分計算
閏年判定
日付の週末判定
英数字判定関数
ランダムな記号英数字を生成して返す関数
FizzBuzz
Slide 10
Slide 10 text
途中まで書くと候補が出てくる
Tabキーで補間。基本機能はこれだけ
Slide 11
Slide 11 text
コマンドからソース生成
Ctrl + i → /gen
Slide 12
Slide 12 text
スラッシュコマンドについて
特定の機能を実行するためのコマンド
コード生成、コード修正、テスト作成など
https://code.visualstudio.com/docs/copilot/copilot-chat#_slash-commands
Slide 13
Slide 13 text
コマンド一覧
`/doc` → 「Docコメントを生成してください」
`/explain` → 「コードの動作を教えてください」
`/fix` → 「問題箇所の修正をしてください」
`/generate` → 「コードを生成してください」
`/tests` → 「テストコードを作成してください」
`/new` → 新規プロジェクトやファイルを作成。
`/clear` → チャットセッションをクリア。
Slide 14
Slide 14 text
4. GitHub Copilot Chatを
使用してプロジェクトを探索、
解析する
Slide 15
Slide 15 text
4.1 設定ファ
イルについて
説明
右クリック
→ Copilot
→ 説明
Slide 16
Slide 16 text
お手持ちのプロジェクト
をご準備ください
新しいウィンドウ → 開く
あるいは
新しいウィンドウ →プロ
ジェクトフォルダのドラッ
グ&ドロップ
Slide 17
Slide 17 text
コンテキストについて
人もAIも正しく回答するためには正確な前提、文脈、情報(コンテキスト)が必要です。
https://code.visualstudio.com/docs/copilot/copilot-chat#_chat-context
`@workspace` → プロジェクト全体
`#ファイル名` `#クラス名` `#関数名` → 特定のコードや範囲にフォーカス。
`#editor` 選択範囲
何も指定しない場合は通常いま開いているファイルについてフォーカスします
いま作業中のファイル > 目に見えているファイル(別ウィンドウ含む) > 裏で開いて
いるファイルの順に参照していそう(裏はとっていません)
Slide 18
Slide 18 text
GitHub Copilot Chat
@workspace どのような技術スタックが使用されていますか
@workspace 現在のプロジェクトのおすすめの拡張機能は
@workspace メールを送信しているファイルは
@workspace テーブルUserを使用しているファイルは
@workspace #ShoppingContoroller.phpの決済処理はどこですか
#shoppingController.phpと関係するファイルは
Slide 19
Slide 19 text
5. 応用
改善例や具体的な活用シナリオ
ベストプラクティスなど
Slide 20
Slide 20 text
5.1 汎用処理実装
`/new AWSにSESでメールを送るクラス`
Slide 21
Slide 21 text
5.2 データのフォーマット
{'ResponseMetadata': {'HTTPStatusCode': 200, 'HTTPHeaders': {'x-
powered-by': 'Express', 'content-type': 'application/json; charset=utf-8',
'content-length': '29', 'etag': 'W/"1d-xxxxxLOWYQgV9QLDh5W3w7Uz4sQ"',
'date': 'Fri, 15 Nov 2024 02:28:45 GMT', 'connection': 'keep-alive', 'keep-
alive': 'timeout=5'}, 'RetryAttempts': 0}, 'MessageId': 'ses-000404212'}
Ctrl + I → `to format`
Slide 22
Slide 22 text
5.3 エラー修正
Ctrl + I → `/fix` (エラーメッセージの貼り付け)
Ctrl + . → "copilotを使用して修正する"
Slide 23
Slide 23 text
5.4 非推奨コードの修正
選択 → Ctrl + .(or i) → Copilotを使用して変更
する
「xxxx is Deplicated」
Slide 24
Slide 24 text
`/translate SQL #getLINEUserList`
`/translate SQLAlchemy #getLINEUserList`
5.5 言語Aから言語Bへ変換する
Slide 25
Slide 25 text
5.6 Copilot Editで複数ファイルの編集
※1ヶ月前くらいにリリースされた機能
Slide 26
Slide 26 text
5.7 定数定義設計からソースへ反映する
https://docs.google.com/spreadsheets/d/11iGn3mbMTsfg
KTjRO9AsOczDEuLuxFlNGXDZLGMJHUA/edit?usp=sharing
Slide 27
Slide 27 text
5.8 テーブル定義書からいろいろ
https://docs.google.com/spreadsheets/d/11iGn3mbMTsfg
KTjRO9AsOczDEuLuxFlNGXDZLGMJHUA/edit?usp=sharing
モデルを作成したり。
データ取得、更新処理を作成したり。
Create文を作成したり。
Slide 28
Slide 28 text
5.8 custom instructionsを使用してコード、テス
トの生成、レビューをおこなう
.vscode/setitngs.jsonへ設定を記述することでカスタムしたプロ
ンプトを指定することが可能。
https://code.visualstudio.com/docs/copilot/copilot-
customization
プロジェクト固有のレビュー項目等が設定可能
生成についてはまだ調査中で下手すると精度が悪くなる可能性あり
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
5.9 ショートカットの設定
いくつかの操作をショートカットキーとして登録することでより便利に
使用することが可能
Ctrl + K → Ctrl + S
github.copilot.chat.review (レビュー)
github.copilot.chat.generate (コード生成)
github.copilot.chat.generateDoc (コメント生成)
github.copilot.chat.explain (説明)
Slide 31
Slide 31 text
6. その他の生成
AIとの違い
Slide 32
Slide 32 text
ChatGPTとGitHub Copilotで何が違う？
ChatGPT GitHub Copilot
要件定義 ◯ ×
設計 ◯ ×
実装 ◯ ◎
レビュー ◯ ◎
コード分析 ◯ ◎
テスト ◯ ◎
ファイル等形式を指定して出力可
能
プロジェクト全体を参照すること
が可能
できることに大きな差があるわけではない
UIの違いにより使い勝手が異なる
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
プロジェクト上でドキュメントを管理する
DesignDoc.md ソースコード
設計を参照して実装
実装を参照して変更分の反映
※理論上いけるはず
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
生成されたコードを理解せずに利用すると、
後々のトラブルシューティングが困難になる。
Copilot に依存しすぎると、開発者のスキルが低
下する可能性
Slide 37
Slide 37 text
開発プロセスの見直し
1. コードの自動生成、補間
2. GitHub Copilotにコードの説明をしてもらう
3. GitHub Copilotにレビューしてもらう
4. 動作検証、テスト(テストコード)
Copilotを利用して理解するプロセスを入れるとより良いものになりそう
Slide 38
Slide 38 text
Copilot
= 副操縦士
生成AIの使える、使えないは人によって非常に大きな
乖離があるように感じる。AIに対する捉え方の問題か
も
主体はあくまで操縦士である我々にある(少なくとも
今はまだ)
質問、命令が上手い人、言語化が上手い人
あるいは設計力、応用力が重要になってくる
「労力は外注できるが、能力は外注できない」らしい
Slide 39
Slide 39 text
参考
より詳しく新しい情報を知りたい場合は公式ドキュメントを参照
https://code.visualstudio.com/docs/copilot/overview