SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マルチターゲットアプリ開発の新しいアプローチ~.NET 9 新テンプレートの基本~

.NET 9のテンプレート「.NET MAUI Blazor」を学ぼう。マルチターゲットアプリ開発の新しいアプローチ

マルチターゲットアプリ開発の新しいアプローチ~.NET 9 新テンプレートの基本~ 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

.NET 9で追加された「.NET MAUI Blazor HybridアプリとWebアプリ」

 .NET 9では、新しいソリューションテンプレートとして「.NET MAUI Blazor HybridアプリとWebアプリ」が追加されました。この新しいテンプレート全体を紹介する前に、その名称に含まれる「.NET MAUI Blazor Hybrid」を説明しておきましょう。

.NET MAUI Blazor Hybrid

 .NET MAUI Blazor Hybridは、.NET MAUIとBlazorの技術を組み合わせたものです。具体的には、.NET MAUIで作成したネイティブアプリ内で、BlazorWebViewという特殊なコンポーネントを使って、Blazorで構築したWeb UIを直接実行する技術です。つまり、Web開発の知識を活かして、ネイティブアプリを構築できるということです。

.NET MAUI Blazor Hybridの構造
.NET MAUI Blazor Hybridの構造

BlazorWebViewのしくみ

 BlazorWebViewは、単なるWebサイトの埋め込み表示ではありません。BlazorWebViewでは、アプリに含まれるRazorコンポーネントが直接レンダリングされ、.NETのコードもネイティブ並みの速度で実行されます。Web UI(Blazor)とMAUIのネイティブ機能間の通信は、HTTPリクエストを介さず、プロセス内でのメソッド呼び出しによって完結します。そのため、通信コストが低く、効率的な統合が可能になります。

 このアーキテクチャにより、Blazorコンポーネント内のC#コードから、.NET MAUIが提供するネイティブAPI(バーコードスキャナ、NFCリーダー、連絡先情報など)を呼び出すことが可能になります。

ソリューション全体の構成

 新しいソリューションテンプレートは、この「.NET MAUI Blazor Hybrid」をさらに発展させたものです。

 Visual Stduioの新しいプロジェクトの作成で、「.NET MAUI Blazor HybridアプリとWebアプリ」というテンプレートを選ぶと、1つのソリューション内に複数のプロジェクトが生成されます。それぞれのプロジェクトは、密接に連携して動作し、明確な役割を持っています。

 ソリューション作成時のオプションで、対話型レンダリングモードを「自動」または「WebAssembly」を選択した場合、4つのプロジェクト構成のソリューションになります。

オプション
オプション

 プロジェクト構成は、次の通りです。

ソフトウェア構成
ソフトウェア構成
表:生成されるプロジェクト
プロジェクト名 概要
「ソリューション名」 .NET MAUI Blazor Hybrid アプリ本体
「ソリューション名」.Web Blazor Webアプリのサーバープロジェクト
「ソリューション名」.Web.Client Blazor WebAssemblyクライアントプロジェクト
「ソリューション名」.Shared 共有Razorクラスライブラリ

.NET MAUI Blazor Hybridアプリ本体

 このプロジェクトは、Windows、macOS、Android、iOSで動作するネイティブアプリの本体です。BlazorWebViewを使って共有されたUIコンポーネントを実行します。UIやロジックは、.Sharedプロジェクトを参照します。プラットフォーム固有機能に制限なくアクセス可能です。

.Webプロジェクト

 Blazor Webアプリのサーバープロジェクト(ASP.NET Core)です。Webサーバーとして動作し、WebクライアントへのエンドポイントやAPI、認証などを実装します。Blazor WebAssemblyクライアント(.Web.Client)をホストする役割も持ちます。

.Web.Clientプロジェクト

 ブラウザ上で動作するBlazor WebAssemblyアプリのプロジェクトです。

.Sharedプロジェクト

 各種Razorコンポーネント、サービス、スタイルなどの共通リソースをBlazor クラス ライブラリ(RCL)として格納します。すべてのプロジェクトから参照されることで、UIやロジックの一元管理と再利用が可能となります。Razor クラス ライブラリ(RCL)とは、NuGetパッケージのように配布・再利用できる、UIコンポーネントやロジックをまとめたものです。このテンプレートでは、2つのアプリでコードを共有するための中核的な役割を担います。

 各プロジェクト毎の具体的な内容については、次回以降、実際のアプリを作成しながら解説していきます。

WebとネイティブでのUI動作の違い

 .NET MAUI Blazor Hybridプロジェクトと.Webプロジェクトは、同じUIコンポーネントを共有しますが、その動作のしくみには技術的に重要な違いがあります。

.Webアプリ

 UIはWebブラウザ内で動作します。.Webアプリでは、「ボタンがクリックされた」といったユーザーイベントを処理するC#コードを、サーバーで実行するのか、それともクライアント(ブラウザ)で実行するのか、という対話型レンダリングモードを決める必要があります。レンダリングモードは、Webアプリ側だけが影響を受けます。

.NET MAUI Blazor Hybridプロジェクト

 UIは、ローカルのBlazorWebView内で、デバイス上のネイティブプロセスとして直接実行されます。これは常に「インタラクティブ(対話的)」な状態で、ネットワーク接続に依存しません。つまり、対話型レンダリングモードの設定にかかわらず、ローカルのネイティブプロセス内で常時インタラクティブに動作するということです。

最後に

 新しいテンプレートの利点と基本的な構成についてご理解いただけたでしょうか。このテンプレートは、現代のマルチターゲットアプリ開発において、画期的なアプローチと言えるものです。.NET MAUI、Blazor、ASP.NET Coreなどの技術を理解する必要がありますが、これまでにない開発効率と柔軟性をもたらしてくれる可能性があります。

 次回は、このテンプレートを使い、実際にアプリケーションを構築する手順を紹介する予定です。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/22093 2025/08/26 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング