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アプリケーション開発の生産性を飛躍的に高めることができるでしょう。

お仕事のご依頼・ご相談はこちら

フロントエンドからバックエンドまで、アプリケーション開発のご相談を承っております。
まずはお気軽にご連絡ください。

関連する記事

Jenkins vs. GitHub Actions vs. GitLab CI: 最適なCI/CDツールはどれ?【2025年最新版】

CI/CDツールの三大巨頭、Jenkins、GitHub Actions、GitLab CIを徹底比較。それぞれの特徴、メリット・デメリット、そしてあなたのプロジェクトに最適なツールの選び方を、初心者にも分かりやすく解説します。

geometry3Sharpとは?C#で使える強力な3Dジオメトリ計算ライブラリを徹底解説

C#で3Dメッシュ処理や幾何計算を行いたい開発者必見!オープンソースライブラリ「geometry3Sharp」の機能、特徴、使い方、活用例をわかりやすく解説します。ゲーム開発、CAD、3Dプリンティング分野で役立ちます。

BootSharpとは?.NETをJavaScript環境で動かす新定番!使い方やBlazorとの違いを解説

BootSharpを使えば、C#で書いたコードをWebAssemblyを介してブラウザなどのJavaScript環境で簡単に実行できます。この記事では、BootSharpの基本的な使い方、Blazorとの違い、具体的な活用例を初心者にも分かりやすく解説します。UIフレームワークに縛られず、.NETのパワーをWebで活かしたい開発者必見です。

C#で動的コード実行!ExpressionEvaluatorライブラリを徹底解説

C#アプリケーションに、設定ファイルやユーザー入力から動的に数式評価やロジック実行機能を組み込みたいと思ったことはありませんか?本記事では、強力なC#ライブラリ「ExpressionEvaluator」について、その基本から応用まで、具体的なコード例を交えて詳しく解説します。

C++ Armadilloライブラリ徹底解説:インストールから実践的使い方まで

C++で高度な線形代数計算を簡単かつ高速に行いたいですか?この記事では、強力なC++ライブラリ「Armadillo」のインストール方法から、行列やベクトルの基本的な操作、連立一次方程式の解法、統計計算といった実践的な使い方まで、豊富なコード例と共に詳しく解説します。科学技術計算や機械学習の実装に役立つ知識を身につけましょう。