はじめに
目的
開発環境をセットアップし、最初の .NET Multi-platform App UI (.NET MAUI) アプリをビルドします。
前提条件
ありません。
完了までの時間
10分 + ダウンロード/インストール時間
シナリオ
"Hello, World!"
メッセージを表示する、Windows または Android で実行されるモバイルおよびデスクトップ アプリ。
ダウンロードしてインストール
Visual Studio 2022 Preview をダウンロードしてインストールします。
Visual Studio 2022 Preview のダウンロード
インストール中に、.NET マルチプラットフォーム アプリの UI 開発ワークロードを選択する必要があります。上記のリンクを使用すると、次の画像に示されているように、すべての前提条件が正しく事前選択されるはずです。

Visual Studio でのツール サポートはまだプレビュー中のため、.NET MAUI は Visual Studio 2022 では使用できず、Visual Studio 2022 Preview のみでの使用となります。
Visual Studio 2022 Preview は既にインストールされていますか?
Visual Studio 2022 Preview を既にお持ちの場合は、インストールを更新して .NET MAUI サポートを追加できます。
Visual Studio 2022 Preview の更新
必要なワークロードを手動で追加するには、次のようにします。
- Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
- プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
- Visual Studio 2022 Preview の更新プログラムが利用可能な場合は、[更新] ボタンが表示されます。それを選択して、インストールを変更する前に更新します。
- Visual Studio 2022 Preview のインストールを見つけて、[変更] を選択します。
- [.NET マルチプラットフォーム アプリの UI 開発] を選択します。
- [変更] ボタンを選択します。
アプリを作成する
新しい.NET MAUI アプリの作成:
- Visual Studio 2022 Preview を開きます。
- [新しいプロジェクトの作成] を選択します。
- [プロジェクトの種類] ドロップダウンから [MAUI] を選択します。
-
.NET MAUI App テンプレートを選択し、[次へ] ボタンを選択します。

-
プロジェクト名として MyFirstMauiApp と入力し [作成] を選択します。

Visual Studio で新しいプロジェクトを作成します。ファイアウォールによって一部の機能がブロックされていることを警告する Windows セキュリティ アラートが表示される場合は、[アクセスを許可] ボタンを選択します。
NuGet パッケージの復元
NuGet は、新しいアプリの依存関係を取り込んだパッケージ マネージャーです。
パッケージの復元処理が自動的に開始されます。復元済み または 準備完了 のメッセージが画面左下のステータス バーに表示されるまでお待ちください。
![[準備完了] メッセージが表示されている Visual Studio のステータス バー。](/static/images/maui/nuget-status.png?v=BkhVq5gNmCvBrQwknQG0m1fOX7Q57jwFX4eUbEdkvWI)
アプリケーションを実行する
このチュートリアルでは、最初にローカル Windows コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。
開発用の Windows を設定する
Windows アプリケーションを開発するには、開発者モードを有効にして、Windows 11 または Windows 10 にアプリケーションをサイドロードする必要があります。
開発者モードを有効にする
- Windows で、[設定] アプリケーションに移動します。
- 開発者向け設定を探します。この設定は、Windows 11 では [プライバシーとセキュリティ] の [開発者向け]、Windows 10 では [更新とセキュリティ] にあります。
-
[開発者モード] のトグルをオンにします。

-
[開発者向け機能を使う] ダイアログが表示されます。開発者モードを有効にすることを確認するには、[はい] を選択します。
![[はい] ボタンが強調表示された開発者向け機能ウィンドウを使用する](/static/images/maui/confirm-developer-mode.png?v=5EnDgAHQ_y-ksvjz1CwqWqHtlMU8ipM26b1_aN90AYU)
Windows で実行
.NET MAUI アプリを実行して Windows に展開する準備が整いました。
ツール バーには、既定で Windows コンピューターがデバッグ ターゲットとして表示されます。

アプリを実行するには、メイン メニューから [デバッグ] > [デバッグの開始]を選択します (または、F5 を押します)。

おめでとうございます。初めての .NET MAUI アプリをビルドして実行しました。
コードを編集する
.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。
Visual Studio に戻り、アプリを実行したままにします。ソリューション エクスプローラー で、MyFirstMauiApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。
現在、最初の Label
の Text
は、次のコードに示されているように Hello, World!
と表示される設定になっています。:
MainPage.xaml
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" >
テキストを更新して、Hello, .NET MAUI!
と表示します。
MainPage.xaml
<Label
Text="Hello, .NET MAUI!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" >
変更すると、アプリの UI が自動的に更新されます。

.NET MAUI を使用してアプリケーションを開発している場合は、.NET ホット リロードを使用して C# コードを再読み込みすることもできます。アプリケーションのロジックを変更して、カウントを 1 ずつではなく 10 ずつ増やしてみましょう。
MainPage.xaml.cs
を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから [コードの表示] を選択することもできます)。

The OnCounterClicked
method on that file currently has the following code:
MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
count++;
を count += 10;
に更新して、10 ずつ増分するようにします。
MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
count += 10;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
コードの変更を適用するには、Visual Studio の [ホット リロード] ボタンを選択するか、[ALT+F10] を選択します。

[クリックしてください] ボタンを選択すると、10 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。
Android デバイスを構成する
開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Windows に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。
Android SDK のインストール
[デバッグ] ドロップダウン メニューで、[フレームワーク] の下の net6.0-android を選択します。

プロジェクトをビルドするには、Android SDK の特定のバージョンが必要です。Android SDK ライセンスに同意していない場合は、[エラー一覧] ウィンドウに次のエラー メッセージが表示されます。
![[エラー一覧] ウィンドウに、Android SDK ライセンスが同意されていないことを示すエラー メッセージが表示されます。](/static/images/maui/android-sdk-message.png?v=tR2KmoTuz1w2ObDfI4qc6ijZ3wFSezTtNaSjGEuOvnE)
メッセージをダブルクリックして、ライセンスへの同意プロセスを開始します。表示された各ライセンスに対して[同意する]をクリックすると、自動インストールが開始されます。

Android Emulator の設定
デプロイする Android デバイスがない場合は、Android Emulator を設定する方法があります。既に完了している場合は、この手順をスキップできます。
今回が初めて .NET MAUI アプリケーションを構築するという場合は、デバッグ メニューに "Android Emulator" が表示されます。クリックして作成プロセスを開始します。

これにより、ユーザー アカウント制御のプロンプトが表示されます。[はい] ボタンを選択すると、エミュレーターの作成処理が開始されます。[作成] ボタンを選択して、既定の設定でエミュレーターを作成します。

この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。ご覧頂き、、同意 を選択してプロセスを続行します。これでエミュレーター画像がダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。
エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。

Windows ハイパーバイザー プラットフォームを有効にするように求めるメッセージが表示されることがあります。ドキュメントにしたがって、高速化を有効にしてパフォーマンスを向上させてください (強くお勧めします)。

Android エミュレーターが起動します。起動が完全に完了するまで待つと、Visual Studio のデバッグ メニューに表示されます。これには時間がかかることがあります。

Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
Android デバイスの設定
Android デバイスを使用して開発するには、USB デバッグを有効にする必要があります。デバイスで以下の手順に従い、Visual Studio に接続します。Android デバイスをお持ちでない場合は、このセクションはスキップしても構いません。
開発者モードを有効にする
- [設定] 画面に移動します。
- 設定画面の上部にある検索を使用してビルド番号を検索するか、[携帯電話情報] で検索します。
- "開発者になりました!" と表示されるまで、ビルド番号 を 7 回から 10 回タップします。
- [作成] クリックします。

USB デバッグ状態の確認
- [設定] 画面に移動します。
- 設定画面の上部にある検索を使用して [USB デバッグ] を検索するか、[開発者向け] オプションで検索します。
- USB デバッグ が有効になっていない場合は、有効にします。

デバイスを信頼する
- デバイスをコンピューターに接続します。
- USB デバッグを許可するかどうか確認するメッセージが表示されます。
- このコンピューターで常に許可 であることを確認します。
- [許可] をクリックします。

デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。
問題はありませんか? ドキュメントを確認します。
これで、エミュレーターやデバイスが展開用に構成されているはずです。
Android で実行
デバイスまたはエミュレーターがデバッグ ターゲットとして選択されていることを確認します。

メニューから、[デバッグ] > [デバッグの開始]を選択します (またはF5 キーを押す)。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。
アプリケーションがビルドされ、選択された Android デバイスまたは Android Emulator に展開されて実行されます。

次の手順
おめでとうございます。初めての .NET MAUI アプリをビルドして実行しました。
学習を続ける
基本を習得したので、Microsoft Learn のセルフガイド学習パスを使用して .NET MAUI アプリをビルドする方法を引き続き学習します。
.NET MAUI ラーニング パス
.NET MAUI for Beginners
Let James walk you through building a full .NET MAUI app from start to finish:
あなたは下記にもご興味がおありかもしれません...