最新 AI 駆動フロントエンド開発ツールを使って Web アプリ、ネイティブモバイルアプリを開発してみよう

2.4K Views

September 28, 24

スライド概要

https://confengine.com/conferences/xp2024/proposal/20496/ai-web
このセッションでは、Uizard、Figma、Locofi.ai、VS Code、GitHub Copilot 等の最新の AI 駆動フロントエンド開発ツール他の連携によりデザインから React Native / Typescript のソースコードを生成し、API のバックエンドと連携する方法をご紹介します。これらのツールを使うことにより、コンセプト策定、ユーザーの要件を汲み取りながら、デザイン、API バックエンドの開発、そしてフロントエンドの開発、トータル1−2日でプロトタイプを作成することも可能です。Uizard、Figma、Locofi.ai、VS Code、GitHub Copilot/Copilot Chat などのツール(およびその他のツール)について、それぞれの機能をご紹介しながらツールのデモや、サンプルのモバイルネイティブアプリのデモを交えて、ご紹介していきます。

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が使えない場合

関連スライド

各ページのテキスト
1.

最新 AI 駆動フロントエンド 開発ツールを使って Web アプリ、ネイティブモバイル アプリを開発してみよう 鈴木章太郎 合同会社デベロッパーアドボケイト CEO & Chief Advocate Developer Advocate ©︎ 2024, Developer Advocate, LLC.

2.

鈴木 章太郎 X (Twitter) : @shosuz Microsoft で13年間、テクニカルエバンジェリストとして活動し、 .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動を実施。 その後、Dell、Accenture、Elastic 等 での開発者向け技術 啓発活動等を経て、Broadcom (旧 VMware) にてプリンシパル エンタープライズアーキテクト。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等 を中心に、開発者向け最新技術啓発活動を実施。 2019年4月〜2021年8月、内閣官房 IT 総合戦略室 政府 CIO 補佐官、2021年9月〜2024年3月、 デジタル庁 プロジェクト マネージャーユニット ソリューションアーキテクトを兼務。 2022年、企業向けに技術顧問・エバンジェリスト業務、クラウド/AI 等の開発技術トレーニング、技術マーケティング支援・エバンジェリスト 養成などを行う合同会社デベロッパーアドボケイトを設立、現在までに 数社の技術顧問業務や、トレーニング等を実施。 https://www.docswell.com/user/shosuz Developer Advocate ©︎ 2024, Developer Advocate, LLC.

3.

アジェンダ ▪ コンセプト作り・企画 ▪ AI 駆動開発ツールのご紹介と位置付け ▪ Uizard ご紹介 ▪ Figma ご紹介 ▪ Locofy.ai ご紹介 ▪ GitHub Copilot/Copilot Chat ご紹介 ▪ 実際に開発したアプリ ▪ まとめ Developer Advocate ©︎ 2024, Developer Advocate, LLC.

4.

どのようにフロントエンドの開発を一人で進め、 プロトタイプを素早く作るかにフォーカス

5.

コンセプト作り・企画

6.

統合エンターテインメントアプリのコンセプトを作る App Store、Google Play 等で iPad、iPhone、Android 用のアプリを研究する ファンとの絆を深めるデジタル体験 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

7.

統合エンターテインメント アプリを企画する • • • • メイン画面 コミュニティ イベント 賭け事 • • 検索画面 AI アシスト ベッティング結果 推奨コンテンツ • ビデオ再生 ファンとの絆を深めるデジタル体験 ファンとの絆を深める ファンのコミュニティ 選手とファンはチャットルームなどでつながることができる 好きな競馬場(競馬場、競艇場、競輪場、オートレース場) • • • • トップページ • • • 登録画面 • パーソナライズ Developer Advocate ©︎ 2024, Developer Advocate, LLC.

8.

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

9.

AI 駆動開発ツールのご紹介と位置付け

10.

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

11.

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

12.

Motiff https://motiff.com/ • AI 版 Figma ? • Figma の機能の90%を含みながら、定価は Figma の2割程度 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

13.

.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 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

14.

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

15.

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

16.

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

17.
[beta]
OpenAI バックエンドの構成
https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure -openai-backend.md

•
•

SmartComponents.Inference.OpenAI のパッケージをインストール
Program.cs で AddSmartComponents の呼び出しを次のように更新
builder.Services.AddSmartComponents()
.WithInferenceBackend<OpenAIInferenceBackend>();

•

API キーを構成するには appsettings.Development.json の最上位に次のようなブロックを追加
"SmartComponents": {
"ApiKey": "your key here",
"DeploymentName": "gpt-3.5-turbo",
// Required for Azure OpenAI only. If you're using OpenAI, remove the following line.
"Endpoint": "https://YOUR_ACCOUNT.openai.azure.com/"
}

•

Azure OpenAI の場合
•
•
•

•

Azure OpenAI Service をデプロイ
ApiKey、DeploymentName と使用するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint に値を設定

OpenAI の場合
•
•

ApiKey、DeploymentName と使用するモデル (例、gpt-3.5-turbo、gpt-4など) に値を設定
Endpoint 構成の行は完全に削除

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

18.

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 キーを安全に保持するサーバーが必要なため。 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

19.

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 パッケージをインストール Developer Advocate ©︎ 2024, Developer Advocate, LLC. 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

20.

Uizard ご紹介

21.

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 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

22.

Uizard でプロトタイピングしイメージをエクスポートする https://uizard.io/ • Magic(テキストプロンプトによる ⾃動生成) • 実画面イメージの取り込み • 手書き画面イメージの取り込み • その他の方法により画面遷移等 設定可能(ムービーなど) • SVG 等で画面毎にエクスポート Developer Advocate ©︎ 2024, Developer Advocate, LLC.

23.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

24.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

25.

ネイティブモバイルアプリのモックを実装する Uizard で Magic のプロンプトを工夫して試行錯誤し SVG の画像をエクスポートする Developer Advocate ©︎ 2024, Developer Advocate, LLC.

26.

Figma ご紹介

27.

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

28.

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クリックでプロトタイプを作成 レイヤー名の⾃動変更 テキストからデザインを⾃動生成 ※ ©︎ 2024, Developer Advocate, LLC. https://www.figma.com/community/file/1375505114072192161/figma-ai-beta Developer Advocate

29.

Locofy.ai ご紹介

30.

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

31.

Web とアプリの開発需要は大きく成長 需要が人材の供給を 大きく上回っている

32.

問題:世界的な開発者不足 600k+ 75k ソフトウェアエンジニア リング職 コンピューターサイエンス の新卒者 ソフトウェアエンジニアの 求人の70% は非技術系企業にいる 150万人以上 5倍速い ソフトウェアエンジニアの不足 技術部門が提供できるものよりも $22k+ 収入減 より挑戦的に これまで以上に!

33.

業界はいくつかの成長課題に直面している 顧客は開発をより早く、より安く行う ことを望んでいる 多額の投資をしているが、製品体験は せいぜい平均的なもの エンジニアの雇用にはコストがかかる ピクセルパーフェクトなコードを書く 優秀なエンジニアが見つからない デザイナーとエンジニアの間で多くの 時間が浪費されている

34.

理想的な状況 デザインからピクセルパーフェクトなコード を即座に生成し、デザインを開発者が使いやすい コードに変換するプロセスで行われる手作業を最大 80%⾃動化し、時間を5倍速く✚、お金を10倍 安く 節約しながら収益とコード品質を向上させる ことができるとしたらどうでしょう? とても理想的な状況でしょう?

35.

Locofy はこの問題を解決する Locofy の焦点はただ一つ、これだけ どんなデザインツールからでもピクセル パーフェクトな製品フロントエンドコードに変換 私たちは世界クラスのフロントエンド エクスペリエンスを猛スピードで構築 することに注⼒

36.

具体的な方法とは LLM はデザインファイルを効果的に理解することができない テキスト、オーディオ、ビデオ、画像については訓練を受けて いる デザインを理解させる必要があった 5億の設計パラメータで訓練された独⾃の基礎的な 大規模設計モデルを構築 この独自のファウンデーションモデルは、デザインを⾃動的 にコードに変換する Locofy.ai にパワーを供給する 業界では類を見ないもの ※ これについてのホワイトペーパーはこちら

37.

すでに Locofy を採用している企業一覧

38.

コードの品質と機能で他社を圧倒 ゼロからアプリを作る インタラクティブで意味的に正しい html レスポンシブ・コード コンポーネントとプロップを⾃動検出 設計からコンポーネント・ライブラリを構築する 公開されている UI ライブラリ(Material、Bootstrap、Ant 等) を使用 1クリックで⾼品質コードに変換 より大きなチームで既存アプリを反復・追加する スタンドアロン・スクリーンとコンポーネントの構築 カスタムコンポーネントの⾃動接続と再利用 マルチプレイヤー・コラボレーション

39.

コードの品質と機能で他社を圧倒 プラットフォーム 機能豊富なプラグイン ほとんどのデザインツールやコーディングフレームワークと統合可能 デザインの反復をサポート GitHub 継続的インテグレーション 共有可能なレスポンシブ公開ライブ - プレビュー オンプレミス展開 AIとコードの品質 独⾃の AI モデル(1クリックでデザインからコーディングまで可能) AI ヒューリスティック診断ツール コードクオリティ

40.

Locofy.ai プラグイン for Figma Locofy.ai Figma プラグインを使ってソースコードを生成できる(ここから Locofy.ai Studio を起動) Developer Advocate ©︎ 2024, Developer Advocate, LLC.

41.

Locofy.ai Builder - 1 Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを生成 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

42.

Locofy.ai Builder - 2 Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを生成 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

43.

Visual Studio Code で生成された Project を開く Uizard、Figma、VSCode、Locofi.ai の連携により React Native / Typescript のソースコードを生成 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

44.

GitHub Copilot/Copilot Chat ご紹介

45.

GitHub Copilot / Copilot Chat 2024年9月時点での最新版 • Visual Studio Code 1.93.1 • GitHub Copilot v1.234.0 • GitHub Copilot Chat v0.20.3 • Billing 有効、GPT-4以降 有効 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

46.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

47.

画面遷移やAPI呼び出しのロジックを追加する Developer Advocate ©︎ 2024, Developer Advocate, LLC.

48.

細かい CSS の修正やリソースの重複エラーについて 共通部品を活かして修正を最小限に抑える • 基本は GitHub Copilot の /explain で修正 • 一気にエラーを減らす • 下記に注目: • GlobalStyles.tsx • assets • assets/fonts Developer Advocate ©︎ 2024, Developer Advocate, LLC.

49.

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

50.

Web API 部分は Flask、フロントエンド側は React Native で開発 使用した主な VS Code 拡張機能 • GitHub Copilot / Copilot Chat • Postman for VS Code Developer Advocate ©︎ 2024, Developer Advocate, LLC.

51.

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 コンソールでのトラブル シューティング Developer Advocate ©︎ 2024, Developer Advocate, LLC.

52.

Flask で構築されたユーザー認証、イベント検索、AI リコメンド機能 Developer Advocate ©︎ 2024, Developer Advocate, LLC.

53.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

54.

Thank you for your attention! Developer Advocate ©︎ 2024, Developer Advocate, LLC.