GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用

38.7K Views

November 11, 23

intellij spring starter github github copilot github copilot chat visual studio code java spring boot h2

スライド概要

このセッションでは、Visual Studio Code の開発支援機能としての GitHub Copilot / Copilot Chat を詳しく掘り下げています。Java および Spring Boot で GitHub Copilot / Copilot Chat を使用する実践的な例を説明し、既存のプロジェクトをリファクタリングする方法を示します。GitHub Copilot / Copilot Chat がリアルタイムの Java コード提案を提供し、プログラミングタスクを支援する方法を直接確認できます。
https://ccc2023fall.java-users.jp/
https://sessionize.com/api/v2/2gdy2o95/view/Speakers
#jjug_ccc_a2

Shotaro Suzuki

@shosuz

スライド一覧

ヴイエムウェア株式会社ソリューションアーキテクト本部プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニットソリューションアーキテクトを兼務。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 23.46MB)

関連スライド

Azure OpenAI Service 概要とサンプルアプリ等のご紹介

microsoft azure openai .net python javascript ai chatgpt azure openai service csharp

Shotaro Suzuki 44.5K

.NET と Azure OpenAI Service を使ったインテリジェントアプリケーションを構築してみよう

.net azure azure openai service semantic kernel blazor webassembly blazor cosmos db azure cognitive search maui visual studio 2022 for mac

Shotaro Suzuki 9.2K

NET MAUI for .NET 7 for iOS, Android app development

.net7 maui ios android winui xamarin blazor macos

Shotaro Suzuki 8.8K

VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2

vscode github github copilot github copilot chat codex mermaid visual studio code visual studio azure sql database azure cosmos db openai asp.net core azure cognitive seach csharp azure openai service prompt engineering signalr chat

Shotaro Suzuki 8.6K

ASP.NET Core .NET 8 Preview 4 新機能

dotnet azure aspnetcore dotnet8 aspdotnetcore8 blazor blazorwebassembly

Shotaro Suzuki 8.1K

各ページのテキスト

鈴⽊章太郎 X (Twitter) : @shosuz ヴイエムウェア株式会社戦略ビジネス推進本部主席エンタープライズアーキテクト Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、 Microsoft Azure 等の開発者向け技術啓発活動を実施。その後 Dell、Accenture、Elastic での開発者向け技術啓発活動等を経て現職。モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中⼼に、開発者向け最新技術啓発活動中。 2019年4⽉より2021年8⽉まで、内閣官房 IT 総合戦略室政府 CIO 補佐官を兼務。 2021年9⽉より、デジタル庁プロジェクトマネージャーユニット & 戦略・組織グループ調査・企画 AI チームソリューションアーキテクトを兼務。 ©2023 VMware, Inc. https://www.docswell.com/user/shosuz

https://www.docswell.com/user/shosuz

https://ascii.jp/elem/000/001/905/1905256/

OpenAI AI モデルの機能 OpenAI AI モデルの機能は主に3 つのカテゴリ © 2023 VMware, Inc. 機能例⾃然⾔語の⽣成 GPT さまざまな読み取りレベルの複雑なテキストの要約、⽂章の⽂⾔の代替の提案などコードの⽣成 Codex プログラミング⾔語間でのコードの翻訳、コード内のバグの特定とトラブルシューティングなどイメージの⽣成 DALL-E テキスト説明からのパブリケーション⽤イメージの⽣成など 6

https://github.blog/2023-09-20-github-copilot-chat-beta-now-available-for-all-individuals/

10.

Markdown Preview Mermaid Support https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid • Mermaid 記法は、テキストのみで、ガントチャートや円グラフなどのチャートや、クラス図やシーケンス図のような UML で⽤いられるシステム可視化表現を⾏える • ダイアグラム・チャート作成ツールとフローチャートのサポートを、VS Code の組み込み Markdown プレビューとノートブックの Markdown セルに追加 • 現在、Mermaid バージョン 10.2.3 をサポート © 2023 VMware, Inc. 10

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

11.

12.

https://moaw.dev/workshop/github-copilot-java/

13.

14.

15.

16.

17.

ユーザー画⾯のフローを作成させる - 2 shosuz ありがとうございます。画⾯フローを Mermaid 拡張機能で表⽰できるように書いてください。 GitHub Copilot 以下は、Mermaid 拡張機能を使⽤して LegalQ アプリの画⾯フローを表したものです。 graph TD A[ログイン画⾯] --> B[メイン画⾯] B --> C[Questions&Answers 画⾯] B --> D[モード選択画⾯] B --> E[集計画⾯] E --> F[問題解説画⾯] F --> G[メモ編集画⾯] G --> F E --> H[終了画⾯] H --> A このフローチャートでは、ログイン画⾯からメイン画⾯に遷移し、メイン画⾯から Questions&Answers 画⾯、モード選択画⾯、集計画⾯に遷移します。集計画⾯からは、問題解説画⾯に遷移し、問題解説画⾯からは、メモ編集画⾯に遷移できます。終了画⾯からは、ログイン画⾯に戻ります。 © 2023 VMware, Inc. 17

18.

19.

GitHub Copilot による PlantUML の作成 PlantUML による作図（コードを1⾏も書かない︕） • • • DAW の画⾯⾊々な元の楽器 (Instrument) から派⽣している鍵盤楽器抽象クラス (Keyboard)、そしてすべてのクラス • • • • Plant ライブラリ (IntelliJ にプラグインされている）リソースにダイアグラムを1つ作成新規に PlantUML プラグインを追加してそれをクリックそして単にこうコメント -- ダイアグラムを作成します-アシスタントに書き込めば⾃動的にダイアグラムが作成される • • • • • • • • • © 2023 VMware, Inc. コメントを書く - PlantUML の HTML コードを書きインターフェイスやすべてが作成できる GitHub Copilot によりサイドバーやサイドパネルにダイアグラムが⾃動的に作成されるコメント -- 抽象クラスを作成しましょう -Keyboard そこからコメント –- 継承クラスを作りましょう -Piano、Organ、 Synthesizer… 19

20.

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

21.

22.

GitHub Copilot を使ってクラスを作成する GitHub Copilotを使ってシンプルでスピーディーなクラス実装 • GitHub Copilot を使ってすべてのクラスを作成 • • • • • インターフェイス Keyboard 抽象クラス Piano クラス Organ クラス Synthesizer クラス • インターフェイス、抽象クラス、4つの実装クラスを作成完了 © 2023 VMware, Inc. 22

23.

Copilot の将来像 Copilot Workspace が発表 (11/9) ⼈間がコードを書くことなく、Copilot が仕様作成からコード作成、デバッグまで実⾏ https://www.publickey1.jp/blog/23/githubcopilotcopilot_workspacecopilotcopilotgithub_universe_2023.html https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/ ⼈間が書いた Issue を起点に Copilot が Issue に対応した仕様を書き、実装計画を⽰し、それに沿ってコーディングや既存のコードの修正を⾏い、ビルドをして、エラーがあれば修正まで⾏い、コーディングのほぼ全ての⼯程を Copilot が⾃動的に実⾏してくれる © 2023 VMware, Inc. 23

24.

25.

Copilot を使⽤した Spring Boot アプリケーションの作成 Spring Boot CRUD の操作 • GitHub Copilot を使って、コントローラサービスのリポジトリを作成 • リポジトリとサービスがどのようなメソッドを呼び出すべきかを⾃動的に理解させる • コントローラが⾃動的に Mapping を取得、投稿、削除する⽅法 • すべてを GitHub Copilot がインテリジェントに管理する • JUnit のテストケースを作成 © 2023 VMware, Inc. 25

26.

27.

Spring Boot によるモデルクラス作成 GitHub Copilot を使って簡単な CRUD オペレーションを作成 • start.spring.io.、Maven を選択して⽣成する • demo と依存関係リストを1つだけ追加（残りの依存関係は、Copilotを使⽤して追加）⽣成 • モデルクラスを作成して、3つのデータモデルを⽤意（Customer、Product、Order） • GitHub Copilot にフィールドの作成を依頼するだけ • すでに何かを完成させている場合にも、そのヒントが表⽰ • 何かの候補が出現したら Tab を押下することにより確定 • Copilot の提案で良いものがあれば Accept Solution をクリック © 2023 VMware, Inc. 27

28.

29.

CRUD 操作のための他のコンポーネントの作成 GitHub Copilot を使ってすべてのコンポーネントを素早く作成 • リポジトリパッケージの作成 • • • CustomerRepository ProductRepository OrderRepository • サービスパッケージの作成 • • • CustomerService ProductService OrderService • コントローラの作成 • • • CustomerController ProductController OrderController © 2023 VMware, Inc. 29

30.

31.

Copilot によるアプリケーションへのテーブルとデータの追加 GitHub Copilot のマジック = コメントを書いて tab を押下するだけ • Spring Boot には schma.sql ファイルと data.sql ファイルの2つ • • • 3つのモデルがあるので、3つのテーブルが必要 • • • • -- テーブルを作りたい -- とだけコメントする Customer テーブル、 Product テーブル、Order テーブルを作成 Customer モデルを開いてそのクラスの中のプロパティを全部 shema.sql にコピペして、コメントインメモリデータベース h2 を作成 • • • application.properties にある設定によって実⾏される resources フォルダ → new File → schema.sql Spring.Jpa が必要 h2 コンソールが必要ステートメントを挿⼊してデータを追加（そのために data.sql が必要） • • • • • Customer テーブル、 Product テーブル、Order テーブルここでコメントを書く -- 異なる製品の5つのサンプルについて、挿⼊ステートメントを書いてください。-同じ要領で作ってデータを⼊れる 5回 Enter と Tab を押すと5まで⽣成 © 2023 VMware, Inc. 31

32.

33.

34.

35.

36.

h2 コンソールでデータを確認すべてのモデルをエンティティとして宣⾔し直す • エンティティとして作成しテーブルを作成すると、テーブルの名前も⾃動的に設定される • • • Model クラスの Customer.java を開いてクラスの定義の前に @Entityとタイプ @Table (name = “CUSTOMER”) と⼊るついで @Id とタイプ＠Colum(name = “CUSTOMER_ID”) と追加される (その下の⾏はそのまま public Long customerId; ) • Order.java、Product.java も同じように変更 • • • schema.sql、data.sql も確認カラム名は Copilot による実装の後でも確認が必須カラム名指定もできる • ブラウザにアクセスして localhost をチェック • • • http://localhost:8080/h2-console schema.sql で、customers, products, orders があることを確認 SELECT * FROM CUSTOMERS（ORDERS、PRODUCTS も同様に）データを確認） © 2023 VMware, Inc. 36

http://localhost:8080/h2-console

37.

38.

39.

他の RDBMS 等を追加する例 GitHub Copilot に聞きながら最適な RDBMS インスタンスを最適なインフラに⽴てて接続 • ローカルホストで MySQL インスタンス作成 • 独⾃の MySQL インスタンスを Linux マシンやリモートの Windows Server にインスタンス作成 • AWS/Azure/GCP の仮想マシン（EC2、Azure VM、GCE）に作成 • • そのままインスタンスを⽴てる Docker を使って⽴てる • 例︓resouces → mysqlprocedure.sh のようなスクリプトを準備 • PaaS (AWS RDS、Azure Database、GCP）で MySQL 互換エンジンを使ってインスタンスを⽴てる • Azure SQL Database (PaaS) にアクセスする場合の接続⽅法等を GitHub Copilot に聞き保存 © 2023 VMware, Inc. 39

40.

JUnit Test Case の追加と実⾏ GitHub Copilot を使ってコントローラをテストしてディレクトリを作成 • Spring Boot Test とアノテーション • CustomerControllerTest.java を作成 • GitHub Copilot を使ってサジェストとオートコンプリートを使ってデータを⽣成 • Copilot にユーザーが何を望んでいるかを推測させる（次のコマンドをタイプしていく） • • • • • • • @SpringBootTest... @AutoWired.. @MockBean.. でリポジトリ⽤の MockBean を作成 (データベースを触らないため） @Test.. をタイプして、GitHub Copilot が何を提案するか待つ Tab 押下でデータ作成してくれる Assertion と assertEquals @SpringBootTest の下の⾏にデバッグ⽤のポイントを設定して、Run CustomerControllerTest • ProductController Test.java、OrderControllerTest.java も同様 © 2023 VMware, Inc. 40

41.

42.

43.

Uizard https://uizard.io/ • Uizard は2018年に設⽴されたデンマークの企業 • AI を使ったアプリデザインツール • プロのデザイナーでなくてもプログラミングができなくても、簡単に UI が作れる • • • • • • • • • • 基本機能 Magic (AI を使った機能) Scan Wireframe Sketch Wireframe Mode Scan Screenshot Smart Themes Attention Heatmap Text Assistant 保存ファイル形式は、SVG, PNG, JPEG, PDF の4種類無料トライアル、有料プラン © 2023 VMware, Inc. 43

https://uizard.io/

44.

https://uizard.io/

45.

Figma for VSCode https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension エディタを離れることなく、デザインファイルの確認、デザイナーとの共同作業、変更の追跡、実装のスピードアップ可能 • Figma ファイルを VSCode 内で開いて編集をすることができる拡張機能 • この拡張機能を使⽤して、Figma ファイルからコードを⽣成することはできない • ただし、Figma ファイルから CSS スタイルをエクスポートして、React コンポーネントに適⽤できる • また、Figma ファイルからデザインのアイデアを得て、⼿動で React のコンポーネントを作成できる © 2023 VMware, Inc. 45

https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

46.

https://www.locofy.ai/

47.

48.

49.

50.

[beta]

デバッグでは Explain とクイックフィックスをうまく組み合わせる
shosuz
/explain 型 'LegalQuiz.Shared.Models.Issue' を
'Microsoft.AspNetCore.Mvc.ActionResult' に暗黙的に変換できません
GitHub Copilot
このエラーは、DeleteIssue()メソッドがIssueを返すことが期待されているが、
ActionResult<Issue>を返しているために発⽣しています。DeleteIssue()メ
ソッドがIssueを返すように修正するには、以下のようにOk()メソッドを使⽤して、
Issueをラップする必要があります。

[HttpDelete("{id}")]
public async Task<ActionResult<Issue>> DeleteIssue(int id)
{
var issue = await _context.Issues.FindAsync(id);
if (issue == null)
{
return NotFound();
}
_context.Issues.Remove(issue);
await _context.SaveChangesAsync();
return Ok(issue);
}
これにより、IssueがActionResult<Issue>にラップされ、エラーが解決されます。
© 2023 VMware, Inc.

50

51.

https://learn.microsoft.com/ja-jp/training/modules/introduction-to-github-copilot/

52.

GitHub Copilot の概要シリーズ AI を利⽤したアドオン GitHub Copilot を使⽤してコードやドキュメントの記述で役⽴つ提案を得る⽅法 https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza © 2023 VMware, Inc. 52

https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza

53.

GitHub Copilot in VS Code GitHub Copilotエクステンションはコードをより速くスマートに書くための AI ペアプログラマーツール https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza © 2023 VMware, Inc. 53

https://learn.microsoft.com/ja-jp/shows/introduction-to-github-copilot/?WT.mc_id=academic-0000-alfredodeza

54.

How to use GitHub Copilot: Prompts, tips, and use cases 2 ⼈の GitHub Developer Advocate が希望する結果を AI ペアプログラマーに伝えるための例とベストプラクティスを共有 https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/ このガイドでは、IDE で⽣成 AI コーディングツールを使⽤する開発者の観点から⽤語を定義します。ただし、全体像を把握するために、以下の表に ML 研究者の定義も追加しました。プロンプト © 2023 VMware, Inc. 迅速なエンジニアリングコンテクスト開発者 GitHub Copilot から特定の提案を⽣成するために開発者が作成したコードブロック、コードの個々の⾏、または⾃然⾔語コメント IDE で指⽰やコメントを提供して、特定のコーディング提案を⽣成する⽣成 AI コーディングツールからの⽬的の出⼒を指定するために開発者によって提供される詳細機械学習研究者アルゴリズムによって継続的に⽣成され、⽣成 AI コーディングツールのモデルに送信されるIDE コードと関連コンテキスト(IDE コメント、開いているファイル内のコードなど)のコンパイル⼤規模な⾔語モデルのプロンプト (IDE コードとコンテキストのコンパイル) を⽣成するアルゴリズムの作成アルゴリズムがコードに関する追加情報として⼤規模⾔語モデル (LLM) に送信する詳細(開いているファイルのデータや、カーソルの前後に記述したコードなど) 54

55.

https://www.ai-native.dev/docs/v/ja/

56.

https://moaw.dev/workshop/github-copilot-java/

57.

58.

59.