はじめに

初めまして。
価格.comサービスシステム部の大呂と申します。
普段は価格.comの自動車・バイクカテゴリの開発に従事しています。

自分は最近、こんなことを考えていました。

業務で使用しているC#の技術力を向上させたい
業務で経験したことのないモバイルアプリ開発をやってみたい

そこで、色々調べてみたところ、.NET MAUIというフレームワークがあることを知りました。
これが自分のやりたいことに合致していたので、最近はプライベートの時間に.NET MAUIで遊んでいます。

この記事では、.NET MAUIについて簡単に紹介したいと思います。

.NET MAUIとは？

公式サイトで簡潔に説明されています。

.NET Multi-Platform App UI (.NET MAUI) は、C# と XAML を使用して、ネイティブのモバイルアプリやデスクトップアプリを作成するためのクロスプラットフォームフレームワークです。
.NET MAUI を使用すると、1 つの共有コードベースから Android、iOS、macOS、Windows で実行できるアプリを開発できます。

つまり、.NET MAUIは、C#/XAMLを使ったクロスプラットフォームフレームワークということになります。
Microsoft Build 2020で発表され、2022年5月23日に正式リリースされました。

元々、Xamarin.Formsというフレームワークがあったのですが、その問題点や面倒だった点を改善した後継版という位置づけになります。

クロスプラットフォーム フレームワークの比較

複数のプラットフォームに対応するフレームワークとして、有名なものにFlutterが挙げられると思います。
Flutterと比べて.NET MAUIにはどのような特徴があるのでしょうか？

	Flutter	.NET MAUI
開発会社	Google	Microsoft
言語	Dart	C#
プラットフォーム	iOS, Android, Web, Windows, Mac, Linux	iOS, Android, Windows, Mac
UI	独自UI	ネイティブUI
GitHub スター数	157k	20k
オープンソース	〇	〇
開発環境	Visual Studio Code, Android Studio, IntelliJ	Visual Studio, Visual Studio Code（*プレビュー段階）
ホットリロード	〇	〇

大きな違いとしては、以下の2点になりそうです。

FlutterはWebアプリケーションとLinuxアプリケーションを作成できる
.NET MAUIではC#を利用できる＝.NET開発者にとって学習コストが低い

元々.NETで開発していて、その資産を活用したいのであれば.NET MAUIを選ぶ方が良さそうです。
一方で、情報量の多さを重視する場合や、LinuxアプリケーションやWebアプリケーションも単一のコードからビルドしたい場合は、Flutterを選ぶ方が良さそうです。

.NET MAUIでのUIの作り方

XAML

各プラットフォームで統一されたUIを記述する方法として、.NET MAUIでは基本的にXAMLを使用します。
XAMLとは、XMLをもとにした宣言型マークアップ言語です。
より詳しく知りたい方は、こちらの記事が参考になると思います。

例えば、ボタンを表示したい場合は、以下のように記述します。

<Button Text="Click me"
        Clicked="OnCounterClicked"
        HorizontalOptions="Center" />

上記の記述によって、以下のようなボタンが生成されます。

ラベルに「Click me」と記載されている
押下するとOnCounterClicked()メソッドが実行される
水平方向中央にボタンを配置する

さらに、要素同士を並列に並べたり、親要素で囲んで入れ子にすることで、全体のレイアウトを構成していきます。
以下のXAMLは、Microsoft公式の学習サイトで記載されている例となります。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

VerticalStackLayoutは、子要素を垂直方向に整列する要素です。
ScrollViewは、スクロール可能な画面を表示する要素です。

ここまでで作成したレイアウトをビルドすると、以下のようになります。

上記は、Mac用にビルドした結果です。

上記は、Android用にビルドした結果です。

自分が使用したMacはダークモードになっているので、若干見た目に違いはありますが、現在のカウント数→「Click me」と書いてあるボタンというレイアウト自体は統一されたものになっています。

このように、XAMLで要素を宣言し、細かい設定を属性に付与するというのが、.NET MAUIでのレイアウト作成の基本となります。

C#

また、C#だけを用いた記述もできます。
以下のコードは、上記と同等のレイアウトをC#のみで表現したものとなります。

public partial class TestPage : ContentPage
{
    int count = 0;
    
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

どちらでデザインをするのが良いか

デザインと動作の分離を徹底しようとすると、原則としてはXAMLで静的にUIを宣言しつつ、必要な場合はC#動的にUIを生成する、という方針が良さそうです。
一方で、XAMLでは構文エラーが実行時にしか確認できなかったり、リファクタリング機能が効かなかったりなど、弱点も存在しています。
そのため、最初からC#を用いてUIを作成する、という方針もあり得そうです。
個人開発で使うなら好きな方を選べば良いと思いますが、チーム開発で採用する際は、事前に方針をしっかり決めておく必要がありそうです。

.NET MAUIが面白そうだと思ったら

今回の記事は、.NET MAUIに興味を持っていただくことが目的なので、あまり細かい内容には触れないようにしました。
Microsoftは、.NET MAUIに関する学習資料を豊富に提供しています。
もし.NET MAUIが面白そうだと思ったら、こちらの学習リソースをこなしてみるのが良いと思います。
特に、こちらのページは日本語訳されており、このページの内容をこなすだけで、.NET MAUIでの開発に必要な一通りの基礎が身につくと思います。