VS CodeとGitHub Copilotで爆速開発！アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave

Transcript

1. #vscodejp VS CodeとGitHub Copilotで 爆速開発！ アップデートの波に乗るおさらい会 GitHub Copilot Meetup Tokyo VS Code Meetup / 株式会社CARTA HOLDINGS yamachu
2. #vscodejp 自己紹介 { "name": "Yusuke YAMADA (ちゅうこ, yamachu)", "workAt": "株式会社CARTA HOLDINGS", "belongTo": ["VS Code Meetup", "Microsoft MVP"], "interests": [ "TypeScript", "C#", "Scala", "VS Code" ], "accounts": { "X": "@y_chu5", "GitHub": "yamachu" } }
3. #vscodejp 本日のお品書き • GitHub Copilotに関するVS Codeアップデート おさらい • VS Code Meetupのご紹介
4. #vscodejp GitHub Copilotに関するVS Codeアップデート • VS Code Meetupで月一実施しているアップデート読み会 の先取り • 今回のメインはVS Code v1.102のアップデート！ ◦ 今朝3時ごろリリースがありましたね！ ◦ 今月もスクロールの6~7割がGitHub Copilot関係… • その他最近の見逃せないアップデートも
5. #vscodejp Generate custom instructions
6. #vscodejp Generate custom instructions • コードベースを分析し、プロジェクトの構成などを 反映したinstructionsファイルを生成および更新する ◦ 面倒な更新漏れも、これをポチれば最新にしてくれるのです…! ◦ 作られるのは大元の `.github/copilot-instructions.md` • CLAUDE.md や .cursorrules のような外部Agentの ルールファイルも参照する 0から作る場合や、既にあるinstructionsの更新におすすめ そもそもカスタムインストラクションってなんだっけ？は後ほど触れます
7. #vscodejp Edit previous requests (Experimental)
8. #vscodejp Edit previous requests (Experimental) • 過去のChatリクエストを別の内容でやり直しが可能に • Model変えたいな、コンテキスト足したいな、そもそもこ こから全てがおかしくなった…とかの時に ◦ その先のリクエストと変更が破棄されるので利用時は注意
9. #vscodejp Terminal auto approval (Experimental) • AgentModeでTerminalで実行するコマンドを自動承認 できるように ◦ 普段使うこの辺りはもう聞かずにやっちゃってくれを定義できる • defaultでは、rmやeval, curlなどはdenyされる設定に "github.copilot.chat.agent.terminal.allowList": { "npm run test": true, "/^git (status|log)$/": true }
10. #vscodejp Agent mode badge indicator • やっっっっっっっっっっと来た • AgentMode指示待ちで無限の時間経った問題… • ウィンドウがフォーカスから外れていた場合 macOSだったらDockでぴょんぴょん跳ねる 某CodeのHooksほしいなぁ
11. #vscodejp Chat mode improvements
12. #vscodejp Chat mode improvements • カスタムチャットモードでモデルの指定が可能に ◦ 編集させないで実装計画だけさせたい、頭の良いモデル使いたいなー みたいなケースで便利 • その他カスタムチャットモードのユースケース ◦ 特定のMCP Serverを使うようにカスタマイズ ◦ AIがまだ知らない知識を得るために、読ませるドキュメントを あらかじめ指定した、ドメイン特化のAskモードを作ったり
13. #vscodejp カスタムインストラクション • Chatに常に参照される指示ファイル • タスクに応じた使い分けがキモ ◦ コーディング規約 ◦ コードレビューなど • 置く場所で適用範囲が変わる ◦ Workspace: .github/copilot-instructions.md ◦ glob指定: .github/instructions/*.insturctions.md
14. #vscodejp カスタムインストラクション
15. #vscodejp カスタムインストラクション • レビュー時やコミットメッセージ生成など、 タスクに応じた設定はVS Codeで ◦ https://code.visualstudio.com/docs/copilot/copilot-customization • もっと有効的なinstructionsファイルなどが欲しい！ ◦ https://github.com/github/awesome-copilot ◦ instructionsに加え、chatmodesやpromptsなどナレッジの宝庫
16. #vscodejp Reading chat requests
17. #vscodejp Reading chat requests • Copilot Chatのすべてのリクエストを確認できる ◦ 自分の送ったプロンプト ◦ システムプロンプト ◦ ファイルなどのコンテキストなどなど • 「Show Chat Debug View」で起動できる • vscode-copilot-chatがOSSになったことでプロンプトも 大公開になった…？ ◦ https://github.com/microsoft/vscode-copilot-chat ◦ Chatは実は「Export Chat…」でjsonで前から出力できていた
18. #vscodejp Start chat from the command line
19. #vscodejp Start chat from the command line • コマンドラインからCopilotのChatセッションを 始めることが出来るように ◦ 普段ターミナルで作業していて急に何か仕事させたくなったら便利…？ ◦ 限定的な機能は `gh copilot` コマンドでも出来たが、プロジェクト依存 のコンテキストは `code chat` 側に集約か？ VS CodeのUI非依存のAgentの布石…？今後に期待 うまい使い方を思いついた方はぜひ共有してください！
20. #vscodejp Copilot Vision
21. #vscodejp Copilot Vision • VS Code内蔵のSimple Browserで表示した Webページ全体や要素をコンテキストとして扱う機能 ◦ 選択した要素に適用されているCSSや文字列をコンテキストとして 扱っている ◦ もちろんスクリーンショットも • Workspaceをlocal serverでホストするLive Previewとも 連携できる かんたんなCSS調整にはすぐ扱えて便利
22. #vscodejp その他みのがせないアップデート • Next Edit Suggestion ◦ 直近の変更処理から、次の編集箇所を推論して補完 • MCP Server対応 ◦ https://code.visualstudio.com/mcp から直接Install ◦ 認証管理 • Tool Sets ◦ 普段は有効にしたくないけど、タスクによっては使いたいツールを ひとまとめに管理 • Start a coding agent session (Preview) ◦ `#copilotCodingAgent` で後やっておいてが可能に
23. #vscodejp VS Code Meetupコミュニティのご紹介 • VS Codeのアップデートから１〜２週間後に オーガナイザがUpdateを読み上げ解説する会を開催 • 不定期でLT会やテーマに沿った登壇も • 過去イベントの様子はYouTubeで配信しています
24. #vscodejp VS Code Meetupコミュニティが気になった方へ • Connpassグループへの参加 • YouTubeチャンネル登録 ◦ https://www.youtube.com/@vscodemeetup6795 • VS Code Meetup Discordへの参加 ◦ 質問 #qa ◦ 雑談 #chat Discord参加URL
25. #vscodejp 07.18 Azure OpenAI Service Dev Day 2025