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

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

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

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

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

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

コンセプト作り・企画

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

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

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

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

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

• https://v0.dev/

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

• https://github.com/gpt-engineer-org/gpt-engineer

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

• https://motiff.com/

.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.

• https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/
• https://www.docswell.com/s/shosuz/ZM1MXG-2024-04-27-154837

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

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

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

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

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

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

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.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/configure-openai-backend.md

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.

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-blazor.md

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

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/getting-started-mvc-razor-pages.md

Uizard ご紹介

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.

• https://uizard.io/

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

• https://uizard.io/

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

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

Figma ご紹介

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.

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

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

• https://www.figma.com/community/file/1375505114072192161/figma-ai-beta
• https://atmarkit.itmedia.co.jp/ait/articles/2407/17/news067.html
• https://webtan.impress.co.jp/e/2024/07/29/47425

Locofy.ai ご紹介

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

• https://www.locofy.ai/

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

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

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

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

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

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

• https://static.locofy.ai/Locofy.ai Large Design Models Whitepaper.pdf

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

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

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

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

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

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

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

GitHub Copilot/Copilot Chat ご紹介

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.

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

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

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

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

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

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.

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

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

Developer Advocate ©︎ 2024, Developer Advocate, LLC.

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