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 を構築するためのフレームワークです。 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.

クライアント側の 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 アプリは、"コンポーネント" に基づいています。 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 クラスです。Components are .NET 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 を使用すると、IntelliSense サポートを利用して、同一ファイル内で HTML マークアップと C# を切り替えることができます。Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. また、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.

次の Razor マークアップは、別のコンポーネント内で入れ子にできるコンポーネント (Dialog.razor) を示しています。The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

ダイアログの本文の内容 (ChildContent) とタイトル (Title) は、UI にこのコンポーネントを使用するコンポーネントによって提供されます。The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes は、ボタンの onclick イベントによってトリガーされる C# メソッドです。OnYes is a C# method triggered by the button's onclick event.

Blazor では、UI コンポジションにとって自然な HTML タグを使用します。 uses natural HTML tags for UI composition. HTML 要素によってコンポーネントを指定し、タグの属性によってコンポーネントのプロパティに値を渡します。HTML elements specify components, and a tag's attributes pass values to a component's properties.

次の例では、Index コンポーネントで Dialog コンポーネントが使われています。In the following example, the Index component uses the Dialog component. ChildContentTitle は、属性と <Dialog> 要素の内容によって設定されています。ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor:Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

ブラウザー内で親 (Index.razor) にアクセスすると、ダイアログがレンダリングされます。The dialog is rendered when the parent (Index.razor) is accessed in a browser:

ブラウザーにレンダリングされた Dialog コンポーネント

このコンポーネントがアプリ内で使用されると、Visual Studio および Visual Studio Code では IntelliSense によって、構文およびパラメーター補完を利用して、開発を迅速化できます。When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

コンポーネントはレンダリングされると、"レンダリング ツリー" と呼ばれる、ブラウザーのドキュメント オブジェクト モデル (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 WebAssembly

重要

プレビュー段階の Blazor WebAssemblyBlazor WebAssembly in preview

Blazor サーバーは ASP.NET Core 3.0 でサポートされています。Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly は、ASP.NET Core 3.1 のプレビュー段階です。Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor WebAssembly は、.NET を使って対話型のクライアント側 Web アプリを構築するための、単一ページ アプリのフレームワークです。 WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly は、プラグインやコードのトランスパイルを伴わずにオープン Web の標準を使用して、モバイル ブラウザーなど、最新のすべての Web ブラウザー上で機能します。 WebAssembly uses open web standards without plugins or code transpilation and 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 相互運用") と呼ばれています。WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript 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 コードを実行します。 WebAssembly runs .NET code in the browser with WebAssembly.

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 ランタイムがブートストラップされ、アプリのアセンブリを読み込むようにそのランタイムが構成されます。 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 useability. 大規模なアプリは、ブラウザーへのダウンロードに比較的長い時間がかかり、ユーザー エクスペリエンスが損なわれます。A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly では、ダウンロード時間を短縮するためにペイロードのサイズが最適化されます。 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) Linker.
  • HTTP 応答が圧縮されます。HTTP responses are compressed.
  • .NET ランタイムとアセンブリがブラウザーにキャッシュされます。The .NET runtime and assemblies are cached in the browser.

Blazor サーバー Server

Blazor では、UI の更新プログラムを適用する方法からコンポーネントのレンダリング ロジックが分離されます。 decouples component rendering logic from how UI updates are applied. Blazor サーバーでは、ASP.NET Core アプリでサーバー上の Razor コンポーネントをホストするためのサポートが提供されます。 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.

ランタイムでは、ブラウザーからサーバーへの UI イベントの送信が処理されてから、コンポーネントの実行後に、サーバーからブラウザーへ返送された UI の更新が適用されます。The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

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

Blazor サーバーでは、サーバー上で .NET コードが実行され、SignalR 接続を介してクライアント上のドキュメント オブジェクト モデルとのやりとりが行われます Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

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. 詳細については、「ASP.NET Core Blazor JavaScript 相互運用機能」を参照してください。For more information, see ASP.NET Core Blazor JavaScript 相互運用機能.

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

Blazor では .NET Standard 2.0 が実装されます。 implements .NET Standard 2.0. .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