VSCodeMeetup20240130

VSCode と GitHub Copilot/Copilot Chat その他 拡張機能を活⽤したフロントエンド開発 鈴⽊ 章太郎 主席エンタープライズアーキテクト ヴイエムウェア株式会社 2024/1/30 Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 1 | Broadcom

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

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

Agenda l 主に使⽤した拡張機能 l 資格試験対策⽤アプリ l 施設予約管理アプリ l 総合エンターテインメントアプリ l ベクターデータベース RAG サンプルアプリ 3 3 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

主に使⽤した拡張機能 Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 4 | Broadcom

GitHub Copilot / Copilot Chat 2023年1⽉時点での最新版 • Visual Studio Code 1.85.1 • GitHub Copilot v.1.151.0 • GitHub Copilot Chat v.0.11.1 • Billing 有効、GPT-4 有効 5 5 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

Postman for VS Code https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode • VS Code から直接 Postman の パワーを使って API 開発とテストを 合理化 • Postman にサインイン • API リクエストを送信 • HTTP API リクエストの送信 • マルチプロトコル API リクエストを 送信 • 履歴から API リクエストを送信 • コレクションを使う • API を⽂書化 • データをインポート • クッキーを使⽤ • API のテスト • スクリプトを使った API のテスト • Postman コンソールでのトラブル シューティング 6 6 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode

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種類 無料トライアル、有料プラン 7 7 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://uizard.io/

Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic（テキストプロンプトによる ⾃動⽣成） • 実画⾯イメージの取り込み • ⼿書き画⾯イメージの取り込み • その他の⽅法により画⾯遷移等 設定可能（ムービーなど） • JPEG 等で画⾯毎にエクスポート 8 8 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://uizard.io/

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

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

Locofy.ai https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 10 10 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://www.locofy.ai/

Figma & Locofy.ai プラグイン Figma プラグインを使ってソースコードを⽣成できる 11 11 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

資格試験対策⽤アプリ LegalTrial Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 12 | Broadcom

使⽤した主な VS Code 拡張機能 Web API 部分は ASP.NET Core 7、フロントエンド側は React で開発 • GitHub Copilot / Copilot Chat • Uizard • Figma for VS Code • Locofy.ai 13 13 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

LegalTrial Demo Localhost で実⾏ • React で順番に実装 • ●✖ ボタン配置 • Next ボタン実装 • ロジック実装 • ダークテーマに変更 • ⾃分の回答表⽰ • 他のロジック実装… 14 14 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

施設予約管理アプリ Reservelt Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 15 | Broadcom

使⽤した主な VS Code 拡張機能 Web API 部分は Spring Boot、フロントエンド側は React で開発 • GitHub Copilot / Copilot Chat • Uizard • Figma for VS Code • Locofy.ai 16 16 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

地⽅⾃治体連携施設予約サンプルアプリ Demo 17 17 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

統合エンターテインメントアプリ Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 18 | Broadcom

使⽤した主な VS Code 拡張機能 Web API 部分は FastAPI、フロントエンド側は React Native で開発 • GitHub Copilot / Copilot Chat • Uizard • Figma for VS Code • Locofy.ai 19 19 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

統合エンターテインメントアプリ Demo Web API 部分は Fast API、フロントエンド側は React Native で開発 21 21 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

ベクターデータベース RAG 検索 アプリ Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 22 | Broadcom

VMware Explore US セッション⼀覧（英語）/ビデオデータ https://www.vmware.com/explore/us.html 23 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 23

• https://www.vmware.com/explore/us.html

VMware Explore US セッションを⽇本語で検索・サマリーアプリ Xxx について教えて もっと詳しく教えて セッションを検索 1 2 3 ボタンを押す 4 詳細情報表⽰ 関連セッションの表 ⽰ pgvector を使⽤した セマンティック検索 検索 App Deploy 該当セッションの 概要 全⽂ テーブル テーブル 2. pgvector にてクエリと概要のベクトルを ⽐較し、関連セッションを検索 全⽂を検索 6 質問＋検索結果情報から 3. UI に関連セッション⼀覧を表⽰ プロンプトをビルド 4. 詳しく知りたいセッションの 「もっと詳しく リンク」を押す 7 Session 全⽂ ⽂字起こしの要 約を⽣成 5. 該当セッションの台本を検索 6. Greenplum DB より取得された全⽂ ⽂字起こしから LLM へのプロンプトを ⽣成し、LLM へクエリ Transformer Model を使⽤したベクトル情報の付与 7. セッション台本の要約を⽣成 Hugging Face LLAMA2 24 Workflow: 1. ユーザーが UI を通じて知りたいワードを React 5 セッションの 8 Explore US Explore US Session 概要 Session 全⽂ ⽂字起こし 8. UI にセッションの詳細を表⽰ (LLM) | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries. 24

VMware Greenplum とは ? 分析アプリケーション 課題 ソリューション 読み込み/書き込み SQL Language 組み込みアナリティクス • データサイエンティストの • 汎⽤技術 ANSI SQL 完全対応 GPtext and more 採⽤ • 分析をするにもデータが • 組み込みアナリティクス機能 マスターノード(仮想マシン) ほしいところにない スタンバイノードノード(仮想マシン) インターコネクト (⾼速ネットワークスイッチ) • データを蓄積するほど パフォーマンスが懸念 セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） セグメント ホスト （仮想マシン） • クラウドのコスト気になる • 分散 Postgres による 無限に スケールアウト 超並列処理の実現 • コア課⾦による 予想可能なコスト vSphere+ / vSAN+ • 拡張に伴い運⽤が⼤変そう • データが簡単には移⾏ ができない Platform Extension Framework (PXF) 読み込み/書き込み vSAN vSAN Disk DiskvSAN DiskvSAN Disk • vSphere 技術と連動した⾼い Elasticity (弾⼒性）の確保 S3 オブジェクト ストレージ Hadoop リレーショナル • PXFによる外部データの統合 データベース 外部データソース 25 25 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

使⽤した主な VS Code 拡張機能 Web API 部分は Spring Boot、フロントエンド側は React で開発 • GitHub Copilot / Copilot Chat • Postman for VS Code • Uizard • Figma for VS Code • Locofy.ai 26 26 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

Postman for VS Code で実⾏ - Search API https://explore-apiexplore.tap01.cl01.lespaulstudio plus.info/api/search?prompt=Aria 27 27 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://explore-api-

Postman for VS Code で実⾏ - Summarize API https://explore-apiexplore.tap01.cl01.lespaulstudioplus .info/api/summarize?sessionId=MAP B2503LV 28 28 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://explore-api-explore.tap01.cl01.lespaulstudioplus.info/api/summarize?sessionId=MAPB2503LV

29 29 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

VMware Tanzu Application Platform / Greenplum データベースと React による RAG サンプルアプリご紹介 https://qiita.com/shosuz/items/cc36e9794f8946eb888a 30 30 | Broadcom Proprietary and Confidential. Copyright © 2023 Broadcom. All Rights Reserved. The term “Broadcom” refers to Broadcom Inc. and/or its subsidiaries.

• https://qiita.com/shosuz/items/cc36e9794f8946eb888a

Thank You for your attention! Broadcom Proprietary Proprietary and Confidential. and Confidential. Copyright Copyright © 2023 Broadcom. © 2023 Broadcom. All RightsAll Reserved. Rights Reserved. The termThe “Broadcom” term “Broadcom” refers to refers Broadcom to Broadcom Inc. and/or Inc.itsand/or subsidiaries. its subsidiaries. 31 | Broadcom