.NET ヘルプ

Razor vs Blazor レイザー vs ブレイザー

**RazorとBlazorは、Visual Studio開発環境でWebアプリを作成するための最も人気のあるWeb UIフレームワークの2つです。 このブログ記事では、構文、相互作用、利点、欠点に基づいて、これら2つの.NET技術の類似点と相違点を検証します。 また、いくつかのコード例を使用したユースケースも示します。


ASP.NET CoreのRazorとBlazorとは何ですか?

Razor (レイザー)

Razorは、開発者がHTMLと埋め込みの.NETサーバーサイドコードを使用して動的にウェブページを作成することを可能にする、サーバーサイドマークアップ言語です。 RazorはC#またはVBで記述されたRazorページというWebページテンプレートファイルからWebページを生成します。 VBコードで書かれたRazorページは.vbhtmlファイル拡張子を使用し、C#コードで書かれたRazorページは.cshtmlファイル拡張子を使用します。

現代のASP.NETウェブアプリケーションはRazorをサポートしており、従来のASP.NETマークアップの代わりに使用してアプリケーションのビューコンポーネントを生成することができます。

Blazor

Blazorは、開発者が.NETプログラミング言語を使用して、インタラクティブなクライアント側インターフェイスアプリケーションを構築できるウェブアプリケーションフレームワークです。 Blazor で構築された Web アプリケーションは、Web サーバーではなく、Web ブラウザー クライアント内で実行されるシングルページ アプリケーション (SPA) です。 ブラウザ側のアプリ実行は、WebAssemblyによって可能になります。 WebAssemblyは、.NETソースコードを実行できる最新のWebブラウザすべてに見られるクロスプラットフォームの命令セットライブラリです。

Blazorを使用すると、開発者はJavaScriptを組み込むことなく、C#、HTML、CSSを使用して再利用可能でインタラクティブなクライアントサイドのWebコンポーネントを作成することができます。 さらに、これらのコンポーネントはC#で記述されているため、開発者は必要に応じて実装の詳細をソースコードとライブラリとしてクライアントとサーバーの間で行き来できる柔軟性を持っています。

Blazor は Razor コンポーネントを使用しますか?

Blazor は完全に Razor 構文をサポートしています。 以下の例を考えてみてください。ループや条件文など、Razorの完全なマークアップ機能セットを使用してBlazorアプリを構築することができます。

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}
@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}
'INSTANT VB TODO TASK: The following line could not be converted:
page "/HelloWorld" (Of h1) Example Component </h1> foreach(var person in People)
If True Then
	(Of h2) person.FirstName</h2>
End If
$vbLabelText   $csharpLabel

RazorとBlazorの関連性

BlazorとRazorの間には明確な関係があることがはっきりとわかります。 結局のところ、Blazorという名前自体が「ブラウザ」と「レイザー」という言葉の組み合わせです。

RazorとBlazorは、どちらもHTMLとC#を使用してWebアプリケーションを作成するために使用されます。 これらはオープンソースで無料のため、開発者はすぐに制限なしに利用することができます。 ASP.NETウェブアプリケーションを開発する際には、Razor構文を使用します。これはASP.NET CoreやASP.NET MVCとより類似しているためです。

Blazorは、Razor構文で記述された1つまたは複数のコンポーネントから柔軟でインタラクティブなユーザーインターフェイスを構築します。

この時点で、BlazorにおけるRazorの使用方法について重要な区別をしなければなりません。それは、ページ全体を構築するためではなく、コンポーネント(ボタン、ページ要素など)を構築するために使用されます。

さらに、Blazor内のRazorファイル(.chtml拡張子のファイル)は、正式にはRazorコンポーネントとして知られており、Blazorコンポーネントとは呼ばれません(多くの開発者の間ではこれら2つの言葉が交換可能に使われていますが)。

Razor PagesおよびBlazor Serverの動作

Razorは、全ページをブラウザに提供するためにMVCアプリケーション内で動作します。

Razor 対 Blazor、図 1: アクション中の Razor ページ

アクション中のRazor Pages

ユーザーがボタンやリンクをクリックすると、ブラウザはサーバーにリクエストを送信します。これがデータベースにヒットし、.cshtml Razor Views(またはRazorページ)を取得し、データとマークアップをまとめて、すべてをブラウザに返します(ページ全体を再レンダリングします)。

一方、BlazorはRazor構文で記述された一連の小さなコンポーネントを使用して、ウェブページ全体を作成することができます。

Razor対Blazor、図2: Blazorの動作中

Blazorの実践

これは、Blazor WebAssembly (Blazor WASM) の動作を示しています。

最初のBlazor WASMアプリケーションの呼び出しは、JavaScriptを使用して作成されたSingle Page Applicationのように、定義したすべてのコンポーネントを含む完全なプログラムを返します。

これらの要素にアクセスできるようになったブラウザは、情報やイベントに応じてこれらを表示、非表示、および更新することができます。

このようにして、Blazorアプリは、VueやAngularのような「最新の」JavaScriptライブラリ/フレームワークを使用して開発するアプリケーションに似ています。 Blazor アプリケーションはブラウザー内で実行中にデータを取得および送信するためにバックエンドにネットワーク呼び出しを行います。

それでは、BlazorアプリとRazorビューエンジンの利点と欠点について話し合いましょう。

BlazorとRazorの長所と短所

.NETフレームワークで構築されたインタラクティブなWebアプリケーションを作成する場合、BlazorとRazorはどちらも非常に好まれています。 これらの技術は、標準的なJavaScriptプロジェクトの主要なプログラミング言語としてC#を利用することからの新しい移行を提供します。

RazorやBlazorを使ってウェブアプリケーションを作成する際に考慮すべき利点と欠点をいくつか紹介します。

Blazor の利点

  • クライアントサイドBlazorは、WebAssemblyを使用してブラウザ内で直接.NETコードを実行し(これによりより迅速でネットワーク帯域幅の無駄を減らします)、動的なWebコンテンツを提供します。
  • サーバーサイド言語と同じ構文とロジックを使用しているため、すべての.NETライブラリおよびツールと互換性があります。

Blazorの欠点

  • Blazorを使用したクライアントサイドの.NETアプリケーション実行には、限られた.NETツールとデバッグサポートしか利用できません。
  • クライアントサイドBlazorのパフォーマンス上の利点は、サーバーサイドの実装には存在しません。

Razorの利点

  • Razorは、C#コードの論理(条件)挿入をウェブページに可能にします。
  • Razor は柔軟性が高く、さまざまなアプリの作成に使用できます。
  • Razorの構造はよく整理されています。

Razorの欠点

  • 動的なクライアント側のインタラクションを実装するには、JavaScriptが必要です。
  • 複数の自己完結型ページはRazorで管理および維持するのが難しい場合があります。

    IronPDFの際立った機能は、レイアウトとスタイルを保持したままIronPDFでHTMLをPDFに変換することです。 この機能は、レポート、請求書、ドキュメントなどのWebベースのコンテンツからPDFを生成するのに理想的です。 HTMLファイル、URL、およびHTML文字列はすべてPDFに変換できます。

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}
using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}
Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class
$vbLabelText   $csharpLabel

結論

RazorはAPIロジックおよびサーバーサイドのテンプレート処理を扱うことができますが、JavaScriptベースでないクライアントサイドのロジックを扱うことはできません。 Blazorは、プログラマーがクライアントとサーバーサイドの機能をC#だけで扱うことを可能にします。 Razorはテンプレートのためのマークアップ構文です。 それはサーバーサイドのコードをHTMLに組み込みます。 一方で、BlazorはSPAフレームワークであり、状況に応じてBlazor WebAssemblyまたはBlazor Serverのいずれかで実行できます。

IronPDFを発見すると、RazorアプリケーションおよびBlazorアプリケーションでPDFファイルを作成、読み取り、更新、操作する最も簡単な方法が得られます。 IronPDFは、Excel、PDF、バーコード、QRコード、画像を使用してRazorまたはBlazor Webアプリを作成するのに役立つ5つの有用なライブラリが含まれているIron SoftwareのIron Suiteの一部です。

Iron Suiteは個人使用のために無料で利用可能です。 商用ライセンスの取得に関する詳細情報は、Iron Suite Licensing Informationをご覧ください。

チペゴ
ソフトウェアエンジニア
チペゴは優れた傾聴能力を持ち、それが顧客の問題を理解し、賢明な解決策を提供する助けとなっています。彼は情報技術の学士号を取得後、2023年にIron Softwareチームに加わりました。現在、彼はIronPDFとIronOCRの2つの製品に注力していますが、顧客をサポートする新しい方法を見つけるにつれて、他の製品に関する知識も日々成長しています。Iron Softwareでの協力的な生活を楽しんでおり、さまざまな経験を持つチームメンバーが集まり、効果的で革新的な解決策を提供することに貢献しています。チペゴがデスクを離れているときは、良い本を楽しんだり、サッカーをしていることが多いです。
< 以前
Blazorフレームワークとは(開発者向けチュートリアルの仕組み)
次へ >
NuGetとは何ですか?