Blazor vs Razor: The Difference Solved

BlazorコンポーネントとRazorコンポーネントの用語は、同じ意味で広く使用されています。しかし、BlazorとRazorは別物です。RazorとBlazorのすべてを学び、それぞれの使用方法を確認してくださいIgnite UI。

Jason Beres Last Updated Feb 18, 2025 6min read

.NET 6 のリリースと、C# 開発者がシングルページの Web アプリケーションを作成するための頼りになるソリューションとしてBlazorをめぐる誇大広告のサイクルにより、「BlazorとRazorの違いは何ですか」という疑問が浮かび上がります。

BlazorとRazorは 2 つの異なる機能を表すため、直接比較することはできませんが、多くの場合、BlazorコンポーネントとRazorコンポーネントの用語は同じ意味で広く使用されています。

この記事では、BlazorとRazorの違いを明確にし、それぞれの使用方法を示しますIgnite UI for Blazor。また、Ignite UIの Card View コンポーネントを使用して .NET 6 アプリを構築するため、実際のアプリケーションでBlazorとRazorに慣れることができます。

Try Ignite UI for Blazor

Blazorとは

Blazorは無料のオープンソース Web フレームワークであり、開発者は JavaScript の代わりに C#、HTML コード、Razor構文を使用して対話型の Web UI を作成できます。Blazorの仕組みは、WebAssembly を使用してクライアントベースのアプリを作成し、ASP.NET を使用してサーバー側アプリケーションを作成することです。Server アプリは SignalR を使用して常時接続を介してブラウザーと通信しますが、WebAssembly はブラウザーで直接実行されます。

私たちのブログでは、Blazor、Blazor WebAssembly、Blazor Server の詳細な概要を紹介しています。したがって、さらに深く掘り下げたい場合は、Blazor Server vs. WebAssembly Blazorブログ投稿をお読みください。

What Is Razor

Blazorはフレームワークですが、RazorまたはRazor Pages はテンプレート (View) エンジンです。Razor構文は、Razorマークアップ、C#、HTML を組み合わせて、動的な Web コンテンツを作成します。通常、RazorはASP.NET MVCビューの電源供給に使用されます。そのため、MVC ビューを作成するたびに、通常はRazor構文を使用してデータをマークアップにバインドします。MVC アプリでは、Razorページはサーバー上で処理され、1 つの HTML ページとしてクライアントに送信されます。ブラウザーでページが更新されると、ページはサーバー上で再処理され、クライアントに送り返されます。

Razor vs Blazor: それらの間の違いとリンクが解決されました

Blazorは、Razorコンポーネントを活用して動的 HTML を生成するフレームワークです。RazorとBlazorの最大の違いは、Razorは C# を使用したマークアップ言語であるのに対し、Blazorは C# コードを実行し、ブラウザーでRazorビューエンジンを使用できるフレームワークである点です。

また、BlazorコンポーネントとRazorコンポーネントについてはどうでしょうか?

Razorコンポーネントは、.razor 拡張子で実装されたBlazorアプリの基本的な UI 要素を表すマークアップとコードの単位です。つまり、Blazor Razorコンポーネントを使用して UI を作成するため、Razorコンポーネントを記述し、Blazorをクライアント側のホスティングモデルとして利用できます。

これは、Ignite UIでBlazorとRazorを使用する方法です

開始するには、NodeJS と Visual Studio Code の両方をマシンにインストールする必要があります。

ステップ 1 – 新しいBlazorプロジェクトを作成する

Visual Studio 2022 を起動し、スタートページで [新しいプロジェクトの作成] をクリックし、Blazor Web Assembly アプリテンプレートを選択して、[次へ] をクリックします。プロジェクト名と説明を入力したら、[作成] をクリックします。

Create a Blazor WebAssembly App in Visual Studio 2022

ステップ2–パッケージIgnite UI for Blazorインストールする

ソリューションまたはプロジェクトを右クリックし、[ソリューションの NuGet パッケージの管理] を選択します。次に、パッケージマネージャーダイアログの [参照] タブを開き、Infragistics パッケージソースを選択して、IgniteUI.Blazor NuGet パッケージをインストールします。

Blazor Nuget パッケージを Visual Studio プロジェクトに追加する

Step 3 – Register Ignite UI for Blazor component

Program.csファイルを開き、ビルダーの後に以下を追加してIgnite UI for Blazorサービスを登録します。Services.AddScoped...線：

builder.Services.AddIgniteUIBlazor();

ステップ4–Imports.razorファイルを更新する

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

手順 5 – Pages/_Layout.cshtml ファイルを更新する

スタイルシートを<ヘッド>要素の\wwwroot\index.htmlファイル：

<head>
	...
	<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

Step 6 – Add Ignite UI for Blazor Component

Ignite UI for Blazorコンポーネントを Razor ページに追加します。

<IgbCard style="width:350px">
	<IgbCardMedia>
		<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
	</IgbCardMedia>
	<IgbCardHeader>
		<h4>Jane Doe</h4>
		<h6>Professional Photographer</h6>
	</IgbCardHeader>
	<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
		Photography is a way of feeling, of touching,
		of loving. What you have caught on film is captured forever...
		it remembers little things, long after you have
		forgotten everything.</IgbCardContent>
	<IgbCardActions>
		<IgbButton>More Info</IgbButton>
	</IgbCardActions>
</IgbCard>

Step 7 – Build & Run your App

これで準備完了です。[実行]ボタンをクリックして、Ignite UIでカードビューを実行している新しいBlazorアプリをビルドして実行します。

Building Enterprise Blazor Apps with App Builder

さて、開発時間を大幅に短縮したい場合は、App Builder ^тмのようなローコードアプリメーカーを使用できます。

App Builder ^тмは、設計からコードまですべてを合理化する、まったく新しいクラウドベースのWYSIWYGローコード開発プラットフォームおよびドラッグアンドドロップアプリビルダーです。このソフトウェアの主な目的は、UI デザインとアプリ作成の背後にある複雑さを排除しながら、ユーザーと開発チーム全体がビジネスロジックのドメイン専門知識に集中できるようにすることです。手作業でコーディングすることなく、以前よりもはるかに高速にビジネスアプリをBlazor (およびAngular)で構築できます。さらに、プロジェクトをzipファイルとしてダウンロードするか、GitHubで公開するかを選択できます。

[View:https://youtu.be/WSQ38lLacH4:578:348]

市場に出回っている他のローコードツールと比較すると、主な差別化要因は、^{App Builderが}デザインシステム、実際のUIコンポーネント、および60+を超えるUIコントロールによってバックアップされていることです。最も優れた点の 1 つは、App BuilderがクリックするだけでBlazor (およびAngular) で本番環境に対応したコードを生成するため、コードを検査して、Blazorアプリ (またはAngularアプリ) の外観と操作性を簡単にプレビューできることです。また、データグリッド、チャート、Swagger UI、UIコントロール、カスタマイズオプション、テーマ設定、ブランディングなど、現代のビジネスアプリを構築するために必要なすべてのフル機能のコンポーネントについて考えると、WYSIWYGドラッグアンドドロップApp Builder^{ソフトウェア}もこれを提供します。

つい最近、App Builderを使用してBlazorアプリを構築し、Blazorコードを10分以内に生成するのに役立つ包括的なチュートリアルを公開しました。したがって、このBlazorステップバイステップガイドにすぐにジャンプできます。

Blazor