最新 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 h"ps://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.

Developer Advocate © 2024, Developer Advocate, LLC.