VSCodeMeetup20240130

4.2K Views

January 30, 24

vs code github github copilot github copilot chat java .net asp.net core spring boot api genai postman uizard locofy.ai figma react react native fast api tanzu application platform tanzu data platform rag vmware greenplum

スライド概要

VS Code Meetup #27
VS CodeをテーマにしたMeetup27弾！
https://vscode.connpass.com/event/303633/

profile-image
スライド一覧

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 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 - 9.34MB)

関連スライド

slide-thumbnail

GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用
intellij spring starter github github copilot github copilot chat visual studio code java spring boot h2
user-img Shotaro Suzuki 46.4K
slide-thumbnail

Azure OpenAI Service 概要とサンプルアプリ等のご紹介
microsoft azure openai .net python javascript ai chatgpt azure openai service csharp
user-img Shotaro Suzuki 45.3K
slide-thumbnail

新たな AI 駆動開発の潮流(SWE Agent, AutoDev,Devin, GitHub Copilot Workspace等)
devin opendevin azure autodev github github copilot github copilot chat swe agent chatgpt openai python conda claude github copilot workspace gpt-4 gpt-4o agent github codespace
user-img Shotaro Suzuki 18.6K
slide-thumbnail

VS Code 拡張機能を活用した AI 駆動フロントエンド開発 - 実践編
vs code github copilot github copilot chat figma cursor uizard locofy.ai react native flask postman postman for vs code tanzu application platform kubernetes azure kubernetes service microsoft azure vector database hugging face asp.net core fastapi
user-img Shotaro Suzuki 12.4K
slide-thumbnail

最新の React/TypeScript SPA テンプレートを .NET 8 で試してみよう
react angular vue node.js vite javascript visual studio 2022 preview visual studio code typescript .net conf asp.net core .net 8 interactjs microsoft.jsinterop npm
user-img Shotaro Suzuki 11.7K
slide-thumbnail

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
user-img Shotaro Suzuki 11.1K
各ページのテキスト
1.

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

2.

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

3.

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.

4.

主に使⽤した拡張機能 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

5.

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.

6.

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.

7.

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.

8.

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.

9.

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.

10.

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.

11.

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.

12.

資格試験対策⽤アプリ 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

13.

使⽤した主な 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.

14.

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.

15.

施設予約管理アプリ 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

16.

使⽤した主な 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.

17.

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

18.

統合エンターテインメントアプリ 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

19.

使⽤した主な 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.

20.

統合エンターテインメントアプリ 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.

21.

ベクターデータベース 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

22.

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

23.

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

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.

25.

使⽤した主な 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.

26.

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.

27.

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.

28.

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

29.

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.

30.

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

31.