クロスフレームワーク アプリに関する考慮事項

React Native Windows、Electron、Flutter、または .NET MAUI から WinUI 3 にアクセスできます。 このページでは、特に WinUI 3 をターゲットにするときに想定される内容と、AI エージェントを成功に向けて設定する方法について説明します。

重要な決定事項: クロスプラットフォーム シェルを維持するか、Windowsファースト アプリを構築しますか? AI エージェントに明確な線引きを設けましょう。どのビジネス ロジックを共有のままにし、どの UI をネイティブな WinUI 3 として書き直すかを明確にします。

Windows 向け React Native

React Native for Windowsでは、内部で WinUI レンダリング レイヤーが使用されます。 ネイティブ Windows コントロールは、<WindowsXamlView> または NativeModules を使用して統合できます。

完全にネイティブなWindowsエクスペリエンスを実現するために、WinUI 3 に直接移植すると、パフォーマンスが向上し、完全なWindows API アクセスが得られます。 ビジネス ロジックとサービスは維持しますが、UI コンポーネントは XAML および C# として書き換える。

スタート プロンプト:

I have a React Native for Windows component. Rewrite it as a WinUI 3 UserControl using C# and XAML.

電子

Electron アプリは、シェルにラップされた Web テクノロジです。WinUI 3 はネイティブ Win32 です。 実用的な増分パスは、WebView2 を使用して WinUI 3 ウィンドウで既存の Web UI をホストし、時間の経過と同時に機能をネイティブ コントロールに移行することです。

スタート プロンプト:

I have an Electron app. Create a WinUI 3 shell that hosts a WebView2, and show me how to call native Windows APIs from the web layer using window.chrome.webview.postMessage.

.NET MAUI

.NET MAUIは既に WinUI 3 を介してWindowsをターゲットにしています。 WinUI 3 の機能にフル アクセスできるWindows専用エクスペリエンスが必要な場合は、MAUI を削除し、WinUI 3 を直接ターゲットにしてください。

  • ViewModel とサービスはスムーズに移行できる
  • MAUI XAML (Microsoft.Maui.Controls.*) は WinUI 3 XAML に書き換える必要があります (Microsoft.UI.Xaml.*)
  • 共有.NETクラス ライブラリを as-is 保持する

スタート プロンプト:

I have a .NET MAUI ViewModel and service layer. Reuse them in a WinUI 3 project targeting Windows only. Keep the ViewModel unchanged and update only the View.

フラッター

Windowsの Flutter は、WinUI 3 ではなく、独自のレンダリング エンジンを使用します。 プラットフォーム チャネルを使用すると、Flutter はネイティブ Win32 または WinRT API を呼び出すことができますが、フル ポートは Flutter レンダリングをネイティブ XAML に置き換えます。

スタート プロンプト:

I have a Flutter screen with a list and a detail view. Rewrite it as a WinUI 3 page using NavigationView and a master/detail layout.

プラットフォーム間でコードを共有する

  • ビジネス ロジックを別の.NET クラス ライブラリに保持します。プラットフォームに依存しません
  • WinUI 3、MAUI、Blazor、またはその他の.NETターゲット間でそのライブラリを共有する
  • UI を書き換える前にモデル、サービス、および ViewModel を再利用する
  • 条件付きコンパイル #if WINDOWS 最後の手段としてのみ使用する

関連するコンテンツ

  • Last updated on