---
title: AI 駆動フロントエンド（Web アプリ、ネイティブモバイルアプリ）開発ツール等最新アップデート
tags:  #figma #.net #.net smart components #locofy.ai #uizard #vs code #ai driven development #front end #openai #azure openai service #react native #vercel #v0 #gpt engineer  
author: [Shotaro Suzuki](https://www.docswell.com/user/shosuz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4EZG3N6NJ3.jpg?width=480
description: https://aid.connpass.com/event/327682/ AI駆動開発(AI-Driven Development) 勉強会（第3回）
published: September 15, 24
canonical: https://www.docswell.com/s/shosuz/Z1RR94-2024-09-15-194001
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4EZG3N6NJ3.jpg)

AI 駆動フロントエンド（Web
アプリ、ネイティブモバイルアプリ）
開発ツール等最新アップデート
Shotaro Suzuki
Principal Enterprise Architect
VMware by Broadcom
2024/09/11


# Page. 2

![Page Image](https://bcdn.docswell.com/page/Y76YX829EV.jpg)

鈴⽊ 章太郎
X (Twitter) : @shosuz
Principal Enterprise Architect
VMware by Broadcom
Microsoft で13年間、テクニカルエバンジェリストとして .NET、
Visual Studio、Windows、iOS、Android、Microsoft Azure 等の
開発者向け技術啓発活動を実施。その後、Dell、Accenture、
Elastic での開発者向け技術啓発活動等を経て現職。 モダン
アプリケーション開発、マルチクラウド対応、アーキテクチャ策定
等を中⼼に、開発者向けに 最新技術啓発活動中。
2019年4⽉〜2021年8⽉、内閣官房 IT 総合戦略室 政府
CIO 補佐官、2021年9⽉〜2024年3⽉、 デジタル庁 プロジェク
トマネージャーユニット ソリューションアーキテクトを兼務。
https://www.docswell.com/user/shosuz


# Page. 3

![Page Image](https://bcdn.docswell.com/page/G75GX92D74.jpg)

元⽊さんの分類
https://x.com/ai_syacho/status/1829727270841532426


# Page. 4

![Page Image](https://bcdn.docswell.com/page/9J2YX21MJR.jpg)

§ v0 by vercel
§ GPT Engineer
§ Uizard
§ Locofy.ai
§ Figma
§ .NET Smart Component


# Page. 5

![Page Image](https://bcdn.docswell.com/page/DEYG8YZPEM.jpg)

統合エンターテインメント
アプリ画⾯の例
•
•
•
•
メイン画⾯
コミュニティ
イベント
賭け事
•
•
検索画⾯
AI アシスト
ベッティング結果
推奨コンテンツ
•
ビデオ再⽣
ファンとの絆を深めるデジタル体験
ファンとの絆を深める
•
ファンのコミュニティ
選⼿とファンはチャットルームなどでつながることができる
好きな競⾺場（競⾺場、競艇場、競輪場、オートレース場）
•
•
•
トップページ
•
•
•
登録画⾯
•
パーソナライズ


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJNGQP3M78.jpg)

React Native ➕ バックエンド API 全体のアーキテクチャ例
基盤レベルでのアジャイル開発/ 運⽤
ユーザー認証
マイクロサービス
イベント管理
マイクロサービス
AI 検索
マイクロサービス
基盤レベルの開発/ 運⽤⾃動化
開発⾼速化と運⽤省⼒化
及びガバナンスを提供するアプリ基盤
(アプリ基盤がCI/CDを提供)
React Native
カスタマイズ可能な基盤組み込みのサプライチェーン
(スマホ上で実⾏)
コミット
取得
テスト
ビルド
脆弱性検査 構成定義
コミット
デプロイ
AKS (Kubernetes) on Azure


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YE9WD39WE3.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/GE8N3M9R7D.jpg)

v0 by vercel
https://v0.dev/
•
•
•
⾼速プロトタイピング:
• 迅速なプロトタイピングと開発
を⽀援するプラットフォームで、
ユーザーがアイデアをすぐに
形にするためのツールやテンプ
レートを提供
簡易なインターフェース:
• コーディングの知識が少ない
ユーザーでも利⽤できる
シンプルで直感的なインター
フェースが特徴
API 統合のサポート:
• 様々な API やサードパーティ
ツールとの統合を容易に⾏う
ことができ、効率的な開発が
可能


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LELPV3W27R.jpg)

GPT Engineer
https://github.com/gpt-engineer-org/gpt-engineer
•
•
•
OpenAI の GPT
（Generative Pre-trained
Transformer）テクノロジーを
使⽤して AI モデルを作成し、
微調整する開発者を⽀援する
ために設計されたツール
ユーザーが提供するプロンプトに
基づいて、コード、ドキュメント、
インフラストラクチャを⽣成すること
で、開発プロセスの⼀部を⾃動化
AI 駆動型アプリケーションを迅速
に構築し、さまざまなモデルアーキ
テクチャを試すのに特に役⽴つ


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JM4GD997W.jpg)

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種類
無料トライアル、有料プラン
年間プラン︓$160
Angular 対応 → new


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJRWZ4G979.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PEXP92X37X.jpg)



# Page. 13

![Page Image](https://bcdn.docswell.com/page/3EKDPMWNJD.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/L73RXY1ZJ5.jpg)

ネイティブモバイルアプリのモックを実装する
Uizard で Magic のプロンプトを⼯夫して試⾏錯誤し SVG の画像をエクスポートする


# Page. 15

![Page Image](https://bcdn.docswell.com/page/87DY25X47G.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJP61GPVE8.jpg)

Locofy.ai プラグイン for Figma
Locofy.ai Figma プラグインを使ってソースコードを⽣成できる（ここから Locofy.ai Studio を起動）


# Page. 17

![Page Image](https://bcdn.docswell.com/page/2EV3Y62R7Q.jpg)

Locofy.ai Builder - 1
Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを⽣成する


# Page. 18

![Page Image](https://bcdn.docswell.com/page/57G39NR6JL.jpg)

Locofy.ai Builder - 2
Uizard、Figma、VSCode、Locofi.ai
Uizard、Figma、VSCode、Locofi.aiの連携により
の連携によりReact
ReactNative
Native/ /Typescript
Typescriptのソースコードを⽣成する
のソースコードを⽣成する


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EQ5WQV2JP.jpg)

Visual Studio Code で⽣成された Project を開く
Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを⽣成する


# Page. 20

![Page Image](https://bcdn.docswell.com/page/KJ49KNMP71.jpg)

Figma 新機能
(Thanks to 徳永くん @y_toku from Figma)
デザインツールのFigma、6つの⽣成 AI 機能を追加する 「Figma AI」 を発表
https://atmarkit.itmedia.co.jp/ait/articles/2407/17/news067.html
Figma が AI でさらに進化︕Web 制作はもはや完全⾃動化⽬前︖
「Config APAC 2024」現地レポ
https://webtan.impress.co.jp/e/2024/07/29/47425
• ビジュアル検索、AIを活⽤したアセット検索
• ⽂章の翻訳、要約、リライト
• リアルなキャッチコピーと画像を⽣成
• 1クリックでプロトタイプを作成
• レイヤー名の⾃動変更
• テキストからデザインを⾃動⽣成 ※
https://www.figma.com/community/file/1375505114072192161/figma-ai-beta


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LE1KX58XJG.jpg)

Motiff
https://motiff.com/
•
•
AI 版 Figma ?
Figma の機能の90％を含みながら、定価は Figma の2割程度


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GEWDN5ZKJ2.jpg)

.NET Smart Components
https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/
•
AI 搭載 UI コンポーネントのセット
•
UX を再設計したり、機械学習や
プロンプトエンジニアリング調査、
開発に何週間も費やす必要なし
•
既存の.NET アプリ UI にドロップして
すばやく簡単に追加できる
•
ユーザーの⽣産性を⾼める、事前に
構築済みエンドツーエンド AI 機能
https://www.docswell.com/s/shosuz/ZM1MXG-2024-04-27-154837


# Page. 23

![Page Image](https://bcdn.docswell.com/page/47ZG3N1NE3.jpg)

Smart ComboBox
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md
• コンボボックスは、ユーザーが値を⼊⼒し、オートコンプリートのドロップダウンから事前定義された値を選択できる
UI ⼊⼒要素
• 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。
• スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する
ことにより、これをアップグレード
• これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利


# Page. 24

![Page Image](https://bcdn.docswell.com/page/YJ6YX8L97V.jpg)

Smart Paste
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md
• ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能
• Web アプリの既存のフォームに使⽤できる


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GJ5GX91DJ4.jpg)

Smart TextArea
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md
• 従来の TextArea を AI でアップグレードしたもの
• 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供


# Page. 26

![Page Image](https://bcdn.docswell.com/page/9E2YX29MER.jpg)

DevRel/Japan Conference 2024
https://devrel.tokyo/japan-2024/
https://devrel.tokyo/japan-2024/sessions/93e9c618-c375-4050-8bdd-17f4e5a5e06d/
• 場所 : DoCoMo R&amp;D OPEN LAB ODAIBA
• ⽇時 : 2024年9⽉14⽇ 10〜20時


# Page. 27

![Page Image](https://bcdn.docswell.com/page/D7YG8Y4P7M.jpg)

この続きは…XP 祭り 2024で︕(9/28 オンライン）
https://confengine.com/conferences/xp2024/proposal/20496/ai-web
最新 AI 駆動フロントエンド開発ツールを使って Web アプリ、ネイティブモバイルアプリを開発してみよう


# Page. 28

![Page Image](https://bcdn.docswell.com/page/VENGQPYMJ8.jpg)



# Page. 29

![Page Image](https://bcdn.docswell.com/page/Y79WD3PW73.jpg)

Appendix


# Page. 30

![Page Image](https://bcdn.docswell.com/page/G78N3MDRJD.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/L7LPV3M2JR.jpg)

OpenAI バックエンドの構成
•
•
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md
SmartComponents.Inference.OpenAI のパッケージをインストール
Program.cs で AddSmartComponents の呼び出しを次のように更新
builder.Services.AddSmartComponents()
.WithInferenceBackend&lt;OpenAIInferenceBackend&gt;();
•
API キーを構成するには appsettings.Development.json の最上位に次のようなブロックを追加
&quot;SmartComponents&quot;: {
&quot;ApiKey&quot;: &quot;your key here&quot;,
&quot;DeploymentName&quot;: &quot;gpt-3.5-turbo&quot;,
// Required for Azure OpenAI only. If you&#039;re using OpenAI, remove the following line.
&quot;Endpoint&quot;: &quot;https://YOUR_ACCOUNT.openai.azure.com/&quot;
}
•
Azure OpenAI の場合
•
•
•
•
Azure OpenAI Service をデプロイ
ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint に値を設定
OpenAI の場合
•
•
ApiKey、DeploymentName と使⽤するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint 構成の⾏は完全に削除


# Page. 32

![Page Image](https://bcdn.docswell.com/page/4EM4GDY9JW.jpg)

Blazor スマートコンポーネントの使⽤開始
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md
1. 新しい Blazor プロジェクト作成または既
存のプロジェクト (.NET 6 以降) を使⽤
3. SmartComponents をアプリケーション
に登録
dotnet new blazor
Program.cs
//Add services to container
builder.Services.AddSmartComponents();
2. SmartComponents.AspNetCore
パッケージインストール
dotnet add package --prerelease
SmartComponents.AspNetCore
WebAssembly プロジェクトがある場合
SmartComponents.AspNetCore.Components の
NuGet パッケージをインストール
4. OpenAI バックエンドを構成 (必要な場合)
5. ページにコンポーネントを追加
・ SmartPaste
・ SmartTextArea
・ SmartComboBox
注: スマート コンポーネントは、どのレンダリング モード (静的 SSR、サーバー、WebAssembly など) でも同様に機能するところ、ASP.NET Core サーバーが必要であるため、静的ファイル
サーバーでホストされている Blazor WebAssembly スタンドアロン アプリを使⽤することはできない。これは純粋に、API キーを安全に保持するサーバーが必要なため。


# Page. 33

![Page Image](https://bcdn.docswell.com/page/PERWZ499J9.jpg)

MVC / Razor Pages のスマート コンポーネントの使⽤開始
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md
1. 新しい ASP.NET Core Web アプリ プロ
ジェクトを作成するか、既存のプロジェクト
(.NET 6 以降) を使⽤
dotnet new mvc
または
dotnet new razor
2. SmartComponents.AspNetCore
パッケージインストール
dotnet add package --prerelease
SmartComponents.AspNetCore
WebAssembly プロジェクトがある場合
SmartComponents.AspNetCore.Components の
NuGet パッケージをインストール
3. SmartComponents をアプリケーション
に登録
1.Program.cs
//Add services to container
builder.Services.AddSmartComponents();
2. ViewImports.cshtml (Pages フォルダー内)
@addTagHelper *,
SmartComponents.AspNetCore
4. OpenAI バックエンドを構成 (必要な場合)
5. ページにコンポーネントを追加
・ SmartPaste
・ SmartTextArea
・ SmartComboBox


