C#入門編  UIフレームワーク総論と選び方(2025年版) ～Web・デスクトップ・クロスプラットフォームアプリ～【MAUI,WPF,WinForms, MVC,Blazorなど】

C#でアプリ開発を始めようとすると、最初の重要な決断の一つが「どのUIフレームワークを使うか」ですね。

この記事は2024年12月時点の情報をもとに、2025年に向けてC#によるUIフレームワーク選定で参考となるポイントを整理しました。以下について説明します。

以下のような方に役立つ内容となっています。

プロ美

C#のUI開発フレームワークって色々あって難しいんだよね…。

プロ太

歴史的な経緯もあり、やや複雑かもしれませんね。

一緒に整理しながら学んでいきましょう！

YouTubeの動画でも解説しています。

UI開発の領域と種類

C#でのUI開発は主に以下の3つの領域があります。

プロ太

C#におけるUI開発の領域についてはMicrosoftのC#に関する公式ページも参考にしてください。

それぞれの概要をみていきましょう。

(1)Webアプリ

ブラウザさえあれば利用できるアプリです。アプリのインストールが不要で、URLにアクセスするだけで利用できます。

また、アップデートもサーバーサイドで一括して行えるため、運用の手間が少なくて済みます。

アプリのスタイルとして以下があります。

プロ太

従来型であっても、React等のJavaScriptのライブラリを組み合わせることで、UIをSPA型へ拡張することは可能です。

代表的なフレームワークとしては以下があります。

(2)Windowsアプリ

Windows OS上で動作するネイティブアプリです。

OSの機能を直接利用できるため、高度な処理や豊富なUI表現が可能です。パフォーマンスも高く、オフライン動作も可能です。

アプリのスタイルとして以下があります。

代表的なフレームワークとしては以下があります。

(3)クロスプラットフォーム

1つのコードベースから、様々な環境で動作するネイティブアプリを開発できます。

アプリのスタイルとして以下があります。

代表的なフレームワークとしては以下があります。

各領域とフレームワークの比較表

以下は、各領域と代表的なフレームワークについて表で整理したものです。

プロ美

UI記述の方法にもRazor・XAMLとか違いがあるのか…。
対応.NETバージョンや開発状況にも違いがあるんだね。

プロ太

Razor・XAMLなどでUIのコードをどう記述するかは、この後、各フレームワークの紹介で触れるのでそこで雰囲気を掴みましょう！

開発状況はフレームワーク選定においても重要なポイントですね。これについても後ほど説明します。

参考までにフレームワークの進化の系譜はざっくり以下になります。

大枠の基盤フレームワークとしては、「.NET Framework」と「.NET」を知っておけばよいかと思います。

.NET Framework

Windows向けに設計された開発プラットフォームで、20年以上の歴史があります。現在も多くのシステムで利用されています。

.NET（旧 .NET Core）

Windows/Linux/macOSで動作するクロスプラットフォーム対応の現代的な開発プラットフォームです。コンテナ化やクラウド対応など、最新の開発手法に対応しています。

Microsoftは新規プロジェクトでは「.NET Framework」ではなく「.NET」を選択することを推奨しています。

プロ太

このような歴史的な背景も踏まえつつ、それぞれ主要なUIフレームワークをみていきましょう。

代表的なUIフレームワーク

代表的なUIフレームワークをダイジェストでいくつか紹介します。

プロ太

画面をどう記述するかという点にフォーカスし、雰囲気や特徴を掴んでもらえればと思います！

(1)Webアプリ

ASP.NET Core MVC

C#におけるWebアプリ開発の定番フレームワークです。企業の業務システム（エンタープライズシステム）の開発で多く使われています。

プロ太

MVCとは「Model（データ）」「View（見た目）」「Controller（制御）」の略です。

それぞれの役割を分けることで、大規模な開発でも管理しやすくなります。

主な特徴としては以下があります。

簡単なコード例をみてみましょう。以下はコントローラのコード「HomeController.cs」です。

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var viewModel = new MessageViewModel
        {
            Message = "Hello World",
            CurrentTime = DateTime.Now
        };
        return View(viewModel);
    }
…

以下はビューコード「Index.cshtml」です。

@model MessageViewModel
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1>@Model.Message</h1>
    <p>Current Time: @Model.CurrentTime.ToString("yyyy/MM/dd HH:mm:ss")</p>
</div>

以下のように表示されます。

詳しくはこちらの記事も参考にしてください。

ASP.NET Core RazorPages

Razor Pagesは、ASP.NET Core MVCをベースにしつつ、よりシンプルなページベースのWeb開発モデルを提供します。

小規模なWebアプリケーションの開発に適しています。こちらの記事も参考にしてください。

ASP.NET Core Blazor

モダンなWeb開発向けのフレームワークです。C#だけでインタラクティブなWebアプリが作れます。Microsoftが力を入れて開発しているフレームワークです。

主な特徴は以下です。

サンプルコードをみてみましょう。以下は「Counter.razor」です。ボタンを押すとカウンターの値を更新できます。

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

この「画面」と「状態変数の定義とイベントのコード」のセットがコンポーネントです。

画面は以下のようになります。

C#の（サーバサイド含めた）Webアプリ開発フレームワークやBlazorの位置づけについては以下の記事で紹介しているので、こちらも参考にしてください。

プロ太

BlazorのServerモード/WASMモードなどについても解説しています！

【C#、Blazor】Webアプリ開発入門編（1）Blazorとは？ ～Webアプリ開発フレームワークでBlazorを選ぶ理由～【ASP.NET Core】 今回はWebアプリ開発フレームワーク「Blazor」について解説します。 フレームワークとは、ソフトウェア開発で使える既製の枠組...

BlazorについてはWebアプリ開発入門編としてシリーズ化しているので、興味があればぜひこちらもご覧ください。

(2)Windowsアプリ

Windows Forms

Windows向けアプリ開発の入門に最適なフレームワークです。直観的で学習しやすいのが特徴です。

主な特徴は以下です。

Visual Studioのデザイナで以下のように視覚的に画面を構築できます。

サンプルコードをみてみましょう。以下が「Form1.cs」です。

public partial class Form1 : Form
{
    int currentCount = 0;
    ...

    private void button1_Click(object sender, EventArgs e)
    {
        currentCount++;
        label1.Text = $"Counter: {currentCount}";
    }
}

実行画面は以下のようになります。

こちらの記事も参考にしてください。

WPF(Windows Presentation Foundation)

リッチなWindowsアプリを開発するためのフレームワークです。

主な特徴は以下です。

WPFもVisualStudioのデザイナで視覚的に編集ができます。

サンプルコードは画面を表現するXAML部分(「MainWindow.xaml」)と、C#コード部分（「MainWindow.xaml.cs」）に分かれています。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Label x:Name="label1" Content="Counter: 0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10"/>
        <Button Content="Click Me" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="10,50,0,0" Click="Button_Click" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-20.555"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Window>

このXAMLコードはデザイナと同期しています。なので、「デザイナ上の編集」・「XAMLコードを直接編集」を組み合わせて行うことが可能です。

public partial class MainWindow : Window
{
    int currentCount = 0;
    ...

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        currentCount++;
        label1.Content = $"Counter: {currentCount}";
    }
}

実行画面は以下になります。

プロ太

ボタンを少し回転させて配置させてみました。このようにWPFはWinFormsよりも、UIの表現力が豊富なのも特徴ですね。

こちらの記事も参考にしてください。

Windows App SDK

Windows App SDKは、UWPの後継となる最新のWindowsアプリ開発プラットフォームです。

WPFと同様にXAMLベースのUI開発が可能で、最新のWindows機能へのアクセスを提供します。

まだ発展途上のプラットフォームですが、今後のWindows開発の主流となることが期待されています。

プロ太

厳密には、Windows App SDKにおいてUIを担当するフレームワークは「WinUI 3」と呼ばれています。

Windows App SDKについてはこちら、WinUI3についてはこちらの記事もそれぞれ参考にしてください。

(3)クロスプラットフォーム

.NET MAUI

Windows、macOS、iOS、Androidで動作するアプリを1つのコードで開発できます。

主な特徴は以下です。

WPFと同様にXAML部分とC＃コード部分に分かれます。以下が「MainPage.xaml」です。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25">
        <Label
            x:Name="CounterLabel"
            Text="Counter: 0"
            HorizontalOptions="Center" />
        <Button
            x:Name="CounterBtn"
            Text="Click me" 
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

以下は「MainPage.xaml.cs」です。

public partial class MainPage : ContentPage
{
    int currentCount = 0;
    ...

    private void OnCounterClicked(object sender, EventArgs e)
    {
        currentCount++;
        CounterLabel.Text = $"Counter: {currentCount}";
    }
}

実行画面は以下になります。これはWindows11で起動した画面です。

MAUIは同じコードからAndroid用アプリをビルドすることもできます。以下はAndroidシミュレータで起動した画面です。

必要に応じて、プラットフォームごとに固有のコードを用意することも可能です。

プロ太

WPF、MAUI、WindowsAppSDKはどれも画面記述にXAMLを使う点は似ていますが、それぞれXAMLの仕様は異なります。

MAUIについてはこちらの記事も参考にしてください。

補足：Webとネイティブアプリのハイブリッド

最近のアプリ開発では、ネイティブアプリとWebアプリの良いところを組み合わせた開発アプローチも注目されています。

具体的には、以下があります。

「(a)ネイティブアプリの中でWebコンテンツを表示」として以下があります。

「(b)Webアプリでネイティブアプリのような機能を実現」として以下があります。

このようなアプローチの大きな利点は、Web開発のスキルを活かしながらネイティブアプリを開発できることと、既存のアプリを段階的にモダン化できることです。

例えば、既存のWebアプリを少しずつネイティブアプリに近づけていったり、逆に既存のネイティブアプリに徐々にWebコンテンツを導入したりできます。

プロ太

Web・ネイティブのハイブリッドアプローチを知っておくと、フレームワーク選定においても、選択肢の幅が広がるでしょう。

フレームワーク選定方法

選定方法

フレームワークの選定では、以下の3つの観点から検討することをお勧めします。

1.プロジェクトの要件

以下の要件を整理することから始めましょう。

プロ太

要件の優先順位付けも重要です。例えば「クロスプラットフォーム対応」と「リッチなUI表現」のどちらを優先するかで選択が変わってきます。

2.開発チームのスキルセット

既存の開発チームのスキルを活かせるフレームワークを選択することで、開発の立ち上がりが早くなるなどのメリットがあります。

例えば、以下のような考え方があるでしょう。

3.フレームワークの成熟度

フレームワークの選定では、現在の開発効率だけでなく、長期的な保守や発展性を考慮することが重要です。

フレームワークは主に成熟したものと成長中のもの（新しいもの）に分類できます。

成熟したフレームワークは以下の特徴があります。
（例：WinForms, WPF, ASP.NET Core MVC）

成長中のフレームワークは以下の特徴があります。
(例：MAUI, Blazor, Windows App SDK)

プロ美

新しい技術は使いたいけど、ドキュメントとかサンプルが充実してるのも大事だよね…。

プロ太

そこは悩ましい点ですね。最近だとドキュメントの充実度合いは、AI（例：ChatGPT）の回答精度にも大きく影響します。

現時点での実践的な選定

現時点（2024年末）で、実践的なUIフレームワーク選定における所感は以下のようになります。

Webアプリ開発：

Windowsアプリ開発：

クロスプラットフォーム開発：

プロ太

現時点（2024年末）での所感ですが、2025年にはBlazor、MAUI、Windows App SDKがさらに成熟・普及することが予想されます。

まとめ

C#のUI開発フレームワークは、Webアプリ、Windowsアプリ、クロスプラットフォームアプリの3つの領域に大きく分類されます。

Webアプリ開発ではASP.NET Core MVC、Blazorなど、Windowsアプリ開発ではWinForms、WPF、WindowsAppSDKがあります。

そして、クロスプラットフォーム開発では.NET MAUIがあります。

フレームワークの選定では、プロジェクトの要件、開発チームのスキルセット、そしてフレームワークの成熟度が重要なポイントになります。

特に、2025年に向けて、MAUIやBlazor、WindowsAppSDKなどの成長が期待され、より多くの機能が安定して利用できるようになるでしょう。

また最近では、ネイティブアプリとWeb技術を組み合わせたハイブリッドアプローチも選択肢として検討できます。

プロジェクトの特性を見極め、2025年の開発環境やトレンドも踏まえながら、最適なフレームワークを選定してください。

プロ太

引き続き、C#やプログラミングの考え方を一緒に学んでいきましょう！

ABOUT ME

プロ太

XX

BLOG：https://prota-p.com/