Bamba news

CommunityToolkit.Mvvm入門:WPF/MAUI開発を効率化するMVVMライブラリの基本から応用まで

Microsoft製のMVVMライブラリ「CommunityToolkit.Mvvm(MVVM Toolkit)」の基本的な使い方から、非同期コマンドやDI連携などの応用機能までを分かりやすく解説します。WPF、WinUI、.NET MAUI開発者必見です。

Tags:#開発

CommunityToolkit.Mvvmとは?

CommunityToolkit.Mvvm(旧称:MVVM Toolkit)は、Microsoftが公式に提供している、MVVM(Model-View-ViewModel)デザインパターンをサポートするためのライブラリです。特に、WPF、WinUI、.NET MAUIといった、.NET技術を基盤とするデスクトップアプリケーションやクロスプラットフォームアプリケーションの開発において、その真価を発揮します。

このライブラリの最大の目的は、MVVMパターンで頻繁に必要となる定型的なコード(ボイラープレートコード)を削減し、開発者がより本質的なビジネスロジックの実装に集中できるようにすることです。軽量でありながら非常に高機能で、コードの量を減らし、可読性と保守性を大幅に向上させることができます。


基本的な使い方

CommunityToolkit.Mvvmを使いこなすための基本的なステップを順を追って見ていきましょう。

1. NuGetパッケージのインストール

最初に、開発プロジェクトにCommunityToolkit.Mvvmを導入します。これはVisual StudioのNuGetパッケージマネージャーを使って簡単に行うことができます。

  1. Visual Studioで対象のプロジェクトを開きます。
  2. ソリューションエクスプローラーでプロジェクト名を右クリックし、メニューから「NuGet パッケージの管理」を選択します。
  3. 表示された画面の「参照」タブを開き、検索ボックスに CommunityToolkit.Mvvm と入力して検索します。
  4. 検索結果から CommunityToolkit.Mvvm を選択し、「インストール」ボタンをクリックします。

また、後述する「依存性注入(DI)」という高度な機能を利用したい場合は、同様の手順で Microsoft.Extensions.DependencyInjection パッケージもインストールしておくと便利です。

2. ViewModelの作成

MVVMパターンの中核となるViewModelを作成します。ViewModelは、画面(View)に表示するデータや、画面からの操作(コマンド)を保持する役割を担います。

CommunityToolkit.Mvvmでは、ObservableObject というクラスを継承することで、ViewModelの実装が非常にシンプルになります。このクラスは、プロパティの値が変更されたことを画面に通知するための基本的な仕組み(INotifyPropertyChangedインターフェース)を提供してくれます。

さらに、プロパティを定義する際には [ObservableProperty] という属性を付けるだけで、ライブラリが裏側で必要なコードを自動的に生成してくれます。

// 必要な名前空間を読み込みます
using CommunityToolkit.Mvvm.ComponentModel;

// ObservableObjectを継承してViewModelクラスを定義します
// partialキーワードを付けることで、ソースジェネレータがコードを追記できるようになります
public partial class SampleViewModel : ObservableObject
{
    // [ObservableProperty]を付けるだけで、プロパティが自動生成されます
    [ObservableProperty]
    private string name;

    [ObservableProperty]
    private int age;
}

上記のコードでは、nameage という2つのプライベートフィールドを定義し、それぞれに [ObservableProperty] 属性を付与しています。これだけで、コンパイル時に以下のようなプロパティが自動的に生成されます。

  • public string Name { get; set; }
  • public int Age { get; set; }

これらのプロパティは、値が変更されると自動的に画面に変更を通知する仕組みが組み込まれているため、開発者が手動で通知コードを書く必要がありません。

3. コマンドの実装

ユーザーがボタンをクリックするなどの操作を行った際の処理を「コマンド」として実装します。これも [RelayCommand] という属性を使うことで非常に簡単に記述できます。

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class SampleViewModel : ObservableObject
{
    // ...プロパティ定義は省略...

    // [RelayCommand]をメソッドに付けると、コマンドが自動生成されます
    [RelayCommand]
    private void Greet()
    {
        // ここにボタンがクリックされた時の処理を記述します
        // 例えば、挨拶メッセージを生成するなど
    }
}

この例では、Greet という名前のメソッドに [RelayCommand] 属性を付けています。これにより、GreetCommand という名前のコマンドオブジェクト(ICommand 型)が自動的に生成されます。この GreetCommand を画面上のボタンのCommandプロパティにデータバインディングすることで、ボタンのクリックとGreetメソッドの実行を簡単に関連付けることができます。

4. プロパティ変更通知の拡張

あるプロパティの値が、他のプロパティに依存している場合があります。例えば、「姓」と「名」から「氏名」を生成するケースです。「姓」または「名」が変更されたら、「氏名」も更新されたことを画面に通知する必要があります。

このような場合、[NotifyPropertyChangedFor] 属性が役立ちます。

using CommunityToolkit.Mvvm.ComponentModel;

public partial class SampleViewModel : ObservableObject
{
    [ObservableProperty]
    // firstNameが変更されたら、FullNameプロパティの変更も通知する
    [NotifyPropertyChangedFor(nameof(FullName))]
    private string firstName;

    [ObservableProperty]
    // lastNameが変更されたら、FullNameプロパティの変更も通知する
    [NotifyPropertyChangedFor(nameof(FullName))]
    private string lastName;

    // FirstNameとLastNameを組み合わせて氏名を返すプロパティ
    public string FullName => $"{LastName} {FirstName}";
}

この設定により、firstName または lastName プロパティの値が変更されると、それらに依存している FullName プロパティについても変更通知が自動的に発行されます。これにより、画面上の氏名表示が常に最新の状態に保たれます。


応用機能

基本的な使い方をマスターしたら、さらに便利な応用機能も活用してみましょう。

1. 非同期コマンドの実装

時間のかかる処理(ファイルの読み書きやネットワーク通信など)をコマンドで実行する場合、UIの応答性を維持するために非同期処理が必須です。CommunityToolkit.Mvvmでは、非同期コマンドも簡単に実装できます。

やり方は同期的コマンドとほとんど同じで、[RelayCommand] 属性を async Task を返す非同期メソッドに適用するだけです。

using System.Threading.Tasks;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.ComponentModel;

public partial class SampleViewModel : ObservableObject
{
    [RelayCommand]
    private async Task LoadDataAsync()
    {
        // 時間のかかる非同期処理をここに記述します
        // 例:データベースやAPIからデータを読み込む
        await Task.Delay(2000); // 2秒待つダミー処理
    }
}

このコードでは、LoadDataAsync という非同期メソッドに [RelayCommand] 属性を付けています。これにより、LoadDataCommand という名前の特殊なコマンド(IAsyncRelayCommand 型)が生成されます。このコマンドは、非同期処理の実行状態(実行中かどうかなど)を管理する機能も備えており、処理中にボタンを無効化するといった制御も簡単に行えます。

2. 依存性注入(DI)の活用

大規模なアプリケーション開発では、クラス間の依存関係を管理するために「依存性注入(Dependency Injection, DI)」というデザインパターンがよく用いられます。CommunityToolkit.Mvvmは、.NET標準のDIコンテナである Microsoft.Extensions.DependencyInjection とシームレスに連携できます。

まず、アプリケーションの起動時に、DIコンテナに必要なクラス(ViewModelなど)を登録します。

// App.xaml.csなどのアプリケーション起動処理ファイルにて

using Microsoft.Extensions.DependencyInjection;
using CommunityToolkit.Mvvm.DependencyInjection;

public partial class App : Application
{
    public App()
    {
        // DIコンテナの準備
        var services = new ServiceCollection();

        // ViewModelをシングルトン(常に同じインスタンス)として登録
        services.AddSingleton<SampleViewModel>();
        
        // 設定したサービスでIocコンテナを構成する
        Ioc.Default.ConfigureServices(services.BuildServiceProvider());
    }
}

このように設定することで、アプリケーションのどこからでも Ioc.Default を通じて登録したクラスのインスタンスを取得できるようになります。

// ViewModelのインスタンスが必要な場所で
var viewModel = Ioc.Default.GetService<SampleViewModel>();

これにより、クラス間で直接インスタンスを生成する必要がなくなり、コンポーネントの疎結合が促進されます。結果として、テストがしやすく、変更に強い柔軟なアプリケーション構造を構築することが可能になります。


CommunityToolkit.Mvvmは、ここで紹介した機能以外にも多くの便利なツールを提供しています。このライブラリを使いこなすことで、.NETによるUIアプリケーション開発の生産性を飛躍的に高めることができるでしょう。

関連する記事

IndexNowとは?SEOを加速させる新しい仕組みを徹底解説

Webサイトの更新を検索エンジンに即時通知できるIndexNow。その仕組み、メリット、具体的な導入手順(GitHub Actionsでの自動化含む)を、初心者にも分かりやすく解説します。サイト運営者必見です。

Amazon SageMakerとは?AWSの機械学習サービスを初心者にもわかりやすく徹底解説

Amazon SageMakerの基本から、StudioやCanvasといった主要機能、料金体系、具体的な活用例までを網羅的に解説。機械学習プロジェクトを始めたい方、AWSのサービスに興味がある方必見の記事です。

Amazon Bedrockとは?AWSの生成AIサービスを初心者向けに徹底解説

Amazon Bedrockの基本から料金、最新情報までを網羅的に解説。ClaudeやLlamaなど多様なAIモデルをAPIで簡単に利用できる魅力や、ビジネスでの活用方法を専門用語なしでやさしく説明します。生成AI導入の第一歩に最適です。

ML.NETとは?C#で始める機械学習【入門ガイド】

.NET開発者のための機械学習ライブラリ「ML.NET」を徹底解説。本記事では、ML.NETで実現できること、そのメリット、そして感情分析を題材にした実践的なチュートリアルまで、数式を使わずに分かりやすく紹介します。C#やF#でAI機能をアプリに組み込みたい方は必見です。

GitHubのAwesomeリストとは?開発者必見の厳選おすすめリソース集を徹底解説

GitHubの「awesome-〇〇」リポジトリを見たことがありますか?この記事では、開発者にとって欠かせないAwesomeリストの仕組みや信頼性、活用法を初心者向けにわかりやすく解説します。おすすめリスト5選も紹介。