ASP.NET Core Blazor の概要Introduction to ASP.NET Core Blazor

作成者: Daniel RothLuke LathamBy Daniel Roth and Luke Latham

Blazor へようこそ。Welcome to Blazor!

Blazor は、.NET を使って対話型のクライアント側 Web UI を構築するためのフレームワークです。Blazor is a framework for building interactive client-side web UI with .NET:

  • JavaScript の代わりに C# を使って、優れた対話型 UI を作成します。Create rich interactive UIs using C# instead of JavaScript.
  • .NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。Share server-side and client-side app logic written in .NET.
  • モバイル ブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Docker などの最新のホスティング プラットフォームと統合します。Integrate with modern hosting platforms, such as Docker.

クライアント側の Web 開発に .NET を使用すると、次のような利点があります。Using .NET for client-side web development offers the following advantages:

  • JavaScript ではなく C# でコードを記述します。Write code in C# instead of JavaScript.
  • .NET ライブラリの既存の .NET エコシステムを活用します。Leverage the existing .NET ecosystem of .NET libraries.
  • サーバーとクライアント全体でアプリ ロジックを共有します。Share app logic across server and client.
  • .NET のパフォーマンス、信頼性、およびセキュリティから利点が得られます。Benefit from .NET's performance, reliability, and security.
  • Windows、Linux、macOS 上の Visual Studio を使って生産性を維持します。Stay productive with Visual Studio on Windows, Linux, and macOS.
  • 多機能で使いやすい安定した言語、フレームワーク、およびツールの共通セットに基づいて構築します。Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

コンポーネントComponents

Blazor アプリは、"コンポーネント" に基づいています。Blazor apps are based on components. Blazor のコンポーネントとは、ページ、ダイアログ、データ エントリ フォームなどの UI の要素です。A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

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

通常、コンポーネント クラスは、.razor ファイル拡張子を持つ Razor マークアップ ページの形式で記述されます。The component class is usually written in the form of a Razor markup page with a .razor file extension. Blazor のコンポーネントは、正式には " Razor コンポーネント" と呼ばれます。Components in Blazor are formally referred to as Razor components. Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor を使用すると、Visual Studio の IntelliSense によるプログラミング サポートを利用して、同一ファイル内で HTML マークアップと C# を切り替えることができます。Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. また、Razor Pages と MVC でも Razor が使用されます。Razor Pages and MVC also use Razor. 要求/応答モデルを中心に構築される Razor Pages や MVC とは異なり、コンポーネントは特にクライアント側の UI ロジックとコンポジションに対して使用されます。Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor では、UI コンポジションにとって自然な HTML タグを使用します。Blazor uses natural HTML tags for UI composition. 次の Razor マークアップは、ダイアログを表示し、ユーザーがボタンを選択したときにイベントを処理するコンポーネント (Dialog.razor) を示しています。The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<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# メソッドです。In the preceding example, OnYes is a C# method triggered by the button's onclick event. ダイアログのテキスト (ChildContent) とタイトル (Title) は、UI にこのコンポーネントを使用する次のコンポーネントによって提供されます。The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

Dialog コンポーネントは、HTML タグを使用して、別のコンポーネント内に入れ子にされます。The Dialog component is nested within another component using an HTML tag. 次の例では、Index コンポーネント (Pages/Index.razor) で前の Dialog コンポーネントが使われています。In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. タグの Title 属性は、タイトルの値を Dialog コンポーネントの Title プロパティに渡します。The tag's Title attribute passes a value for the title to the Dialog component's Title property. Dialog コンポーネントのテキスト (ChildContent) は、<Dialog> 要素の内容によって設定されます。The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Dialog コンポーネントを Index に追加すると、Visual Studio の IntelliSense の構文およびパラメーター補完により開発を迅速化できます。When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@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 コンポーネントにアクセスすると、ダイアログがレンダリングされます。The dialog is rendered when the Index component is accessed in a browser. ユーザーがボタンを選択すると、ブラウザーの開発者ツール コンソールに OnYes メソッドによって書き込まれたメッセージが表示されます。When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

Index コンポーネントの内部に入れ子になっているブラウザーでレンダリングされたダイアログ コンポーネント。

コンポーネントはレンダリングされると、"レンダリング ツリー" と呼ばれる、ブラウザーの ドキュメント オブジェクト モデル (DOM) のメモリ内表現になります。これは、柔軟かつ効率的な方法で UI を更新するために使われます。Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly は、.NET を使って対話型のクライアント側 Web アプリを構築するためのシングルページ アプリ (SPA) フレームワークです。Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly は、プラグインを使用せずに、または他の言語へのコードの再コンパイルなしに、オープンな Web 標準を使用します。Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly はモバイル ブラウザーも含めて、すべての最新の Web ブラウザーで動作します。Blazor WebAssembly works in all modern web browsers, including mobile browsers.

WebAssembly (略称 wasm) によって、Web ブラウザー内で .NET コードを実行することが可能になります。Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly は、ダウンロードを高速化し実行速度を最大限に高めるために最適化されたコンパクトなバイトコード形式です。WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly はオープンな Web 標準であり、プラグインを使わずに Web ブラウザー内でサポートされます。WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly コードを使用すると、JavaScript を介してブラウザーの全機能にアクセスできます。これは、"JavaScript の相互運用性" と呼ばれますが、"JavaScript 相互運用" や "JS 相互運用" とよく省略されます。WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. ブラウザーの WebAssembly 経由で実行される .NET コードは、ブラウザーの JavaScript サンドボックス内で実行されます。その際、クライアント コンピューター上での悪意のある操作に対して、サンドボックスに備わった保護が適用されます。.NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly は WebAssembly を使用してブラウザーで .NET コードを実行します。

Blazor WebAssembly アプリをビルドしてブラウザーで実行する場合:When a Blazor WebAssembly app is built and run in a browser:

  • C# コード ファイルと Razor ファイルが .NET アセンブリにコンパイルされます。C# code files and Razor files are compiled into .NET assemblies.
  • そのアセンブリと .NET ランタイムがブラウザーにダウンロードされます。The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly により .NET ランタイムがブートストラップされ、アプリのアセンブリを読み込むようにそのランタイムが構成されます。Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Blazor WebAssembly ランタイムでは、JavaScript 相互運用を使って DOM 操作とブラウザー API の呼び出しが処理されます。The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

公開されているアプリのサイズである "ペイロードのサイズ" は、アプリの使用性に関する重要なパフォーマンス要因になります。The size of the published app, its payload size, is a critical performance factor for an app's usability. 大規模なアプリは、ブラウザーへのダウンロードに比較的長い時間がかかり、ユーザー エクスペリエンスが損なわれます。A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly では、ダウンロード時間を短縮するためにペイロードのサイズが最適化されます。Blazor WebAssembly optimizes payload size to reduce download times:

  • アプリが中間言語 (IL) トリマーによって公開される場合、アプリから未使用コードが除去されます。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • HTTP 応答が圧縮されます。HTTP responses are compressed.
  • .NET ランタイムとアセンブリがブラウザーにキャッシュされます。The .NET runtime and assemblies are cached in the browser.
  • アプリが中間言語 (IL) リンカーによって公開される場合、アプリから未使用コードが除去されます。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP 応答が圧縮されます。HTTP responses are compressed.
  • .NET ランタイムとアセンブリがブラウザーにキャッシュされます。The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor では、UI の更新プログラムを適用する方法からコンポーネントのレンダリング ロジックが分離されます。Blazor decouples component rendering logic from how UI updates are applied. Blazor Server では、ASP.NET Core アプリでサーバー上の Razor コンポーネントをホストするためのサポートが提供されます。Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI の更新は SignalR 接続を介して処理されます。UI updates are handled over a SignalR connection.

ランタイムでは以下が処理されます。The runtime handles:

  • ブラウザーからサーバーへの UI イベントの送信。Sending UI events from the browser to the server.
  • サーバーによって返送される、レンダリングされたコンポーネントへの UI の更新の適用。Applying UI updates to the rendered component that are sent back by the server.

ブラウザーと通信するために Blazor Server で使われる接続は、JavaScript 相互運用の呼び出しを処理するためにも使われます。The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

Blazor Server では、サーバー上で .NET コードが実行され、SignalR 接続を介してクライアント上のドキュメント オブジェクト モデルとのやりとりが行われます

JavaScript 相互運用JavaScript interop

サード パーティ製の JavaScript ライブラリや、ブラウザーの API へのアクセスを必要とするアプリのために、コンポーネントは JavaScript と相互運用します。For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. コンポーネントでは、JavaScript で使用できるライブラリまたは API はいずれも使用することができます。Components are capable of using any library or API that JavaScript is able to use. C# コードによる JavaScript コードの呼び出し、および JavaScript コードによる C# コードの呼び出しを行うことができます。C# code can call into JavaScript code, and JavaScript code can call into C# code.

コードの共有と .NET StandardCode sharing and .NET Standard

Blazor は .NET Standard を実装します。これにより、Blazor プロジェクトは .NET Standard の仕様に準拠するライブラリを参照できます。Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard は、.NET 実装全体で共通した .NET API の標準仕様です。.NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard のクラス ライブラリは、Blazor、.NET Framework、.NET Core、Xamarin、Mono、Unity など、さまざまな .NET プラットフォーム全体で共有することができます。.NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

Web ブラウザー内で使用できない API (たとえば、ファイル システムへのアクセス、ソケットを開く機能、スレッドなど) からは、PlatformNotSupportedException がスローされます。APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

その他の技術情報Additional resources