Microsoft.UI.Reactorを学習する

Microsoft.UI.Reactorとは

Microsoft.UI.Reactor は、C#で WinUI アプリを宣言的に作る実験的なフレームワークです。
※2026/11/01時点で 0.1.0-preview.16 版です。

試す

プロジェクトを作成する

winget install Microsoft.WinAppCli

winapp new -t reactor -n Kashin777.UI.Reactor

cd Kashin777.UI.Reactor

構成

csproj(抜粋)

Kashin777.UI.Reactor.csproj

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <!-- Windows GUI アプリとしてビルド -->
    <OutputType>WinExe</OutputType>

    <!-- .NET 10 と Windows SDK 10.0.26100.0 を対象にする -->
    <TargetFramework>net10.0-windows10.0.26100.0</TargetFramework>

    <!-- サポートする Windows の最低バージョン -->
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <SupportedOSPlatformVersion>10.0.17763.0</SupportedOSPlatformVersion>

    <!-- WinUI アプリとしてビルドし、MSIX のビルド機能を有効にする -->
    <UseWinUI>true</UseWinUI>
    <EnableMsixTooling>true</EnableMsixTooling>

    <!-- C# の基本設定 -->
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
    <!-- Windows アプリのビルドに必要なパッケージ -->
    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="*" />
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="*" />
    <PackageReference Include="Microsoft.Windows.SDK.BuildTools.WinApp" Version="*" />

    <!-- Microsoft.UI.Reactor -->
    <PackageReference Include="Microsoft.UI.Reactor" Version="0.1.0-preview.16" />
  </ItemGroup>
</Project>

App.cs

App.cs

using Microsoft.UI.Reactor;
using Microsoft.UI.Reactor.Core;
using Microsoft.UI.Reactor.Layout;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using static Microsoft.UI.Reactor.Factories;

// To learn more about Reactor, the Reactor project structure, and more about
// our project templates, see: https://github.com/microsoft/microsoft-ui-reactor
ReactorApp.Run<App>("Kashin777.UI.Reactor");

class App : Component
{
    public override Element Render()
    {
        var titleBar = TitleBar("Kashin777.UI.Reactor")
            .Flex(shrink: 0);

        // This is the main content area of your application.
        // Add your UI elements here.
        var content = Border(Empty()).Flex(grow: 1, basis: 0);

        return FlexColumn(titleBar, content)
            .Backdrop(BackdropKind.Mica);
    }
}

とりあえず実行

dotnet run

画面を実装する

公式ドキュメントのCounter Example に従い、App.cs を修正してみます。

App.cs

    public override Element Render()
    {
        var titleBar = TitleBar("Kashin777.UI.Reactor")
            .Flex(shrink: 0);
        
        var (count, setCount) = UseState(0);                      // countプロパティとsetterを作成

        var content = VStack(spacing: 12,                         // Vertical StackElement
            TextBlock($"Count: {count}").FontSize(20).SemiBold(), // element[0] TextBlock
            HStack(spacing : 8,                                   // element[1] Horizontal StackElement 
                Button("- 1", () => setCount(count - 1)),         // 1デクリメント
                Button("Reset", () => setCount(0)),               // リセット
                Button("+ 1", () => setCount(count + 1))          // 1インクリメント
            )
        ).Padding(24);

        return FlexColumn(titleBar, content)
            .Backdrop(BackdropKind.Mica);
    }

dotnet run

基礎

フック

フック

インタラクティブなUIには必ず状態が必要です。Reactorでは、状態はUseState時間とともに変化する値を管理するための主要なフックです。
コンポーネントは複数回呼び出すことができUseState、各呼び出しは独立した値を追跡します。

        var (count, setCount) = UseState(0); 
        var (firstName, setFirstName) = UseState("");
        var (fontSize, setFontSize) = UseState(16.0);    

フック	戻り値	目的
UseState	(T value, Action set)	リアクティブな状態 — set 時に再レンダリングされます。
UseReducer	(T value, Action> update) または (TState, Action)	関数型または Redux スタイルの更新。
UseEffect	void	コミット後の副作用。Func オーバーロードを使用すると、次のエフェクトの実行前およびアンマウント時にクリーンアップが実行されます。
UseMemo	T	計算結果のキャッシュ。依存項目のいずれかが不等となった場合に再実行されます。
UseRef	Ref（mutable .Current 付き）	変更時でも再レンダリングを行わずに、レンダリング間を通じて状態を保持します。
UseCallback	Action	レンダリング間を通じて安定したデリゲート識別子。
UseContext	T	周囲の Context 値を読み取ります。
UseObservable	T	追跡対象の INotifyPropertyChanged ソースが変更を発生させた際に再レンダリングを行います。
UseExternalStore	TSnapshot	subscribe/getSnapshot ストアを Reactor にブリッジし、スナップショットが変更された場合にのみ再レンダリングします。
UseResource	AsyncValue	キャッシュされた非同期読み取り（「非同期リソース」を参照）。
UsePersisted	(T, Action)	プロセス内のアンマウント/リマウント後も存続する UseState — メモリ内、終了時にクリアされます（「永続性」を参照）。

レイアウト

レイアウト

要素	目的
VStack	縦積み（上から下へ子要素を配置）
HStack	水平スタック（左から右へ）
Grid	行/列グリッド（比例サイズ）
ScrollView	オーバーフローコンテンツ用のスクロール可能なラッパー
Border	背景、角丸、ストローク付きコンテナ

コントロール

コントロールカタログ

カテゴリ	中身は？
フォーム	テキスト入力、ピッカー、ボタン、検証プリミティブ
コレクション	リスト、グリッド、仮想化リスト、リピーター
テキストとメディア	見出し、リッチテキスト、画像、メディアプレーヤー
ステータスと情報	進捗状況、情報バー、バッジ、指導のヒント
レイアウトとコンテナ	スタック、グリッド、境界線、スクロールホスト、ペイン
ナビゲーション	ナビゲーションビュー、フレーム、タブ、パンくずリスト、ピボット
図形とアイコン	長方形、楕円、線、パス、アイコンのソース
ダイアログとフライアウト	コンテンツダイアログ、メニューフライアウト、コマンドバーフライアウト
データシステム	DataGrid、列、データソース、ページング
チャート作成	線グラフ、棒グラフ、面積グラフ、円グラフ、力グラフ

ホットリロード

ホットリード

dotnet watch run

アプリを起動したまま、ボタンのラベルを変更して保存したら

PS C:\Users\Kashin777\source2\repos\Kashin777.UI.Reactor> dotnet watch run
dotnet watch 🔥 Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload.
dotnet watch 💡 Press Ctrl+R to restart.
復元が完了しました (0.0 秒)

0.1 秒後に 成功しました をビルド
    info NETSDK1057: プレビュー版の .NET を使用しています。https://aka.ms/dotnet-support-policy をご覧ください
  Kashin777.UI.Reactor net10.0-windows10.0.26100.0 win-x64 成功しました (0.4秒) → bin\Debug\net10.0-windows10.0.26100.0\win-x64\Kashin777.UI.Reactor.dll

0.5 秒後に 成功しました をビルド
dotnet watch ⌚ Loading projects ...
dotnet watch ⌚ Loaded 1 project(s) in 0.5s.
C:\Users\Kashin777\source2\repos\Kashin777.UI.Reactor\Properties\launchSettings.json からの起動設定を使用中...
⠼  Launching packaged application...

✅ 43A37F59-B43C-4C5A-9E09-1DE873E18ECA_1z32rh13vfry6 launched (PID: 22536)

dotnet watch ⌚ File updated: .\App.cs
dotnet watch ⚠ [Kashin777.UI.Reactor (net10.0-windows10.0.26100.0)] Further changes won't be applied to this process.

ドキュメントに従い dotnet watch run で起動したのですが、App.cs の変更は検知されるもののリロードされず...