Slide 1

Slide 1 text

AI-Powered Development with GitHub Copilot Yuki Hattori GitHub

Slide 2

Slide 2 text

Agenda ● GitHub Copilot について ● AI を使った開発 うわさについて ● 生成 AI ツールを使いこなす際に理解すべきこと ● Copilot Tips & Tricks

Slide 3

Slide 3 text

AI を使った開発と私 2023/02 AI駆動開発 勉強会 2023/09 30のプラクティスで刷新 2023/04 AI-Native.dev 2024 お楽しみに

Slide 4

Slide 4 text

Integrations & APIs The AI Powered Developer Platform to Build, Scale, and Deliver Secure Software Collaboration Productivity Security Scale Powered by AI

Slide 5

Slide 5 text

Once enabled… OpenAI LLM Context Suggestions

Slide 6

Slide 6 text

AI時代 うわさ ● プロンプトエンジニアリング テクニックが AI 時代に 重要 ● AI 優秀なエンジニアしか使いこなせない

Slide 7

Slide 7 text

うわさ: プロンプトエンジニアリング テクニックが AI 時代に 重要

Slide 8

Slide 8 text

Prompt Engineering (狭義) ● 具体的なテクニックに焦点 ● AIへ 例示方法 フォーマット、特定キーワード 使用など ● 高精度出力が要求されるサービスや特定フォーマット出力が必要な場合に特に有効 ● AI 創 性 向上や出力 量・質 コントロールにも役立つ Prompt Engineering (広義) / Prompt Crafting ● 入力 全体的なアプローチに焦点を当てる ● 入力フォーマット、例示 有無、内容、文脈 コントロールを含む ● 人間 論理思考能力、言語力、専門知識に基づく ● 必要なも 習得すべきテクニック だけで なく特定文脈における 人間 能力 うわさ: プロンプトエンジニアリング テクニックが AI 時代に 重要 * 用語 出現時 狭義における定義が主でした。 GitHub で 広義 使い方を Prompt Crafting と呼んでいます プロンプトエンジニアリング テクニックによりもたらされる差異 、 一般的に期待されているほど 大きくない

Slide 9

Slide 9 text

プロンプトエンジニアリング (狭義) 出力コントロールに大きく貢献 ● 反復作業/日常的な作業 出力コントロール、精度向上、時間削減に貢献 ● AIをプロダクトに組む際に、常に安定した出力をプログラムや顧客に提供 ただし「あると便利なテクニック」であり、全員が専門家になる必要 ない。 基本的なテクニック 理解だけでも十分。 プロンプトエンジニアリング “テクニック” 知っておくと便利 うわさ: プロンプトエンジニアリング テクニックが AI 時代に 重要

Slide 10

Slide 10 text

プロンプト クラフティング能力を鍛えよう ● プロンプトエンジニアリング どんな入力からも必ず 素晴らしい出力を引き出す銀 弾丸で ない ● 泥団子 磨いても泥団子 入力 質が低けれ 、出力 質も限らる。 自分 ダイヤモンド💎 を探し、磨くことが重要!! ✨ うわさ: プロンプトエンジニアリング テクニックが AI 時代に 重要

Slide 11

Slide 11 text

プロンプト クラフティング能力 どうやって鍛える ❓🤔 以下を実施する ● 知識を貯める ● 専門技術を身につける ● 経験を積む ● 特定 分野 研究をする ● 実験をして色々試してみる ● クリティカル シンキング / ロジカル ライティング技術を鍛え それに、プロンプトエンジニアリング テクニックを組み合わせる! うわさ: プロンプトエンジニアリング テクニックが AI 時代に 重要

Slide 12

Slide 12 text

うわさ: AI 優秀なエンジニアしか使いこなせない

Slide 13

Slide 13 text

初心者でもAI 使用で大幅なスキルアップが可能 能力 上限とレビュー能力 関係 ● エンジニアが AI から引き出せる能力 上限 レビューできるコード 量や質に依存する ● そ ため、「AI 優秀なエンジニアだけが使いこなせる」 という考えが一部で存在。 👉 こ 議論 AI 学習促進機能について言及していない うわさ:AI 優秀なエンジニアしか使いこなせない

Slide 14

Slide 14 text

AI 学習ツールとして 側面 AI 開発支援ツールであるとともに、最強 学習促進ツールです。 AI エンジニア コード書きやレビュー 間に学習を促進し、新しいライブラリ 使い方やプ ログラミング言語 学習機会を提供します。 採用されない提案においても学習プロセスが発生 ● 採用されなかったAI 提案をレビューすることで、開発方向性や手段 洞察を得る ● 次回 指示や提案 採用判断に役立つ 中長期的なエンジニア 成長に貢献 ● 即時的な能力向上だけでなく、中長期的なスキル向上にも貢献。 ● AIから コード提案と採用を繰り返すことで、エンジニア 能力上限を徐々に向上させる。 神話:AI 優秀なエンジニアしか使いこなせない

Slide 15

Slide 15 text

学習 S字カーブと AI によるエンジニア学習曲線 うわさ:AI 優秀なエンジニアしか使いこなせない AI 対話中にも自分 レビューできる範囲を拡張し続ける = 自分が短期的に学習可能な範囲まで 使いこなすことができる ● 好奇心と学習意欲があれ 、より多く 恩恵を受ける ● ど 学習フェイズでも、AIから 恩恵を受けられる 経 学 習 全く 初心者 時点で AI 力を十分に引き出せないが、 AI 初期学習 度を早める 🚀 初級者 ~ 中級者 能力一般や、 日常作業タスクにおける処理能力 大幅に引き上がる 上級者 、さらなる高みへ 生産性だけでなく、探求や高度化 ため パートナーになる

Slide 16

Slide 16 text

有効な開発をするコツ ● ツール特性 理解 ● プロンプト作成時 4 ポイント を理解

Slide 17

Slide 17 text

ツール 違いを知る 自動補完型 ボット型 (フリーフォーム型 ) エージェント型 (ソリューション型 ) 入力 エディタへ 入力 フォームへ 入力 フォーム 入力、ファイルアップロードなど 出力内容 コード / コメント コード / コメント / 解説文 編集可能なコードを含む成果物 出力形式 コード 補完 コードを含む返信 成果物 出力 コードサイズ 小規模 (数文字~20行程度) 中規模 (1行~数百行) 大規模 (数百行~数千行) 明示的なプロンプト 0行 ~ 数行程度 数行 ~ 数十行 大量 応答 度 数百ミリ秒 ~ 数秒 数秒 ~ 数十秒 数十秒 ~ ツール フォーカス 応答 度、開発時 集中力 精度、プロンプト構築補助 ソリューションとして 完成度 類似体験 ペアプログラミング モブプログラミング Sack や Teams で 技術質問 軽量なプルリクエスト受け取り ローコードツール 利用 テンプレートエンジン 利用 ツール例 GitHub Copilot (Completion) GitHub Copilot (Inline) ChatGPT GitHub Copilot Chat 一部 GPTs / ローコードツールなど (デファクトスタンダード なし )

Slide 18

Slide 18 text

Copilot (自動補完) 特徴を理解 ユーザーの入力を 最小化 ツール 質 、ユー ザーから 明示的な プロンプトなしに、望 まれる出力をどれだ け正確に予測できる かに依存 インクリメンタルな実装 手戻りの許容 迅速なレスポンスと 集中力の維持 確実で 安全な出力 Copilot Completion アジャイルなやりと りをサポート 段階的コード出力と ユーザーによる逐一 採否決定が可能 自動補完型ツール 利点 、迅 なレス ポンスによる集中力 維持 インデックス化された 状態で 96TB にもな る世界最大/ 最新 オープンソー スデータベースと 瞬時にコードマッチン グ、ライセンスに関す る問題発生を 抑止 ツールに求めるべき質 モデルに求めるべき質 と 異なる

Slide 19

Slide 19 text

Copilot プロンプト コツ Context 文脈 AI がタスクをよりよく 理解する に役立つ Intent 意図 Clarity 明瞭さ Specificity 具体性 プロンプトを作成する 際 具体的な目標や 目的。 曖昧さがなく 理解しやすいこと プロンプト 具体性と 正確さ レベル

Slide 20

Slide 20 text

Tips & Tricks

Slide 21

Slide 21 text

エージェント Copilot がより適切な回答を提供できるよう、エージェントを使用 して質問 範囲と意図を示すことができます。 ● @workspace: ワークスペース内 コードに関するコンテ キストがあり、コードをナビゲートして関連するファイルやク ラスを見つける に役立ちます。 ● @vscode: VS Code エディタ自体 コマンドと機能につい て知っており、それら 使用を支援できます。 ● @terminal: に 、統合ターミナル シェルとそ 内容に関 するコンテキストが含まれています。 @workspace version1.86 @vscode @terminal

Slide 22

Slide 22 text

スラッシュコマンド Copilot がより適切な回答を提供できるよう、スラッシュコマン ドを使用して質問 範囲と意図を示すことができます。 代表例 ● /explain: コードを解説する ● /fix: バグやエラー 修正を実施 ● /tests: 単体テストや機能テストを作成 ● /new: 新しいプロジェクト テンプレートを作る そ 他拡充されます /explain version1.86 /fix /newChat /tests

Slide 23

Slide 23 text

コンテキスト変数 Copilot がより適切な回答を提供できるよう、 コンテキスト変数を使用して質問 範囲と意図を示すことができま す。 ● #editor: エディタ 中 ● #file: 特定 ファイルを指定 ● #selection: 選択エリア ● #terminalLastCommand: 最後 ターミナルコマンド ● #terminalSelection: ターミナル 選択エリア Release: https://code.visualstudio.com/updates/v1_86 #editor version 1.86 #file #selection #terminalLastCommand #terminalSelection

Slide 24

Slide 24 text

最近 発表

Slide 25

Slide 25 text

#file コンテキスト変数 指定したファイルをチャットプロンプト コンテキスト としてワークスペースに含めることができるように追 加されました。 #file: 提案コントロールから選択し、表示されるク イック選択からファイルを選択します。 Release: https://code.visualstudio.com/updates/v1_86 #file:package.json version 1.86

Slide 26

Slide 26 text

#editor コンテキスト変数 以前 、アクティブなコード エディターから 2 種類 コンテ キストがデフォルトでチャット リクエストに含まれていました。 1. テキスト選択があった場合、そ 選択が含まれる 2. 選択がなかった場合 、アクティブなエディター 表示 ビューポート内 コード範囲が含まれる 現在 2 において、デフォルトで ビューポートにコードを含め ず、選択されたコード みを含めることを実験しています。 一方でエディターに表示されるコードについて質問したい場 合がよくあるため、新しいコンテキスト変数 を追加しました。 Release: https://code.visualstudio.com/updates/v1_86 #editor version 1.86

Slide 27

Slide 27 text

コミットメッセージ 言語を変更 git コミット メッセージを生成する際、特定 言語で コミット メッセージを生成することができるようになり ました。 Release: https://code.visualstudio.com/updates/v1_86 github.copilot.chat.localeOverride version 1.86

Slide 28

Slide 28 text

“Hey Code” 音声コマンド accessibility.voice.keywordActivation 設定により、VS Code が ”Hey Code”音声 コマンドを聞き、Copilot Chat と 音声セッ ションを開始できるようになります。音声認 識 マシン上でローカルに計算され、サー バーに送信されること ありません。 チャットビューからボイスチャットを開始 クイックチャットコントロールからボイスチャットを開始 エディター インラインチャットからボイスチャットを開始 フォーカスによって、インライン チャットと チャット どちらかが自動で開始 chatInView quickChat inlineChat chatInContext Requirements: Copilot Chat, VS Code Speech Release: https://code.visualstudio.com/updates/v1_86 version 1.86

Slide 29

Slide 29 text

インラインチャット ホールドして話すモード ⌘+I インライン チャットに「ホールドして話す」機 能が追加されました。これ 次 ように機 能します。 ● ショートカットでインライン チャットをト リガーします ● キーを押したままにすると、音声録音 が自動的に開始されます ● キーを放して記録を停止し、リクエスト を Copilot に送信します Requirements: Copilot Chat, VS Code Speech Release: https://code.visualstudio.com/updates/v1_86 Ctrl+I inlineChat.holdToSpeech version 1.86

Slide 30

Slide 30 text

インラインチャット クイックボイス 「ホールドして話す」 に加えて、こ 機能 よ り軽量な代替 UI を実験中です。ショートカット を押し続けると、クイックボイスがアクティブに なります。 ホルダーを押している間 I、より軽量な録音 UI が表示されます。解放されると、リクエスト が送信されます。 Release: https://code.visualstudio.com/updates/v1_86 ⌘+K Ctrl+K そして、 を押し続ける I version 1.86

Slide 31

Slide 31 text

AIフレンドリーな開発実践

Slide 32

Slide 32 text

AIフレンドリーな開発実践 ● Copilot デザインパターン ● チームコラボレーション for Copilot ● テスト / リファクタリング GitHub Copilot Patterns & Exercises ai-native.dev

Slide 33

Slide 33 text

Copilot デザインパターン 一貫性 ● AI が理解可能な命名規則 ● 一貫性 あるコーディングスタイル アーキテクチャ ● ハイレベルアーキテクチャを先に ● コンテキストレス・アーキテクチャ ● 小さなコードチャンクで作業する 再利用可能性 ● 微細な OSS 依存関係 排除 ● インナーソース

Slide 34

Slide 34 text

チーム コラボレーション for Copilot コードに変換可能な開発リソース作成 ● AIフレンドリーなドキュメンテーション ● Copilot Enterprise 向けリソース GitHub 集積 コーチング / 育成 ● プロンプト コーチング 共有 / 発展 ● プロンプトプラクティス 共有 ● プロンプトリポジトリ

Slide 35

Slide 35 text

テスト & リファクタリング テスト ● テストコード 生成方法を指定 ● 出力ケース数を数で指定 ● 自然言語からテストケース 記載を じめる リファクタリング ● オープンクエスチョンで尋 る ● ロジック 分離で、生成時 不可侵領 域を作る

Slide 36

Slide 36 text

まとめ:あまり気にしすぎない ● 「知っている」と「知らない」で GitHub Copilot 飼い慣らしに差 でますが、 GitHub で それを意識しないでも高いコード提案ができるようにプロダクトを作っています。 ● 結局 ところ「良いコーディング」をすれ 、 提案されるコードも「良いコード」になります。 ○ 人間にとって良いコーディング ○ 文脈を知らない人でもわかるようなコーディング ○ ミスを誘発しないような確かなコーディング

Slide 37

Slide 37 text

No content