インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

Blazor と Razor - その違いについて

.NET 6 がリリースされ、Blazor がC#の開発者にシングルページアプリケーションを書くためのWebフレームワークとして注目される中、"Blazor と Razor の違いは何か ?"という疑問が出てきました。

Blazor と Razor は直接比較できるものではありませんが、Blazor コンポーネントと Razor コンポーネントという用語が広く使われています。

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

この記事はインフラジスティックス本社により作成された英文記事の翻訳により作成されました。
原文は以下よりご確認いただけます。
Jason Beres. 2022.5 Blazor vs Razor: The Difference Solved
www.infragistics.com

Blazor とは

Blazor は、オープンソースの無料のWebフレームワークで、開発者はJavaScriptの代わりにC#、HTMLコード、Razor構文でインタラクティブなWeb UIを作成できます。Blazor WebAssembly アプリは、WebAssemblyでクライアントベースのアプリケーションを、ASP.NETでサーバーサイドのアプリケーションを作成します。Blazor WebAssembly はブラウザで直接実行されます。Blazor Server アプリはSignalRを使った常時接続でブラウザと通信し、サーバーサイドで実行されます。

Blazor、Blazor WebAssembly、Blazor Server については、弊社のブログで詳しく紹介しています。より深く知りたい場合は、「Blazor Server と Blazor WebAssembly: 特徴をまとめてみました」のブログをご覧ください。

Razor とは

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

Razor と Blazor - その違いと関連性について

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

つまり、Blazor と Razor コンポーネントの関係は?

Razor コンポーネントはマークアップとコードの単位で、.razor 拡張子で実装された Blazor アプリの基本的な UI 要素を構成します。言い換えれば、Blazor は Razor コンポーネントを使って UI を作成します。つまり、Razor コンポーネントを作ることによって、Blazor アプリケーションを構築することができるのです。

Blazor で Ignite UI for Blazor を Razor コンポーネント内で使う方法

事前に、Visual Studio 2022 をインストールしておいてください。

ステップ 1 - Blazor プロジェクトの新規作成

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

ステップ 2 - Ignite UI for Blazor パッケージのインストール

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

ステップ 3 - Ignite UI for Blazor コンポーネントを登録する

Program.cs ファイルを開き、 builder.Services.AddScoped ... の行の後に以下を追加して Ignite UI for Blazor Service を登録します。

builder.Services.AddIgniteUIBlazor();

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

IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。

@using IgniteUI.Blazor.Controls

ステップ 5 - Pages/_Layout.cshtml ファイルを更新する

スタイルシートを、<head>に追加します。

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

ステップ 6 - Ignite UI for Blazor コンポーネントを追加する

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>

ステップ 7 - ビルドと実行

これで準備は完了です。実行ボタンをクリックして、Ignite UIのCard Viewで動作するBlazorアプリをビルドして実行しましょう!

App Builderでエンタープライズ向けBlazorアプリを構築する

開発期間を大幅に短縮したい場合は、App Builderのようなローコードツールが利用できます。

App Builderは、デザインからコードまでを効率化できます。新しいクラウドベースのWYSIWYGローコード開発プラットフォームで、ドラッグ&ドロップでアプリケーションのUIを作成できます。。このソフトウェアの主な目的は、UI設計とアプリ作成の背後にある複雑さを解消する一方で、お客様と開発チーム全体がビジネスロジックのためのドメイン領域に集中できるようにすることです。App Builderを利用して、Blazor(またはAngular)でビジネスアプリを構築すると、HTML、CSSをコーディングをすることなく、以前よりずっと速くプロトタイプを構築できます。さらに、プロジェクトをZIPファイルとしてダウンロードしたり、GitHubへプッシュするオプションもあります。

市場の他のローコードツールと比較して、App Builderがデザインシステム、実際に利用できる60以上のUIコンポーネントによってバックアップされていることが主な差別化要因です。App Builderは、Blazor(またはAngular)の実行可能なコードをワンクリックで生成できる上、App Builder上で見た目や操作を簡単にプレビューできることが最大の特徴です。また、データグリッド、チャート、Swagger UI、UIコントロール、カスタマイズオプション、テーマ設定、ブランディングなど、現代のビジネスアプリを構築するために必要なすべてのフル機能のコンポーネントについて考えてみてください。それがまさに、App Builderで提供されていることがわかります。

App Builderの概要については以下の動画をご覧ください。

www.youtube.com

技術サポート・無料オンライン相談会をご利用ください

インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報にたどり着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。
技術サポートへの問い合わせ方法を確認する
無料オンライン相談会を予約する