Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AI-Powered Development with Copilot

AI-Powered Development with Copilot

Yuki Hattori

February 02, 2024
Tweet

More Decks by Yuki Hattori

Other Decks in Technology

Transcript

  1. AI-Powered Development
    with GitHub Copilot
    Yuki Hattori
    GitHub

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Once enabled…
    OpenAI
    LLM
    Context
    Suggestions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 学習 S字カーブと AI によるエンジニア学習曲線
    うわさ:AI 優秀なエンジニアしか使いこなせない
    AI 対話中にも自分 レビューできる範囲を拡張し続ける
    = 自分が短期的に学習可能な範囲まで 使いこなすことができる
    ● 好奇心と学習意欲があれ 、より多く 恩恵を受ける
    ● ど 学習フェイズでも、AIから 恩恵を受けられる



    全く 初心者 時点で
    AI 力を十分に引き出せないが、
    AI 初期学習 度を早める 🚀
    初級者 ~ 中級者 能力一般や、
    日常作業タスクにおける処理能力
    大幅に引き上がる
    上級者 、さらなる高みへ
    生産性だけでなく、探求や高度化
    ため パートナーになる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Tips & Tricks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 最近 発表

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. “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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide