ASP.NET Core Blazor

Blazor へようこそ。

Blazor は .NET のフロントエンド Web フレームワークで、単一のプログラミング モデルでサーバー側のレンダリングとクライアント対話機能の両方をサポートします。

• C# を使用して充実した対話型 UI を作成します。
• .NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。
• モバイル ブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。
• .NET と Blazor を使って、ハイブリッド デスクトップ アプリとモバイル アプリを構築します。

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

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

Note

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

コンポーネント

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

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

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

通常、コンポーネント クラスは、.razor ファイル拡張子を持つ Razor マークアップ ページの形式で記述されます。 Blazor のコンポーネントは、公式には "Razor コンポーネント"、非公式には "Blazor コンポーネント" と呼ばれます。 Razor とは、開発者の生産性のために設計された、C# コードに HTML マークアップを結合するための構文です。 Razor を使用すると、Visual Studio の IntelliSense によるプログラミング サポートを利用して、同一ファイル内で HTML マークアップと C# を切り替えることができます。

Blazor では、UI コンポジションにとって自然な HTML タグを使用します。 次の Razor マークアップは、ユーザーがボタンを選択したときにカウンターをインクリメントするコンポーネントを示しています。

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

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

Blazor を使用してフルスタック Web アプリを構築する

Blazor Web App はコンポーネント ベースのアーキテクチャで、サーバー側のレンダリングと完全なクライアント側対話機能を単一のソリューションで提供します。これにより、サーバー側とクライアント側のレンダリングモードを切り替え、同じページで組み合わせることもできます。

Blazor Web App では、要求に応じてサーバーから HTML コンテンツを静的にレンダリングすることで、UI をブラウザーに迅速に配信できます。 大きな JavaScript バンドルをダウンロードしなくても、サーバー上で UI レンダリングが迅速に実行されるため、ページの読み込みが速くなります。 また、Blazor は、フォーム投稿によるナビゲーションの強化や非同期生成コンテンツのストリーミング レンダリングなど、サーバー レンダリングに対するさまざまな進歩的な機能強化により、ユーザー エクスペリエンスをさらに向上させることもできます。

Blazor では、ブラウザーとのリアルタイム接続を介してサーバーから UI 操作が処理される "対話型" サーバー側レンダリング (対話型 SSR) をサポートしています。 対話型 SSR を使用すると、クライアント アプリに期待するような豊富なユーザー エクスペリエンスを実現できますが、サーバー リソースにアクセスするための API エンドポイントを作成する必要はありません。 対話型ページのページ コンテンツはプリレンダリングされます。サーバー上のコンテンツが最初に生成され、レンダリングされたコントロールのイベント ハンドラーを有効にせずにクライアントに送信されます。 サーバーは、最初の要求に応じてできるだけ早くページの HTML UI を出力します。これにより、アプリはユーザーに対してより応答性が高くなります。

Blazor Web App では、アプリでダウンロードできる WebAssembly でビルドされた .NET ランタイムに依存する、クライアント側レンダリング (CSR) とのインタラクティビティをサポートします。 WebAssembly で Blazor を実行する場合、.NET コードはブラウザーの全機能にアクセスし、JavaScript と相互運用できます。 .NET コードは、クライアント コンピューター上の悪意のあるアクションに対してサンドボックスから提供される保護を使用して、ブラウザーのセキュリティ サンドボックスで実行されます。

Blazor アプリは、サーバーを使用せずに、ブラウザーで WebAssembly で実行されているアプリを完全にターゲットにすることができます。 "スタンドアロン Blazor WebAssembly アプリ" の場合、資産は、静的コンテンツをクライアントに提供できる Web サーバーまたはサービスに静的ファイルとして展開されます。 ダウンロードすると、スタンドアロン Blazor WebAssembly アプリをキャッシュし、プログレッシブ Web アプリ (PWA) としてオフラインで実行できます。

Blazor Hybrid を使用してネイティブ クライアント アプリを構築する

Blazor Hybrid は、ネイティブ クライアント アプリで、Web、モバイル、およびデスクトップ プラットフォーム用のネイティブおよび Web テクノロジを組み合わせた Razor コンポーネントの使用を可能にします。 コードは、.NET プロセスでネイティブに実行され、ローカルの相互運用チャネルを使って、埋め込まれた Web View コントロールに Web UI をレンダリングします。 ハイブリッド アプリでは WebAssembly は使われません。 ハイブリッド アプリは、C# と XAML を使ってネイティブのモバイルやデスクトップのアプリを作成するためのクロスプラットフォーム フレームワークである .NET Multi-platform App UI (.NET MAUI) を使用してビルドされます。

Blazor Hybrid は、以前のテクノロジからアプリを .NET MAUI に移行するための Windows Presentation Foundation (WPF) と Windows フォームをサポートしています。

次のステップ

Blazor チュートリアル - 最初の Blazor アプリをビルドするASP.NET Core Blazor でサポートされているプラットフォーム