ブレザー

ブレザー

原作者	マイクロソフト
開発者	.NET ファウンデーション
初回リリース	2018 ; 6年前 （2018年）
リポジトリ	github.com/dotnet/aspnetcore/tree/main/src/Components
オペレーティング·システム	Linux、macOS、Windows
含まれるもの	ASP.NET コア
タイプ	ウェブフレームワーク
ライセンス	Apache ライセンス 2.0
Webサイト	dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor

Blazorは、開発者がC#とHTMLを使用してコンポーネントに基づいてWebユーザーインターフェイス（UI）を作成できるようにする無料のオープンソース Webフレームワークです。^{[1] [2] [3] [4] [5]これは、} ASP.NET Core Webアプリフレームワーク の一部としてMicrosoftによって開発されています。

Blazor は、.NET テクノロジを使用して、シングルページ、モバイル、またはサーバー レンダリングアプリケーションを開発するために使用できます。

2017年、NDCオスロで、マイクロソフトのソフトウェアエンジニアであるスティーブ・サンダーソン氏は、彼が「Blazor」と呼ぶ.NET用の実験的なクライアント側Webアプリケーションフレームワークを発表しました^{[6] 。デモでは、} WebAssemblyを使用してブラウザーで実行されるインタラクティブアプリと、Visual Studioでの基本的な開発体験が紹介されました。サンダーソン氏は、 C#とRazor構文を使用してインタラクティブコンポーネントを構築する方法を実演しました。その後、アプリは、WebAssemblyにコンパイルされた軽量のサードパーティオープンソース.NETランタイムであるDotNetAnywhereで実行される.NETアセンブリにコンパイルされました。

Steve Sanderson の説明によると、「Blazor」という名前は、「Browser」と「Razor」という単語を組み合わせた造語です。(使用されているRazor構文から)

Blazor は Microsoft によって公式のオープンソース プロジェクトとして認められ、2018 年には .NET Core 3.1 の一部として Blazor Server が一般公開されました。これにより、 WebSocket経由でクライアント ブラウザーを更新するサーバー駆動型のインタラクティブ Web アプリが実現しました。その後まもなく、Blazor WebAssembly がリリースされました。プロトタイプとは異なり、 WebAssembly ではMono .NET ランタイムが使用されました。これは、 .NET MAUI (旧Xamarin )でモバイル アプリを開発するために使用されるランタイムと同じです。

Blazor のソース コードは、最初は GitHub の独自のリポジトリに配置されていましたが、ASP.NET Coreモノレポに統合されました。それ以来、開発はそこから行われています。

.NET 5のリリースにより、BlazorはInternet ExplorerとMicrosoft Edgeの旧バージョンでは動作しなくなりました。^[7]

2023年、.NET 8では、サーバー上のBlazorにいくつかの根本的な変更が加えられ^{[8]、基本的にインタラクティブではない}サーバー側でレンダリングされる（SSR）ページが有効になり、BlazorをMVC Razor Pagesの代替として使用できるようになりました。この変更により、開発者はコンポーネント（またはページ）ごとに、インタラクティブにするかどうか、サーバー上で実行するか、WebAssemblyを使用してブラウザーで実行するかを選択できます。これらは、インタラクティブな「レンダリングモード」と呼ばれます。

コンポーネントは正式にはRazor コンポーネントと呼ばれます。

Razor コンポーネントは主に HTML で構成され、C# のインライン使用によってレンダリングに影響を与える Razor テンプレート構文が混在しています。

Blazor コンポーネント モデルは、通常はユーザーのアクションに応じてコンポーネントの状態が変更されたときに、レンダリングされたマークアップが更新されるようにします。

マークアップと C# コードの両方を同じファイルに配置できますが.razor、部分クラスを含む別のコード ビハインド ファイルを持つこともできます。

コンポーネントは .NET クラスにコンパイルされます。コンポーネントの HTML および Razor マークアップは、実際のレンダリングを実行するレンダリング ツリーを構築するコードに変換されます。

次の例は、ボタンをクリックすることで増加できる単純なカウンターを実装する方法を示しています。

< h1 >カウンター</ h1 >

< p >カウント: @count </ p >

< button  @ onclick = "Increment" >増加</ button >

@コード
{
    プライベート int カウント = 0;

    プライベート void インクリメント()
    {
        カウント++;
    }
}

Blazor アプリは複数の方法でホストできます。これらは .NET 8 時点でのホスティング モデルです。

ASP.NET Core アプリの一部として、サーバーでホストされる Blazor アプリ。

デフォルトでは、コンポーネントはサーバーによって静的 HTML としてレンダリングされ、インタラクティブ性はありません。レンダリング モードを設定することで、コンポーネントごとにインタラクティブ性を有効にすることができます。

これは、MVC ビューと Razor ページがレンダリングされる方法と同等です。

出典: ^[9]

.NET 8 では、Blazor は、Razor コンポーネントがインタラクティブであるかどうか、およびそのインタラクティブ性を促進するものを構成するレンダリング モードの概念を導入しました。

レンダリング モードは、コンポーネント階層内で、レンダリング モードが設定されている最上位の親コンポーネントから継承されます。レンダリング モードがデフォルトの Static Server でない限り、子コンポーネントによってこれを上書きすることはできません。

• 静的サーバー– コンポーネントは、インタラクティブ性なしでサーバー上で静的にレンダリングされます。これがデフォルトです。
• インタラクティブ サーバー– コンポーネントはサーバー上でインタラクティブ モードで実行されます。インタラクティブ性はサーバー駆動型であり、変更はSignalR を使用してWebSocket経由でクライアントにプッシュされます。
• インタラクティブ WebAssembly – コンポーネントは WebAssembly を使用してブラウザー内でインタラクティブ モードで実行されます。
• Interactive Auto – Blazor バンドルがダウンロードされている間、最初に Interactive Server レンダリング モードでコンポーネントがロードされます。その後のアクセスでは、クライアントで Interactive WebAssembly が使用されます。

インタラクティブ コンポーネントは、クライアントで実現されてインタラクティブ性が有効になる前に、サーバー上で事前レンダリングされます。この動作はデフォルトでオンになっていますが、オフにすることもできます。

この機能により、静的サイトでのナビゲーションがシングル ページ アプリケーション (SPA) のようにスムーズになります。

ある静的ページから別の静的ページに移動する場合、アプリはナビゲーションをインターセプトし、ターゲット ページのコンテンツのみを取得して、変更のみをDOMに適用します。こうすることで、別のページに移動して完全に再読み込みされるときに通常発生するページがちらつくことがなくなります。

これは、クライアント ブラウザーで実行されるスタンドアロンのインタラクティブ WebAssembly アプリです。

ブラウザでアプリに移動すると、アプリ バンドルがダウンロードされ、ブラウザのサンドボックス内で読み込まれて実行されます。

WebAssembly アプリは、プログレッシブ ウェブ アプリ(PWA) にすることもできます。

.NET 8 より前は、Web API を含む ASP.NET Core アプリケーション内で Blazor WebAssembly アプリがホストされるプロジェクト テンプレートがありました。これは Blazor Web アプリ プロジェクト テンプレートに置き換えられて削除されましたが、機能はそのまま残っています。

WebViewを使用してネイティブアプリ内でBlazorアプリを実行できるようにします。^[10]レンダリングはWebサーバーなしでホスティングプロセスで実行されます。

ハイブリッド アプリは、Windows Presentation FoundationまたはWinFormsアプリケーションでホストできます。

このアプローチは、 .NET MAUI を使用して Blazor でネイティブ モバイル アプリを構築する場合に使用されます。

意図された使用法は、サーバー駆動型のインタラクティブ コンポーネントを有効にし、変更を WebSocket を使用してクライアントに送信することでした。

コンポーネントが MVC Razor ページ内でレンダリングされました。

また、WebAssembly コンポーネントの事前レンダリングも可能になりました。

このホスティング モデルは正式には「Blazor Server」と呼ばれていました。

Blazor Web アプリに置き換えられ、廃止されました。

• asm.js – C または C++ で記述されたクライアント側 Web アプリを可能にする WebAssembly の前身
• Google Native Client –ブラウザのオペレーティング システムに関係なく、Web ブラウザでネイティブ コードを実行できるようにする、Google のWebAssembly の前身となる廃止予定のクライアント

• Engström, Jimmy (2021). Blazor による Web 開発: .NET 開発者が C# を使用してインタラクティブな UI を構築するための実践ガイド。Packt Publishing。ISBN 978-1800208728。
• Himschoot, Peter ( 2021 )。Microsoft Blazor: .NET 6 以降での Web アプリケーションの構築。Apress。ISBN 978-1484278444。
• Wright, Toi (2021). Blazor WebAssembly by Example: .NET、Blazor WebAssembly、C# を使用して Web アプリを構築するためのプロジェクトベースのガイド。Packt Publishing。ISBN 978-1800567511。
• セインティ、クリス（2022）。Blazor in Action。マニング・パブリケーションズ。ISBN 978-1617298646。

• 公式サイト
• GitHub上の ASP.NET Core
• Blazor School - Blazor コミュニティのドキュメント。
• Blazor University - 二次的な独立したソースからの Blazor ドキュメント