AIとペアプロ!! ChatGPTとGitHub Copilotで ToDoアプリを爆速ライブコーディング/wakarimigithubcopilot

昨今、AI技術の急速な進化により、ソフトウェア開発の新しい可能性が広がっています。その中でも特に目を引くのが「ChatGPT」と「GitHub Copilot」です。これらの革新的な技術を駆使することで、かつては手間と時間を要したプログラミングが、驚異的な速度と効率で完成するようになります。

ChatGPTは、OpenAIによって開発された高度な自然言語処理（NLP）モデルです。このモデルはテキストベースの対話を理解し、自然な文章を生成する能力があります。プログラミングではコードの説明から問題解決、アイデア生成、そしてコードレビューまで多様な作業を効率化するのに役立ちます。これはもうソフトウェア開発のパラダイムシフトです。

GitHub Copilotは、GitHubとOpenAIが共同で開発したこのAIペアプログラマーは、あらゆるコーディング状況に対応するインテリジェントな補完機能と提案を提供します。実は、これはGitHubの膨大なコードベースから学習しており、それが可能にした先進的なコーディング補助ツールです。

今回は、この二つの技術を組み合わせて、爆速でToDoアプリを開発してみます！！ソースコード本体はもちろんのこと、DBスキーマの作成、テストコードの生成、さらにはリファクタリングまでAIにやってもらいます。

ぜひ、AIがソフトウェア開発にもたらす新しい可能性を一緒に体験しましょう。

今回ライブコーディングする環境は以下の通りとなります。

- 開発環境: Visual Studio Code
- 開発言語: Java
- フレームワーク: Spring Boot
- データベース: MySQL

Transcript

2. Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • Microsoft MVP for Microsoft Azure Favorites • Azure • パデル • スキー • ライブ配信 • ⽢いもの • ⾛ること blog https://tech-lab.sios.jp/ core skill Azureによるクラウドネイティブな アプリ開発 Twitter @noriyukitakei
3. ίʔσΟϯάΛॿ͚Δ ͍ΖΜͳ"*αʔϏε
4. 企画・設計 確認・検証 作業 ⼀般的な業務の流れ ソフトウェア開発の場合 要件定義・基本設計 詳細設計 実装 テストコード⽣成 テスト結果の確認 テストコードの確認 AIが苦⼿ AIが得意 AIが苦⼿ ソフトウェア開発におけるAIの適⽤範囲
5. AIは、特定の要件や課題に対して最適な実装⽅法やパターンを提案するのに役 ⽴ちます。デベロッパーが機能の要件や⽬的をAIに伝えることで、異なるアプ ローチや技術の検討材料としての提案を受け取ることができます。 実装⽅針の策定 既存のコードをAIに⽰して、より効率的、または読みやすくするための提案を 求めることができます。AIは、コードの改善ポイントや⼀般的なベストプラク ティスに基づいたアドバイスを提供することができます。 リファクタリング エラーメッセージや予期しない動作をAIに伝えることで、その原因や解決策に ついてのヒントや推薦を受け取ることができます。これにより、問題解決の時 間を短縮できる場合があります。 トラブル シューティング 実装した機能の概要や動作をAIに説明することで、適切なテストケースの提案 や基本的なテストコードのスニペットを⽣成するサポートを受けることができ ます。 テストコード⽣成 ソフトウェア開発におけるAIの適⽤範囲
6. ChatGPT ChatGPTはOpenAIが開発したGPT（Generative Pre-trained Transformer）アーキテクチャをベー スとする会話型AIモデルです。 このモデルは、⼤量のテキストデータを学習してお り、その結果として、ユーザーからの質問やコメン トに対して⼈間らしいレスポンスを⽣成することが できます。 ユーザーとの⾃然な対話を可能にするため、カスタ マーサポート、エンターテインメント、教育、その 他さまざまな⽤途での利⽤が考えられます。
7. GitHub Copilot GitHub Copilotは、GitHubとOpenAIが共同で開発 したAI駆動のコーディングアシスタントです。 公開されている膨⼤なソースコードを学習しており、 ユーザーが書き始めたコードに基づいてリアルタイ ムでコードの提案を⾏います。 これにより、関数、クラス、変数名などのコードス ニペットの⾃動補完が可能となります。さらに、特 定の技術スタックや⾔語のベストプラクティスに 沿った提案も得られます。
8. GitHub Copilot Chat GitHub Copilot Chatとは、AI技術を活⽤したコー ド補完ツールです。 GitHub Copilot Chatを使うと、サポートされてい るIDE内で直接コーディング関連の質問を⾏い、回 答を受け取ることができます。 たとえば、関数の書き⽅やコードの説明、単体テス トの⽣成、コード修正の提案などが可能です。 GitHub Copilot Chatは現在、限定的なパブリック ベータ版であり、申し込みが必要です
9. Chat GPTとGitHub Copilot Chatの違い ChatGPTでコードをリファクタする場合 Visual Studio Codeからリファク タ対象のコードをコピーする。 ChatGPTにコードを貼り付けて 、質問をする。得られた回答を コピーする。 ChatGPT得た回答をVisual Studio Codeに貼付ける。 Visual Studio Code ChatGPT(ブラウザ) Visual Studio Code
10. Chat GPTとGitHub Copilot Chatの違い GitHub Copilot Chatでコードをリファクタする場合 プロンプト ⼊⼒ 回答を取得 回答を貼り付け ① ② ③
11. ライセンス形態 1 か⽉あたり $10、または 1 年あたり $100 Copilot for Individuals Copilot for Business 価格 GitHubアカウントの種類 テレメトリ パブリック コードに⼀致する候補をブロック する エディターに直接接続する 複数⾏の関数の候補を提案する Organization 全体にわたるポリシー管理 カスタム証明書を使⽤した HTTP プロキシの サポート Copilot Chatの利⽤ 1 ユーザー、1 か⽉あたり $19 個⼈⽤アカウント Organization または Enterprise アカウン ト ✓ ✗ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✗ ✓ ✗ ✓ → ✓
12. 開発環境構築 それぞれのAIサービスの使いどころ 新規開発 機能追加 ChatGPT GitHub Copilot GitHub Copilot Chat
13. GitHub Copilot Chatに試してほしいプロンプトを募集中!! 以下のようにツイートしてください。 このプロンプトを試して。 [試してほしいプロンプト] #wakarimiazure
14. ࠓճϥΠϒίʔσΟϯά͢Δ ΞϓϦʹ͍ͭͯ
15. ライブコーディングするアプリの仕様 Visual Studio Code 開発環境 Java 開発⾔語 Spring Boot フレームワーク MySQL データベース Docker コンテナ管理ツール ToDOの追加、⼀覧表⽰、削除 機能
16. 開発環境の構成 Docker 3306 MySQL 3306 Visual Studio Code
17. 拡張機能のインストール 拡張機能のインストール GitHubへのサインイン
18. ディレクトリ構成 java/com/example/demo controller service repository resources application.propeties templates index.html ToDoController.java ToDoService.java ToDoRepository.java src → コントローラー → サービス → リポジトリ → thymeleafテンプレート → 設定ファイル entity ToDoEntity.java → エンティティ
19. Dockerでの MySQL構築 ToDoアプリでのAIサービスの使いどころ ToDo⼀覧 ToDo追加 新規開発 ToDo削除 追加 ChatGPT GitHub Copilot GitHub Copilot Chat
20. MySQL8.0のコンテナを作成するdocker- compose.ymlを教えてください。その他の情報は以下 のとおりです。 - データベース名: testdb - rootのパスワード: password
21. 以下の内容のEntityとRepoitoryクラスを⽣成してください。 - データベース名はtestdbとする。 - MySQLのrootのパスワードはpasswordとする。 - ToDoのEintityは、ID、ToDoのタイトル、ToDoの内容を持 つ。 - DDLは⾃動⽣成とする。 - Entityのパッケージはcom.example.demo.entityとする。 - Repoitoryのパッケージはcom.example.demo.repository とする。
22. 先に作成したRepoitoryを利⽤するServiceクラスを作成して ください。 実装する機能は、ToDoの⼀覧表⽰と作成としてください。 パッケージはcom.example.demo.serviceとします。
23. 先に作成したServiceを利⽤するControllerクラスを作成して ください。 実装する機能は、ToDoの⼀覧表⽰と作成としてください。 パッケージはcom.example.demo.controllerとします。
24. ToDoの⼀覧表⽰とToDoの作成機能があるthymeleafのテンプ レートを作成してください。
25. SIOS Tech.Lab https://tech-lab.sios.jp/ 世界⼀わかりみの深い クラウドネイティブ on Azure https://youtube.com/playlist?list=PLbTt_DSTMYgGLUtZ0ewuBwhTBSZnNE2-w 様々なメディアで情報発信しています︕︕ 是⾮みてね︕︕ 技術ブログ YouTube配信
26. エンジニア募集（プロフェッショナルサービスチーム） エンジニアファーストの環境で、技術⼒を⾼めませんか︖ 変化や進化を楽しみながら、私たちとともに歩んでくれる仲間を募集してい ます︕ OSS ＆ クラウド技術をコアテクノロジーとしたシステム開発 • 統合認証システム＆クラウド連携 • OSS＆クラウド基盤導⼊、OSSカスタマイズや開発、OSSサポート • クラウドネイティブシステム、データ分析基盤、アプリ開発 • APIエコノミーコンサルティング＆技術⽀援サービス 詳細はこちらのサイトからご覧ください︕ https://tech-lab-engineer.sios.jp/
27. ࠷ޙ·Ͱ͝ਗ਼ௌ௖͖ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ