close
コンテンツにスキップ

Blazor

出典: フリー百科事典『ウィキペディア(Wikipedia)』

Blazor(ブレイザー)またはASP.NET Core Blazorは、開発者がC#HTMLCSSを使用して生産性の高いWebアプリケーションを開発できるようにする自由かつオープンソースのWebフレームワーク。マイクロソフトによって開発されている。様々な企業やサービスで利用されている[1][2]

Blazor
プロジェクトテンプレートの実行画面
作者 Microsoft
開発元 .NET Foundation
初版 2018年 (8年前) (2018)
リポジトリ github.com/dotnet/aspnetcore/tree/main/src/Components
対応OS Linux, macOS, Windows
内包元 ASP.NET Core
種別 Web framework
ライセンス Apache License 2.0
公式サイト dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
テンプレートを表示

概要

[編集]

2017年に開発構想が発表され、実験的なプロダクトとしてスタートした[3]。当初はC#とRazor構文によって記述する、クライアントサイドによる対話型アプリケーションフレームワークとして開発されていた。のちにサーバーサイドが追加され.NET Core 3.1で正式リリースされた。Blazorの名称は「Browser」と「Razor」が由来となっている。

現在、4つのエディションが利用可能となっている。

Blazor Web App (Blazor United)

[編集]

正式リリースまではBlazor Unitedと呼ばれていた。Blazor Server と Blazor WebAssembly の両方を組み合わせたもので、開発者がレンダリング モードをより細かく調整できる "両方の長所"を備えたソリューションが可能になる。このアプローチにより、Blazor WebAssembly が必要とするアセンブリの事前ダウンロードと、Blazor Server が必要とする常時接続のSignalRの欠点が克服される。.NET 8 ロードマップの一部であり、2023年11月15日のリリースとともに利用可能となった[4]

具体的には4つのレンダリングモードに分かれている[5]

Static Server

[編集]

Static server-side renderingとも呼ばれ、サーバー側で初回のみレンダリングされる。SignalRによる常時接続が不要だが、対話機能を有しないため、静的なコンテンツのページに向いている。

Interactive Server

[編集]

従来のBlazor Serverと同等で、サーバー側でレンダリングされ、対話機能を有する。

Interactive WebAssembly

[編集]

従来のBlazor WebAssemblyと同等で、クライアント側でレンダリングされ、対話機能を有する。

Interactive Auto

[編集]

Interactive WebAssemblyの欠点を克服するもの。初回の読み込み時のみInteractive Serverで動作すると同時にアセンブリがダウンロードされ、以降はInteractive WebAssemblyとして動作する。

Blazor Server

[編集]

ASP.NET Razor 形式で ASP.NET Core サーバーでホストされる。リモートクライアントはシンクライアントとして機能し、処理の大部分がサーバー上で行われる。クライアントの Web ブラウザーは小さなページをダウンロードし、SignalR接続を介してUIを更新する。Blazor Serverは .NET Core 3の一部としてリリースされた[6]

.NET 8ではBlazor Web App (Blazor United)がリリースされ、これに内包される形で非推奨となった。プロジェクトテンプレートは削除されたが、それまでに作成されたアプリは引き続き開発可能となっている[7]

Blazor WebAssembly

[編集]

実行前にクライアントの Web ブラウザーにダウンロードされるシングルページアプリケーション(SPA)。ダウンロードのサイズはBlazor Serverよりも大きく、アプリケーションによって異なり、処理はすべてクライアントハードウェアで行われる。ただし、このアプリタイプは応答時間が速い。その名前が示すように、このクライアント側フレームワークは、JavaScriptとは対照的に、WebAssemblyで記述されている(一緒に使用できる)。

Blazor Hybrid

[編集]

前者はプログレッシブ Web アプリケーション (PWA) をサポートしている。後者は(Webフレームワークとは対照的に)プラットフォームネイティブフレームワークだが、Webテクノロジー(HTMLやCSSなど)を使用してユーザーインターフェイスをレンダリングしている。WindowフォームWPFで利用可能で、.NET MAUIでは.NET MAUI Blazor Hybridとしてテンプレートが用意されている[8]

使用例

[編集]

次の例は、ボタンをクリックするとインクリメントするシンプルなカウンターの実装である。

<h1>Blazor code example</h1>
<p>count: @count</p>
<button @onclick="IncCount">Click to increment</button>

@code {
    private int count = 0;

    private void IncCount()
    {
        count++;
    }
}

BlazorはRazor構文によって記述する。レイアウトをHTML(例の<h1>タグから<button>タグまで)、@Codeブロック内をC#で記述する。

相互運用機能を利用することで、alertなどのJavaScript関数や外部のJavaScriptライブラリを利用することもできる。

関連項目

[編集]
  • asm.jsC言語またはC++で記述された、クライアント側のWebアプリケーションを可能にするWebAssemblyの前身。
  • Google Native Client – ブラウザの動作環境に関係なく、ウェブブラウザ上でネイティブコードを実行できるようにするWebAssemblyの前身。現在は廃止されている。

脚注

[編集]
  1. Blazor のお客様の紹介”. マイクロソフト. 2025年5月10日閲覧。
  2. NITE-Gmiccs”. 独立行政法人製品評価技術基盤機構. 2025年5月10日閲覧。
  3. マイクロソフトの実験的プロダクト「Blazor」、WebAssemblyで.NETランタイムを実装。WebブラウザでC#など.NETアセンブリをそのまま実行可能に”. Publickey. 2025年5月10日閲覧。
  4. Blazor WebAssemblyとBlazor Serverが統合、フルスタックUIフレームワークに進化。サーバサイドレンダリングも可能に”. Publickey. 2025年5月10日閲覧。
  5. ASP.NET Core Blazor のレンダー モード”. マイクロソフト. 2025年5月10日閲覧。
  6. ASP.NET Core 3.0 の新機能”. マイクロソフト. 2025年5月10日閲覧。
  7. ASP.NET Core 8.0 の新機能”. マイクロソフト. 2025年5月10日閲覧。
  8. ASP.NET Core 6.0 の新機能”. マイクロソフト. 2025年5月10日閲覧。

外部リンク

[編集]