ASP.NET Core Blazor

へようこそ。

Blazor は、Blazor を使って対話型のクライアント側 Web UI を構築するためのフレームワークです。

• JavaScript の代わりに C# を使って、優れた対話型 UI を作成します。
• .NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。
• モバイル ブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。
• Docker などの最新のホスティング プラットフォームと統合します。
• .NET と Blazor を使って、ハイブリッド デスクトップ アプリとモバイル アプリを構築します。

• JavaScript の代わりに C# を使って、優れた対話型 UI を作成します。
• .NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。
• モバイル ブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。
• Docker などの最新のホスティング プラットフォームと統合します。

クライアント側の Web 開発に .NET を使用すると、次のような利点があります。

• JavaScript ではなく C# でコードを記述します。
• .NET ライブラリの既存の .NET エコシステムを活用します。
• サーバーとクライアント全体でアプリ ロジックを共有します。
• .NET のパフォーマンス、信頼性、およびセキュリティから利点が得られます。
• Windows、Linux、または macOS 上で、Visual Studio や Visual Studio Code などの開発環境を使って、生産性を維持します。
• 多機能で使いやすい安定した言語、フレームワーク、およびツールの共通セットに基づいて構築します。

Note

Blazor のクイック スタート チュートリアルについては、「Blazor」をご覧ください。

コンポーネント

Blazor アプリは、"Blazor" に基づいています。 Blazor のコンポーネントとは、ページ、ダイアログ、データ エントリ フォームなどの UI の要素です。

コンポーネントは、.NET アセンブリに組み込まれている次のような .NET C# クラスです。

• 柔軟な UI のレンダリング ロジックを定義する。
• ユーザー イベントを処理する。
• 入れ子にしたり再利用したりできる。
• クラス ライブラリまたは NuGet パッケージとして共有および配布できる。

通常、コンポーネント クラスは、.razor ファイル拡張子を持つ Razor マークアップ ページの形式で記述されます。 Blazor のコンポーネントは、公式には "Razor コンポーネント"、非公式には "Blazor コンポーネント" と呼ばれます。BlazorRazor Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。 Razor を使用すると、Visual Studio の Razor によるプログラミング サポートを利用して、同一ファイル内で HTML マークアップと C# を切り替えることができます。 また、Razor Pages と MVC でも Razor が使用されます。 要求/応答モデルを中心に構築される Razor Pages や MVC とは異なり、コンポーネントは特にクライアント側の UI ロジックとコンポジションに対して使用されます。

Blazor では、UI コンポジションにとって自然な HTML タグを使用します。 次の Razor マークアップは、ダイアログを表示し、ユーザーがボタンを選択したときにイベントを処理するコンポーネント (Dialog.razor) を示しています。

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

前の例の OnYes は、ボタンの onclick イベントによってトリガーされる C# メソッドです。 ダイアログのテキスト (ChildContent) とタイトル (Title) は、UI にこのコンポーネントを使用する次のコンポーネントによって提供されます。

Dialog コンポーネントは、HTML タグを使用して、別のコンポーネント内に入れ子にされます。 次の例では、Index コンポーネント (Pages/Index.razor) で前の Dialog コンポーネントが使われています。 タグの Title 属性は、タイトルの値を Dialog コンポーネントの Title プロパティに渡します。 Dialog コンポーネントのテキスト (ChildContent) は、<Dialog> 要素の内容によって設定されます。 Dialog コンポーネントを Index に追加すると、Dialog の構文およびパラメーター補完により開発を迅速化できます。

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

ブラウザー内で Index コンポーネントにアクセスすると、ダイアログがレンダリングされます。 ユーザーがボタンを選択すると、ブラウザーの開発者ツール コンソールに OnYes メソッドによって書き込まれたメッセージが表示されます。

コンポーネントはレンダリングされると、"レンダリング ツリー" と呼ばれる、ブラウザーのドキュメント オブジェクト モデル (DOM) のメモリ内表現になります。これは、柔軟かつ効率的な方法で UI を更新するために使われます。

Blazor Server

Blazor Server では、ASP.NET Core アプリでサーバー上の Razor コンポーネントをホストするためのサポートが提供されます。 UI の更新は SignalR 接続を介して処理されます。

ランタイムはサーバー上にとどまり、次の処理を行います。

• アプリの C# コードを実行しています。
• ブラウザーからサーバーへの UI イベントの送信。
• サーバーによって返送される、レンダリングされたコンポーネントへの UI の更新の適用。

ブラウザーと通信するために Blazor Server で使われる接続は、JavaScript 相互運用の呼び出しを処理するためにも使われます。

Blazor Server アプリでは、Razor ビューまたは Razor ページを使用して ASP.NET Core アプリで UI をレンダリングする従来のモデルとは異なる方法でコンテンツがレンダリングされます。 どちらのモデルでも、 言語を使用してレンダリング用の HTML コンテンツが記述されますが、マークアップのレンダリング "方法" が大きく異なります。

Razor ページまたはビューがレンダリングされると、Razor コードのすべての行で HTML がテキスト形式で出力されます。 レンダリング後、サーバーでは、生成されたすべての状態を含むページ インスタンスまたはビュー インスタンスが破棄されます。 ページに別の要求が発生すると、ページ全体が HTML に再レンダリングされ、クライアントに送信されます。

Blazor Server によって、HTML または XML ドキュメント オブジェクト モデル (DOM) に似たものを表示するコンポーネント グラフが生成されます。 コンポーネント グラフには、プロパティとフィールドに保持されている状態が含まれます。 Blazor は、コンポーネント グラフを評価してマークアップのバイナリ表現を生成します。マークアップは、レンダリングのためにクライアントに送信されます。 クライアントとサーバーの間で接続が確立されると、コンポーネントのプリレンダリング済みの静的な要素が対話型要素に置き換えられます。 サーバーでコンテンツをプリレンダリングすると、クライアントでのアプリの反応が良くなります。

コンポーネントがクライアント上でインタラクティブになると、ユーザーの操作やアプリのイベントによって UI 更新がトリガーされます。 更新が発生すると、コンポーネント グラフが再レンダリングされ、UI diff (相違) が計算されます。 この diff は、クライアントで UI を更新するために必要な DOM 編集の最小セットです。 diff はバイナリ形式でクライアントに送信され、ブラウザーによって適用されます。

コンポーネントはユーザーがクライアントから離れると破棄されます。

Blazor WebAssembly

Blazor WebAssembly は、.NET を使って対話型のクライアント側 Web アプリを構築するためのBlazor WebAssemblyです。 Blazor WebAssembly は、プラグインを使用せずに、または他の言語へのコードの再コンパイルなしに、オープンな Web 標準を使用します。 Blazor WebAssembly はモバイル ブラウザーも含めて、すべての最新の Web ブラウザーで動作します。

WebAssembly (略称 ) によって、Web ブラウザー内で .NET コードを実行することが可能になります。 WebAssembly は、ダウンロードを高速化し実行速度を最大限に高めるために最適化されたコンパクトなバイトコード形式です。 WebAssembly はオープンな Web 標準であり、プラグインを使わずに Web ブラウザー内でサポートされます。

WebAssembly コードを使用すると、JavaScript を介してブラウザーの全機能にアクセスできます。これは、"JavaScript の相互運用性" と呼ばれますが、"JavaScript 相互運用" や "JS 相互運用" とよく省略されます。 ブラウザーの WebAssembly 経由で実行される .NET コードは、ブラウザーの JavaScript サンドボックス内で実行されます。その際、クライアント コンピューター上での悪意のある操作に対して、サンドボックスに備わった保護が適用されます。

Blazor WebAssembly アプリをビルドしてブラウザーで実行する場合:

• C# コード ファイルと Razor ファイルが .NET アセンブリにコンパイルされます。
• そのアセンブリと .NET ランタイムがブラウザーにダウンロードされます。
• Blazor WebAssembly により .NET ランタイムがブートストラップされ、アプリのアセンブリを読み込むようにそのランタイムが構成されます。 Blazor WebAssembly ランタイムでは、JavaScript 相互運用を使って DOM 操作とブラウザー API の呼び出しが処理されます。

公開されているアプリのサイズである "ペイロードのサイズ" は、アプリの使用性に関する重要なパフォーマンス要因になります。 大規模なアプリは、ブラウザーへのダウンロードに比較的長い時間がかかり、ユーザー エクスペリエンスが損なわれます。 Blazor WebAssembly では、ダウンロード時間を短縮するためにペイロードのサイズが最適化されます。

• アプリが中間言語 (IL) トリマーによって公開される場合、アプリから未使用コードが除去されます。
• HTTP 応答が圧縮されます。
• .NET ランタイムとアセンブリがブラウザーにキャッシュされます。

Blazor Hybrid

ハイブリッド アプリでは、ネイティブと Web のテクノロジの組み合わせが使われます。 Blazor Hybrid アプリでは、ネイティブ クライアント アプリで Blazor が使われます。 Razor コンポーネントは、.NET プロセスでネイティブに動作し、ローカル環境の相互運用チャネルを使って、埋め込まれた Web View コントロールに Web UI をレンダリングします。 ハイブリッド アプリでは WebAssembly は使われません。 ハイブリッド アプリには次のテクノロジが含まれます。

• .NET Multi-platform App UI (.NET MAUI): C# と XAML でネイティブのモバイルおよびデスクトップ アプリを作成するためのクロスプラットフォーム フレームワーク。
• Windows Presentation Foundation (WPF): 解像度に依存せず、ベクターベースのレンダリング エンジンを使用する、最新のグラフィックス ハードウェアを利用するために構築された UI フレームワーク。
• Windows フォーム: Windows 用の高度なデスクトップ クライアント アプリを作成する UI フレームワーク。 Windows フォームの開発プラットフォームでは、コントロール、グラフィックス、データ バインディング、ユーザー入力など、幅広い一連のアプリ開発機能がサポートされています。

これらのフレームワークを使った Blazor Hybrid アプリの作成について詳しくは、次の記事をご覧ください。

• ASP.NET Core のホスティング モデル
• ASP.NET Core

JavaScript 相互運用

サード パーティ製の JavaScript ライブラリや、ブラウザーの API へのアクセスを必要とするアプリのために、コンポーネントは JavaScript と相互運用します。 コンポーネントでは、JavaScript で使用できるライブラリまたは API はいずれも使用することができます。 C# コードによる JavaScript コードの呼び出し、および JavaScript コードによる C# コードの呼び出しを行うことができます。

コードの共有と .NET Standard

Blazor は Blazor を実装します。これにより、Blazor プロジェクトは .NET Standard の仕様に準拠するライブラリを参照できます。 .NET Standard は、.NET 実装全体で共通した .NET API の標準仕様です。 .NET Standard のクラス ライブラリは、Blazor、.NET Framework、.NET Core、Xamarin、Mono、Unity など、さまざまな .NET プラットフォーム全体で共有することができます。

Web ブラウザー内で使用できない API (たとえば、ファイル システムへのアクセス、ソケットを開く機能、スレッドなど) からは、PlatformNotSupportedException がスローされます。

その他の技術情報

• WebAssembly
• ASP.NET Core のホスティング モデル
• ASP.NET Core を Blazor と共に使用する
• ASP.NET Core で .NET メソッドから JavaScript 関数を呼び出す
• ASP.NET Core で JavaScript 関数から .NET メソッドを呼び出す
• mono/mono GitHub リポジトリ
• C# のガイド
• ASP.NET Core の Razor 構文リファレンス
• HTML
• Awesome コミュニティへのリンク