大変ご無沙汰しています。放浪軍師です。家事育児に追われる生活もだいぶ慣れてきた今日この頃ですが、みなさんは如何お過ごしでしょうか？気が付けば前回の更新から早3か月という、時が経つのは早いものですね。おそろしや…

さて、先日 Xamarin.forms の後継である .NET MAUI が正式リリースとなりました。最近は Xamarin どころか C# にも触れていない身ではあるのですが、このブログが始まったのも、そして自分の技術力がない事に気が付いて転職したのも、すべて Xamarin が発端なので愛着というかそういうものがありますので、その後継である .NET MAUI にはやっぱ触れておかないとなという思いがあります。さぁはりきっていこー！

.NET MAUI とは

docs.microsoft.com

正確な情報は上記公式記事を確認してもらうとして、要約すると .NET 6 の Xamarin.forms です。・・・というのは流石にざっくり過ぎるし、そもそも Xamarin.forms とは何ぞやって人のためにもうちょっと詳しく掘り下げると、.NET MAUI は C# + XAML で iOS Android macOS windows で動作するネイティブアプリケーションを作成できるフレームワーク。つまりクロスプラットフォーム開発を可能にするものです。通常、それぞれの OS 向けに開発するとなると以下のような感じになります。

OS	言語	開発環境
iOS	Swift	XCode
Android	Kotlin	Android Studio
MacOS	Swift	XCode
Windows	C# + Xaml	Visual Studio

昨今だと iOS と Android で同じ機能を持ったアプリケーションをリリースしたいなんて事は良くある話だと思うのですが、そうするとわざわざ開発環境も言語も別の環境で同じアプリケーションを開発保守せねばならず大変な労力とコストがかかります。しかぁし！クロスプラットフォーム開発が可能な .NET MAUI を使うとあら不思議。

OS	言語	開発環境
iOS	C# + Xaml	Visual Studio
Android	C# + Xaml	Visual Studio
MacOS	C# + Xaml	Visual Studio
Windows	C# + Xaml	Visual Studio

なんと全部同じ言語と同じ開発環境で作れてしまうのです！さらに言えば一つのプロジェクトでそれぞれの環境向けにビルドができてしまう。1粒で4度美味しいアーモンドグ〇コも裸足で逃げ出す素晴らしさですよ。これはもう覚えるっきゃないね！！！

とは言え、現実とは厳しいもので実際にはそれぞれの環境向けにコーディングしなければならない部分もやっぱり出てきます。それでも Xamarin 時代は大体7割ぐらいは共通化できたと言われていますし、それぞれの環境向けのコードも C# だけで書くことができますのでやっぱり素晴らしいと思います。

Xamarin.Forms と .NET MAUI の違いを比べてみよう

さて、早速 Xamarin.Forms と .NET MAUI がどう違うのか比べるために MAUI のインストールをやっていきましょう。

Visual Studio 2022 Preview のインストール

.NET MAUI は 2022年5月23日に正式リリースとなったのですが、残念ながら肝心の Visual Studio 2022 がまだ対応していません。そのため、 Preview 版の Visual Studio 2022 を使用する必要があります。Preview 版は以下からインストールできます。

visualstudio.microsoft.com

ワークロードのインストール

インストーラーが起動したら、ワークロードから .NET マルチプラットフォームアプリの UI 開発 を選択してインストールを開始します。私の環境では何故かめちゃ時間がかかりました。コーヒーでも飲みながらのんびり待ちましょう。

プロジェクトの作成

インストールが完了したら早速プロジェクトを作成してみます。新しいプロジェクト作成画面に進んで maui で検索をかけると、いくつか検索に引っかかるので、その中から .NET MAUI アプリ を選択します。プロジェクト名などはまぁお好みで。

ソリューションエクスプローラーで見比べる

さて Xamarin.Forms と .NET MAUI で作成したプロジェクトをソリューションエクスプローラーで見比べてみましょう。左が Xamarin.Forms 右が MAUI です。

なんと Xamarin.Forms では共通部と各種 OS でプロジェクトが分かれて作成されていたのに対して、.NET MAUI では一つのプロジェクトに統一されています。すっきりしててとっても良いですね！ .NET MAUI の方には Platforms というフォルダ内に各種 OS に対応したフォルダが生成されているので、おそらく個別のコードなんかはこっちに書くのでしょう。

Xaml を見てみる

次は MAUI の MainPage.xaml を見てみます。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
             
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />
                
            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
            
            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button 
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

基本的に Xamarin.Forms の Xaml と変わらない感じなのですが、 SemanticProperties.Description とか SemanticProperties.HeadingLevel とかよくわからない奴もありますね。以下にドキュメントがありましたが、なんか分かったような分からないような…まぁそんな感じです。そのうち理解する。

docs.microsoft.com

あと気になったのが、<Image Source="dotnet_bot.png" /> の部分。調べてみると、この dotnet_bot.png という画像ファイルは Resources/Images/dotnet_bot.svg を自動変換したものだそうです。詳しくは以下の記事に。

docs.microsoft.com

まぁそれは良いのですが私が気になったのはそこではなく、画像をこの1か所にだけ配置すればよいという点に注目しました。というのも、Xamarin.Forms の標準機能では各プラットフォーム別に画像を用意して、それぞれのプロジェクトに配置する必要があったのです。それが MAUI だと、ここに配置するだけで各プラットフォームに適した画像に自動変換してくれるとの事。早速Resources/Images/に png 画像を配置してみました。

うん、これは便利だ素晴らしい！

DIコンテナ

.NET MAUI には Xamarin.Forms には無かった DI コンテナが標準で装備されていて、MauiProgram.cs にて DI コンテナにクラスやインターフェースを登録できます。MVVM には欠かせないこの要素が標準で加わったのは有難いですね。

namespace MauiApp1;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        
        //こんな感じでコンテナに登録する。詳細は次回説明！
        builder.Services.AddTransient<FirstPage>();
        builder.Services.AddTransient<FirstPageViewModel>();
        builder.Services.AddTransient<SecondPage>();
        builder.Services.AddTransient<SecondPageViewModel>();
        builder.Services.AddTransient<Person>();
        builder.Services.AddTransient<SecondPageViewModel>();
        builder.Services.AddSingleton<INavigationService, NavigationService>();
        //

        return builder.Build();
    }
}