BlazorとReactの比較: テクノロジーを探る

Reactを使用してシングルページアプリケーションを開発する場合は、JavaScriptを使用する必要があります。ただし、急な学習曲線、パッケージをアプリに持ち込む外部ライブラリに依存している限られたライブラリ、反復的なパフォーマンスの問題などに対処したくない場合は、Blazor.

このフレームワークの良いところは、Reactと比較したときのものです。

• 最新のWeb標準を活用しています。
• Blazorサーバー側のデプロイやWebAssemblyを使用したクライアント側のいずれにも、アドオンや追加のプラグインは必要ありません。
• サーバー側とクライアント側はどちらも C# で記述されています。
• ライブラリとコードをより簡単に共有できます。

テクノロジーをより深く理解するために、このブログ投稿では、BlazorとReactの主な違いを説明し、チームの専門知識、アプリの複雑さ、パフォーマンスのニーズ、長期的な保守性に基づいて情報に基づいた選択を行うのに役立ちます。

クイックBlazorとReactの比較

通常、コミュニティからのフィードバック (Reddit など) が反映されます。NET 開発者は、言語コンテキストの切り替えを減らし、インフラストラクチャを簡略化するためのBlazorを歓迎しています。一方、フロントエンドのスペシャリストは、柔軟性、エコシステムの深さ、パフォーマンスのチューニングのためにReactを好みます。

パフォーマンスのリアリティチェックでは、次のことが示されます。 

• Reactは通常、スリムなペイロードと遅延読み込み戦略のおかげで、初回の読み込みで勝ちます。
• WASM Blazor起動が遅くなる可能性がありますが、AOT (Ahead-of-Time コンパイル) と最適化により、ランタイムのパフォーマンスが大幅に向上します。
• Blazor Serverは、ほぼ瞬時に初期負荷を提供しますが、常時接続とサーバー側の状態管理が必要です。

しかし、知っておくべきことはここにあります。

	React	Blazor
Type	フロントエンドライブラリ – WebサイトのクライアントUIとインタラクションに焦点を当てています。	Full Framework – client side (WASM) and server side (ASP.NET)
Developer	フェイスブック	マイクロソフト
License	MIT	Apache
Language	JavaScript/JSX/TypeScript	C#
Performance	軽量で優れたパフォーマンスを発揮します。	WASM クライアント側アプリの初回負荷は高くなります。サーバー側の高性能。
学習曲線	急な学習曲線	簡単に学べる
PWA のサポート	はい	Yes (Blazor WebAssembly)
ルーティング	はい	はい
Http Client	含まれていないもの	はい
依存関係の挿入	含まれていないもの	はい
クライアントごとにアクティブな接続が必要	No	はい
各クライアントのコンポーネントの状態をサーバー側に格納します	No	Yes (Blazor Server)
コンポーネントのスコープ付きスタイル	はい	はい
Static Deployment	はい	Yes (Blazor WebAssembly)
Server-Side Rendering	はい	はい
SEO /クローラーに最適化	はい	はい
バンドルサイズ	12KB を gzip 圧縮しましたが、クライアント レンダリング フレームワークのみで、フルスタックではありません。	Blazorサーバーでは最小限です。クライアント側の WASM アプリの .NET Framework では 393 KB から最大 780 KB。
ツーリング	CLI と多くのサードパーティ オプション。	CLI、Visual Studio、およびサードパーティのオプション。
プロダクションレディ	Reactは、Uber、Drop Box、Twitter、PayPal、Netflix、Walmartなどの企業による長年の実戦配備により、今日から本番環境に対応しています。	はい

Blazor概要 – 現状/機能

Blazorは、CSSやHTMLなど、すでに存在するWeb技術に基づいています。ただし、このフレームワークでは、JavaScript の代わりにRazorと C# 構文を使用して、再利用可能なインタラクティブな Web ユーザー インターフェイスを開発することもできます。

• これは、WebAssembly で実装されたクライアントベースのアプリケーションに対して実行できます。
• そして、ASP.NET を備えたサーバー側アプリケーション。

サーバーとクライアントの両方が C# で記述されているため、ライブラリとコードを共有できます。これは、.NET を使用するときに、現代的で活気のある単一ページ アプリケーション プラットフォームの開発を可能にするプラットフォームを提供します。

Reactと比較した場合のBlazorの良いところは、最新のWeb標準を活用していることです。さらに、Blazorは、Blazorサーバー側のデプロイや WebAssembly を使用したクライアント側のいずれにも、アドオンや追加のプラグインを必要としません。

WebAssembly とは?

WebAssembly は一般に略して Wasm と呼ばれます。これは、最新のWebブラウザで実行できるWeb標準です。これにより、Webプラットフォームに言語の多様性がもたらされます。JavaScript、HTML、CSSとは異なり、Wasmは実行可能プログラム用のバイナリ命令形式であり、JavaScriptよりも高速で、コンパイル言語に非常に近いように設計されています。それはまだインタープリター言語ですが、人間ではなく機械によって解釈されるように設計されています。Wasmは、最新のブラウザをネイティブに実行します。

Versions of Blazor

開発者は、Blazorアプリを開発する際に、サーバー上の ASP.NET のコンテキストで実行されるBlazorサーバーと、クライアント側のWebAssembly実行モデルであるBlazorクライアントという2つのオプションがあります。

• Blazorサーバー–ASP.NET Core Server は、Blazor年に開発されたアプリのホストです。このホスティングは ASP.NET Razor形式で行われます。リモートエリアのクライアントはシンクライアントとして機能するため、サーバが大きな処理負荷を負担します。クライアントのWebブラウザは、小さなページをダウンロードし、そのユーザーインターフェイスを更新します。これは 1 つの接続で行われます。このサーバーは、.NET Core 3 の一部としてリリースされました。

• Blazor WebAssembly– このモードでは、シングルページ アプリは実行前にクライアントの Web ブラウザーにダウンロードされます。ここでは、ダウンロードサイズはBlazorサーバーに比べて大きくなります。ただし、アプリによって違いがあります。また、処理は完全にクライアントハードウェア上で行われます。迅速な応答時間は、このアプリタイプの有益な側面です。名前からわかるように、クライアント側のフレームワークはJavaScriptではなくWebAssemblyで書かれています。これらを一緒に使用することもできます。

​Blazor WebAssemblyの詳細と、なぜそれが多くの話題を呼んでいるのかをご覧ください。

主な機能

Blazor比較的新しいので、MicrosoftのWebエコシステムの開発をフォローしていない場合は、まだ聞いたことがない可能性がありますBlazor。 ただし、Blazorについてはいくつかの一般的な誤解がありますので、Blazorがテーブルにもたらすものを見てみましょう。

CSS と HTML

Blazorにアプローチするときによく聞かれる質問の1つは、CSSについてです。Blazorがコンポーネントの作成にRazorテンプレートを使用すると、結果はブラウザで HTML レンダリングされます。Blazorによって生成されるCSSとHTMLは、他のCSSやHTMLとブラウザと変わりません。つまり、Sass、CSSカスタムプロパティ、レスポンシブデザインなどのプリプロセッサを含むすべてのCSS機能をBlazorで使用できるということです。

CSS Isolation

CSS Isolation はBlazorの一部です。この機能は、ライブラリとBlazorコンポーネント (Blazor Data Gridなど​) 間のスタイルの競合を防ぐのに役立ちます。この機能はビルド時に生成されます。この間、Blazorは HTML 属性に対応する CSS セレクターの識別子にアタッチされます。

フォームコンポーネント

Blazorには、組み込みの入力コンポーネントやフォームコンポーネントなど、HTML 生成を支援する追加機能があります。検証を使用してフォームを作成する一般的なタスクは、これらのオプションコンポーネントによって抽象化されます。最終的に、コンポーネントは標準の HTML をレンダリングします。彼らは、いくつか例を挙げると、aria-、id、classなどの標準のHTML属性を完全に使用できます。

現代のソフトウェアエンジニアの多くは、特にJavaScriptの代わりにWebAssemblyをターゲットにしている場合、フロントエンドフレームワークにおける次の大きなものを具現化したものとしてBlazorと考えています。Blazor、Microsoftは、開発者がWebAssemblyを使用してアプリケーションを構築できるようにすることで、WebAssemblyに関する話題を倍増させていますBlazor。

Blazor JS との比較React見てみましょう。

Reactの概要 – 現在の状態/機能:

Reactは、洗練された UI を構築するために設計された、柔軟で効率的かつ宣言的な JavaScript ライブラリです。もちろん、ReactとBlazorを比較すると、どちらもインタラクティブでリッチな最新のクライアントサイドアプリケーション用のクライアントサイドライブラリ/フレームワークであるという同じ機能を共有しています。

しかし、これが他と違う点です。

UI開発用に構築 

• 開発者は、データグリッド、チャートなど、再利用可能なUIコンポーネントをより効率的な方法で構築できます。
• 最新のクライアント側のWebアプリケーションの作成に最適です。

言語とプラットフォームにとらわれない

• 主にTypeScript/JavaScriptを使用します。
• 他のバックグラウンドを持つ開発者も簡単に手に取ることができます。
• React Native では、クロスプラットフォーム開発が可能で、共有コードを使用して iOS、Android、Web アプリを構築できます。

シンプルさと再利用性のために作成 

• Angularなどの以前のフレームワークでは面倒だったコーディング タスクを簡素化するために Facebook によって開発されました。
• コンポーネントベースのアーキテクチャを推進し、開発者が複雑な UI を分解し、コードを効率的に再利用できるようにします。

開発者の生産性を高めるJSX/TSX 

• JavaScript 内で HTML のようなコードを記述できる構文拡張機能である JSX (JavaScript XML) を使用します。
• 機械可読で検証可能なコード構造の作成を容易にし、パフォーマンスと保守性の両方を向上させます。

FacebookがReactを開発したとき、Angularなどの他のテクノロジーがすでに存在していました。当時、ほとんどの開発者は多くのコーディングを強いられていました。他のフレームワークを使用する開発者は、ほとんどのコードを作り直すという課題に直面しています。彼らは、複雑なコンポーネントを分解できるフレームワークを探していました。彼らは、コードを再利用して、プロジェクトをより迅速に完了したいと考えていました。React彼らにこれを可能にしました。

React主な機能

BlazorとReactのパフォーマンスは重要ですが、Reactの主な機能を確認しましょう。

JSX

JSX(JavaScript XML)を使用すると、開発者はcreateElement()メソッドやappendChild()メソッドを使用せずに、HTMLをReactで記述し、それらのHTML要素をDOMに配置できます。コンパイル時に、JSX は HTML タグをReact要素に変換します。必須ではありませんが、JSX を使用すると、Reactアプリケーションを簡単に作成できます。

Virtual DOM

Reactは仮想 DOM を使用します。その結果、開発者は、BlazorとReactのパフォーマンス比較を行ったときに、パフォーマンスが高速なアプリを作成できます。Reactを開発するとき、作成者は、古いHTMLの更新が高価で時間のかかるプロセスになると正しく予測しました。この理解から、Virtual DOMというアイデアが生まれました。この機能により、プラットフォームは、DOM の特定の部分をいつ再レンダリングするか、またはいつ考慮しないかを正確に知ることができます。その理由は、プラットフォームがデータがいつ変更されたかを特定できるためです。最高のユーザーエクスペリエンスを提供するためには、迅速に反応するユーザーインターフェースが非常に重要です。

BlazorとReactの比較

開発者と話すとき、それは本当に彼らがReactまたはBlazorを決定するときに彼らの開発スキルで何に慣れているかに依存します。

• NET/Visual Studioの開発者であれば、.NETやBlazorのようなフルスタックフレームワークを選ぶのが理にかなっています。
• 経験豊富なJavaScript開発者の場合は、単なるUIライブラリであるReactを選択し、他のライブラリを選択して独自の「Reactスタック」を構成することができます。

BlazorとReactはどちらもオープンソースのツールであり、アプリ開発者の間で絶大な人気を誇っています。

それでは、Blazor Reactよりも優れているのでしょうか?この 2 つを比較すると、ほとんどの直接テストでは、React Blazorを WASM と比較すると、アプリが .NET ランタイム全体をアプリケーション DLL ライブラリとともにブラウザーにダウンロードするため、Blazorよりも読み込みとレンダリングが速いことがわかります。これにより、Blazorのパフォーマンスに追いつくことができないという認識(および少なくとも最初のレンダリングでの現実) React。

ただし、Blazorが遅いという意味ではありませんが、アプリ開発者がReactで経験するダウンロードとレンダリングの時間は良くなります。アプリのReactスタック全体を考慮すると、Reactアプリの初回読み込みが遅くなる可能性があります。すべてのアプリは異なり、すべてのエクスペリエンスは異なります。Blazorサーバー アプリは、Reactのパフォーマンスを超える可能性があります。

WebAssembly Blazor Reactと比較すると、どちらも印象的な機能セットを備えた優れたフレームワークです。ほとんどのWeb開発者は、これらのフレームワークの両方をサポートしており、両方のパフォーマンスに満足していることがわかります。そのため、BlazorとReactの比較を行うときは、常に独自のテストを行い、アプリのエクスペリエンスに最適なパフォーマンスを決定する必要があります。

Should You Choose Blazor or React?

BlazorとReactはどちらも、次のプロジェクトに最適なオプションです。それはいくつかの考慮事項に帰着します。

• あなたはBlazorのような新しいフレームワークで道のいくつかの隆起に対処することをいとわないですか?
• 成熟したUIライブラリのメリットを享受するために、Reactを学んでみませんか?
• あなたは、Microsoft .NET エコシステムの最新の Web アプリに簡単に導入したいと考えている C# 開発者ですか?
• あなたは、Reactアプリ開発をサポートするために独自のライブラリスタックを選択したいと考えている経験豊富なJavaScript開発者ですか?

どちらを選択してもトレードオフはあると考えていますが、どちらの選択でも美しく、高速で応答性の高いWebエクスペリエンスを構築できると信じています。

インフラジスティックスでは、両方のフレームワークをサポートしています。Ignite UI for ReactページとIgnite UI for Blazorページにアクセスして、それぞれの詳細をご覧ください。

Read more: Blazor vs Angular Comparison.