Windows 用の初めての .NET MAUI アプリをビルドする

[アーティクル]
01/30/2025

Windows で初めてのクロスプラットフォームアプリを構築することで、.NET MAUI を活用できます。

紹介

このチュートリアルでは、Visual Studio 2022 (17.3 以降) で Windows 用の最初の .NET MAUI アプリを作成して実行する方法について説明します。 .NET Community Toolkit からいくつかの MVVM Toolkit 機能を追加して、既定のプロジェクトの設計を改善します。

環境の設定

.NET MAUI 開発用に環境をまだ設定していない場合は、「Windowsで .NET MAUI の使用を開始する」手順に従ってください。

.NET MAUI プロジェクトの作成

Visual Studio を起動し、スタートウィンドウで [新しいプロジェクトの作成] をクリックして新しいプロジェクトを作成します。
[新しいプロジェクト の作成] ウィンドウで、ドロップダウンから[すべてのプロジェクトの種類]を選択し、[MAUI]を選び、.NET MAUI App テンプレートを選択して、[次へ ] ボタンをクリックする。

.NET MAUI アプリテンプレート
[新しいプロジェクトの構成] ウィンドウで、プロジェクトに名前を付け、その場所を選択して、[次へ ] ボタンをクリックします。
[追加情報] ウィンドウで、[作成] ボタンをクリックします。
プロジェクトが作成され、その依存関係が復元されるまで待ちます。
Visual Studio ツールバーで、Windows マシンボタンを押してアプリをビルドして実行します。
稼働中のアプリで、Click meボタンを数回押し、ボタンのクリック回数が増えることを確認します。

Windows で初めての .NET MAUI アプリを実行しました。次のセクションでは、MVVM Toolkit からアプリにデータバインディングとメッセージング機能を追加する方法について説明します。

トラブルシューティング

アプリのコンパイルに失敗した場合は、既知の問題のトラブルシューティングを確認してください。問題の解決策が得られる可能性があります。

MVVM ツールキットの追加

Windows で初めての .NET MAUI アプリを実行したので、MVVM Toolkit の機能をいくつかプロジェクトに追加して、アプリの設計を改善しましょう。

ソリューションエクスプローラーでプロジェクト右クリックし、コンテキストメニューから [NuGet パッケージの管理]... を選択します。
NuGet パッケージマネージャー ウィンドウで、[参照] タブを選択し、CommunityToolkit.MVVMを検索します。
[インストール] をクリックして、CommunityToolkit.MVVM パッケージ (バージョン 8.0.0 以降) の最新で安定したバージョンをプロジェクトに追加します。
新しいパッケージのインストールが完了したら、NuGet パッケージマネージャーの ウィンドウを閉じます。
プロジェクトをもう一度右クリックし、コンテキストメニューから [追加] | [クラス] を選択します。
[新しい項目の追加] ウィンドウが表示されたら、クラスにMainViewModelを命名し、追加をクリックします。
MainViewModel クラスは、MainPageのデータバインディングターゲットになります。 CommunityToolkit.Mvvm.ComponentModel 名前空間の ObservableObject から継承するように更新します。また、public および partialされるようにクラスを更新する必要があります。
MainViewModel クラスには、次のコードが含まれます。 CountChangedMessage レコードは、[Click me] ボタンがクリックされるたびに送信されるメッセージを定義し、ビューに変更を通知します。 ObservableProperty および RelayCommand 属性は、message および IncrementCounter メンバーに追加されるソースジェネレーターであり、MVVM Toolkit によって提供され、INotifyPropertyChanged および IRelayCommand 実装用の MVVM 定型コードを作成します。 IncrementCounter メソッドの実装には、MainPage.xaml.csの OnCounterClicked からのロジックと、新しいカウンターメッセージを含むメッセージを送信するための変更が含まれています。コードビハインドコードは後で削除されます。
```
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            // Pluralize the message if the count is greater than 1
            message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}
```
手記

前のコードの名前空間を、プロジェクト内の名前空間と一致するように更新する必要があります。
編集用の MainPage.xaml.cs ファイルを開き、OnCounterClicked メソッドと count フィールドを削除します。
InitializeComponent()の呼び出しの後に、MainPage コンストラクターに次のコードを追加します。このコードは、MainViewModel の IncrementCounter() によって送信されたメッセージを受信し、CounterBtn.Text プロパティを新しいメッセージで更新し、SemanticScreenReaderで新しいテキストを読み上げるようになります。
```
WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});
```
クラスに using ステートメントを追加する必要もあります。
```
using CommunityToolkit.Mvvm.Messaging;
```
MainPage.xamlで、ContentPage に名前空間宣言を追加して、MainViewModel クラスを見つけることができます。
```
xmlns:local="clr-namespace:MauiOnWindows"
```

ContentPageの BindingContext として MainViewModel を追加します。

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

Clicked イベントを処理する代わりに Command を使用するように、MainPage の Button を更新します。このコマンドは、MVVM Toolkit のソースジェネレーターによって生成される IncrementCounterCommand パブリックプロパティにバインドされます。
```
<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />
```
プロジェクトをもう一度実行し、ボタンをクリックしてもカウンターがインクリメントされることを確認します。
プロジェクト実行中に、最初のラベルの「Hello, World!」メッセージを更新して、MainPage.xaml で「Hello, Windows!」を読み取ります。ファイルを保存すると、アプリ実行中でも XAML ホットリロードによりUIが更新されることに注目してください。

次の手順

.NET MAUI for Windows チュートリアルで Graph SDK を利用して、ユーザー Microsoft Graph データを表示するアプリを構築する方法について説明します。

.NET MAUI を学習するためのリソース

Windows での Microsoft Graph API と .NET MAUI の使用

次の方法で共有

Windows 用の初めての .NET MAUI アプリをビルドする

紹介

環境の設定

.NET MAUI プロジェクトの作成

トラブルシューティング

MVVM ツールキットの追加

次の手順

その他のリソース

次の方法で共有

Windows 用の初めての .NET MAUI アプリをビルドする

紹介

環境の設定

.NET MAUI プロジェクトの作成

トラブルシューティング

MVVM ツールキットの追加

次の手順

関連コンテンツ

その他のリソース