GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用

GitHub Copilot / Copilot Chat で Java コーディングを最⼤限効率化する 鈴⽊ 章太郎 主席エンタープライズアーキテクト ヴイエムウェア株式会社 戦略ビジネス推進本部 © 2023 VMware, Inc.

鈴⽊ 章太郎 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

Java エンジニアでなくても⽣産性⾼く開発できます ©2023 VMware, Inc. https://ascii.jp/elem/000/001/905/1905256/ 3

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

Agenda l GitHub Copilot / Copilot Chat 概要 l Copilot を使⽤した プロトタイプ開発 l Copilot を使⽤した Spring Boot アプリケーション開発 l Copilot と他ツールを使⽤したフロント エンドアプリケーション開発 l GitHub Copilot Tips 他 ©2023 VMware, Inc. 4

GitHub Copilot / Copilot Chat 概要 © 2023 VMware, Inc. 5

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

GitHub Copilot Chat beta now available for all individuals https://github.blog/2023-09-20-github-copilot-chat-beta-now-available-for-all-individuals/ © 2023 VMware, Inc. 7

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

IntelliJ への GitHub Copilot / Copilot Chat 拡張機能追加 Plugins から GitHub Copilot を検索して install © 2023 VMware, Inc. バージョンは 1.4.0.3748 (2023/11/10 時点) 8

VSCode の実⾏環境 2023年11⽉11⽇時点での最新版 • Visual Studio Code 1.84.1 • GitHub Copilot v.1.134. 0 • GitHub Copilot Chat v.0.10.1 preview • Billing 有効、GPT-4 有効 © 2023 VMware, Inc. 9

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

Java アプリケーション開発における両ツールの使い分け 両⽅を同時に使うのがベスト • IntelliJ は Java の All in one 環境ゆえ 基本はこちらをメインに使う（Chat は別途 評価） © 2023 VMware, Inc. • VSCode で、クロスチェック、Copilot Chat 活⽤、豊富な他ツール連携拡張機能連携 11

Java 開発者⽤ GitHub Copilot/Copilot Chat ワークショップ Microsoft @yoshioterada さん作成 https://moaw.dev/workshop/github-copilot-java/ © 2023 VMware, Inc. 本⽇（2023/11/11)発表︕ 12

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

Copilot を使⽤したプロトタイプ開発 © 2023 VMware, Inc. 13

ユースケースからデータモデルを作成させる （例） あの司法試験が、いよいよ2026年からは CBT になることが発表。これは実務に合わ せたもの これに限らず国家資格・⺠間資格のユース ケースについて聞く shosuz 国家試験の資格試験のオンライン受 験システムが必要です。どんなユース ケースが考えられますか? © 2023 VMware, Inc. 14

基本的なデータモデルの提⽰ • 基本的なデータモデルが提⽰される • 実際のシステムでは更に詳細なエンティティやリレーショ ンシップを追加する可能性あり • 例︓管理者側システムと、ユーザー側システム、受験 経験者の管理、受験のセキュリティ確保、他 © 2023 VMware, Inc. 15

⾃動⽣成させたサンプルデータ shosuz 各エンティティのサンプルデータをテーブル 形式で出⼒してください。 GitHub Copilot 以下に各エンティティのサンプルデータを テーブル形式で出⼒します。 --以上が各エンティティのサンプルデータで す。これらのデータは、受験者、試験、 問題、回答、採点、試験結果などの 情報を表しています。 © 2023 VMware, Inc. 16

ユーザー画⾯のフローを作成させる - 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

© 2023 VMware, Inc. 18

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

IntelliJ への PlantUML 拡張機能追加 Plugins から PlantUML を検索して install https://marketplace.visualstudio.com/items?itemName= jebbs.plantuml IntelliJ © 2023 VMware, Inc. VSCode brew install graphviz 20

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

© 2023 VMware, Inc. 21

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

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

• 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/

Copilot を使⽤した Spring Boot アプリケーション開発 © 2023 VMware, Inc. 24

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

Spring Boot によるモデルクラス作成 GitHub Copilot を使って簡単な CRUD オペレーションを作成 • • start.spring.io Maven を選択、依存関係リストを1つだけ追加（残りの依存関係は Copilot を使⽤して追加）・⽣成 © 2023 VMware, Inc. 26

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

© 2023 VMware, Inc. 28

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

© 2023 VMware, Inc. 30

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

© 2023 VMware, Inc. 32

© 2023 VMware, Inc. 33

©2023 VMware, Inc. 34

© 2023 VMware, Inc. 35

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

©2023 VMware, Inc. 37

©2023 VMware, Inc. 38

他の 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

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

© 2023 VMware, Inc. 41

Copilot と他ツールを使⽤した フロントエンドアプリケーション開発 © 2023 VMware, Inc. 42

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/

Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic（テキストプロンプトによる ⾃動⽣成） • 実画⾯イメージの取り込み • ⼿書き画⾯イメージの取り込み • その他の⽅法により画⾯遷移等 設定可能（ムービーなど） • JPEG 等で画⾯毎にエクスポート © 2023 VMware, Inc. 44

• https://uizard.io/

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

Locofy.ai https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 © 2023 VMware, Inc. 46

• https://www.locofy.ai/

Figma & Locofy.ai プラグイン Figma プラグインを使ってソースコードを⽣成できる © 2023 VMware, Inc. 47

React コンポーネントを使⽤して API と UI を連携させてアプリを完成 イメージを参照しながら指⽰内容を⼩出しにしつつ明確なプロンプトで指⽰を⾏う © 2023 VMware, Inc. • 普通に実装 • ●✖ ボタン配置 • Next ボタン実装 • ロジック実装 • ダークテーマに変更 • ⾃分の回答表⽰ • ロジック実装 48

GitHub Copilot Tips 他 © 2023 VMware, Inc. 49

デバッグでは 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

GitHub Copilot の概要 わかりやすい⼊⾨⽤コンテンツ https://learn.microsoft.com/ja-jp/training/modules/introduction-to-github-copilot/ © 2023 VMware, Inc. 51

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

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

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

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

• https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/
• https://github.blog/2023-05-17-how-github-copilot-is-getting-better-at-understanding-your-code/

GitHub Copilot Patterns & Exercises 元 Microsoft 現 GitHub アーキテクト @yuhattor さん提供 https://www.ai-native.dev/docs/v/ja/ © 2023 VMware, Inc. 55

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

Java 開発者⽤ GitHub Copilot/Copilot Chat ワークショップ Microsoft @yoshioterada さん作成 https://moaw.dev/workshop/github-copilot-java/ © 2023 VMware, Inc. 本⽇（2023/11/11)発表︕ 56

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

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/ © 2023 VMware, Inc. 57

• 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/

Agenda 本⽇お話ししたこと l GitHub Copilot / Copilot Chat 概要 l Copilot を使⽤した プロトタイプ開発 l Copilot を使⽤した Spring Boot アプリケーション開発 l Copilot と他ツールを使⽤したフロント エンドアプリケーション開発 l GitHub Copilot Tips 他 ©2023 VMware, Inc. 58

Thank you for your attention! © 2023 VMware, Inc.