.NET MAUI Acceleratorで加速のすすめ

はじめに

.NET MAUIを新規作成した時、デフォルトのテンプレートだとMVVMアーキテクチャ用のフォルダ構成に対応しておらずめんどくさいと思ったことはありませんか？
その時、VisualStudioの.NET MAUI Acceleratorという拡張機能を使うと自動でMVVMにのっとったフォルダ構成のテンプレートが作成されます。
また、MVVMToolKitがすでにNuGetされた状態でスタートするため、サンプルコードもMVVMToolKitを使用した形に置き換えられているためかなり便利です。
それでは、.NET MAUI Acceleratorの導入手順と実際にサンプルアプリをデバッグするところまで紹介します。

導入手順

1.拡張機能のインストール

Visual Studioを開き「拡張機能」→「拡張機能の管理」でダイアログを開き、右上の検索窓で「.NET MAUI Accelerator」と検索し、表示された「MAUI　App Accelerator」をインストールします。

2.テンプレートとしてMAUI App Acceleratorで起動

再起動をして、新規作成を行います。この時テンプレートは先ほどインストールした「MAUI App Accelerator」を選択します。

3.テンプレートを指定

ダイアログに従って今回作成するテンプレートの内容を決めましょう。

1..NETのバージョンを指定
.NET6 または、.NET7のどちらかで開発をするのか決めましょう。今回は.NET7で開発します。

2.スタイルを指定
コーディングのスタイルを決めます。
MVVMToolKitを使う場合、コードビハインドで開発する場合、C#のみのマークアップで開発する場合のそれぞれが選べます。
今回は本題の通り、MVVMのフォルダ構成になっていてほしいのでMVVMToolKitを選択しました。

3.ナビゲーションスタイルを指定
ナビゲーションの仕様をどうするかを選択します。
シェルを使ったフライアウトメニュー、またはタブ、もしくは何もナビゲーション画面を持たない空白モデルから選択します。
今回はフライアウトメニューのものにしました。

4.ページの追加
フライアウトメニューなど複数のページを使用するアプリの場合、メインページの他にデフォルトで作られたページを追加できます。
空白のページの「Blank」、リストとそれに対するディティールをナビゲーションしてくれる「ListDetail」、お絵かき機能がついている「Drawing」、ウェブビューがある「WebView」、今までのサンプルアプリと同様のページの「Smaple」、「Localization Example」はよくわかりませんでした。

青枠で囲っているところではページの名前を変更したり、ドラッグ＆ドロップで並び替えを行い、メニューの順番を変えたりできます。

5.ライブラリの追加
.NET MAUIの開発者はよく使っているであろう「MAUICommunityToolkit」や「xUnit」を追加することができます。

緑の部分にマウスオーバーすると削除ボタンが出てきて削除できます。
青の部分では今回作成するテンプレートのライセンスが表記されます。

6.クリエイトボタンを押す
全て入力が完了したらクリエイトボタンを押してサンプルアプリを作成します。

結果

デフォルトのサンプルアプリのフォルダ構成がちゃんとMVVMの仕様になっているのが確認できます。
ViewとViewModelには追加したページが入っています。
また、xUnitのプロジェクトも確認できました。

MVVMToolKitで作成したので、ちゃんとMVVMToolKitにのっとった形で記述されています。

public partial class SampleViewModel : BaseViewModel
{
    int count = 0;

    [ObservableProperty]
    public string message = "Click me";

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

        if (count == 1)
            Message = $"Clicked {count} time";
        else
            Message = $"Clicked {count} times";

        SemanticScreenReader.Announce(Message);
    }
}

Program.csファイルにはすべてのページでDependency Injectionの処理が書かれています。（これは楽ですね）

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.UseMauiCommunityToolkit()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

        builder.Services.AddSingleton<MainViewModel>();

        builder.Services.AddSingleton<MainPage>();

		builder.Services.AddTransient<SampleDataService>();
		builder.Services.AddTransient<ListDetailDetailViewModel>();
		builder.Services.AddTransient<ListDetailDetailPage>();

        builder.Services.AddSingleton<ListDetailViewModel>();

        builder.Services.AddSingleton<ListDetailPage>();

        builder.Services.AddSingleton<SampleViewModel>();

        builder.Services.AddSingleton<SamplePage>();

        builder.Services.AddSingleton<LocalizationViewModel>();

        builder.Services.AddSingleton<LocalizationPage>();

        builder.Services.AddSingleton<DrawingViewModel>();

        builder.Services.AddSingleton<DrawingPage>();

		return builder.Build();
	}
}

デバッグしたサンプルアプリはこんな感じでした。

さいごに

ただの拡張機能、ただのテンプレートだと思っていましたが、試しに使ってみたところかなり至れり尽くせりで感動しています。
これで.NET MAUIの開発を加速していけますね。