【2022年版】Blazor vs Angular 比較 - どちらを選ぶべきか？ - インフラジスティックス・ジャパン株式会社Blog

f:id:mika-kura:20200326184205j:plain

（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン）

最近まで、C＃開発者がフロントエンドのコーディングをする多くの場合、最も使われているプログラミング言語であるJavaScriptを使用していました。しかし、Web開発の世界は急速に変化しており、開発者はもはやハイエンドのWebアプリ開発のためにJavaScriptに依存する必要はありません。 BlazorはWebAssemblyと呼ばれるテクノロジーのおかげで、アドオンやプラグインを使用せずにブラウザー上で.NETを実行できます。

本記事では、現在のBlazorの状況、その機能、本番レベルで利用可能であるかなどを詳しく見てから、最も人気のあるフレームワークの1つであるAngularと比較します。(2022年4月最新情報に更新しました。)

Information
本記事の更新版【2023年版】が発行されています。下記リンクから参照いただけます。

Blazorとは?
- WebAssemblyを理解する
- Blazorの特徴
Angularとは?
BlazorとAngularの比較
- BlazorとAngularのどちらを選ぶべきか?
開発全般に関するご相談はお任せください

Blazorとは?

Blazorは、開発者がC＃でブラウザー用のコードを記述できるMicrosoftの比較的若い ASP.NET Core Webフレームワークです。 Blazorは、HTMLやCSSなどの既存のWebテクノロジーに基づいていますが、開発者はJavaScriptの代わりにC＃およびRazor構文を使用できます。 Razorは、.NETで人気のあるテンプレートマークアップ構文です。 Blazor（Browser + Razor）を使用すると、開発者は、.NETで記述され、WebAssemblyで実装されたクライアント側アプリケーション用のWebUIを構築できます。クライアント側、サーバ側両方のコードがC＃で記述されているため、コードとライブラリを両者で共有でき、.NETをエンドツーエンドで使用しながら最新のシングルページアプリケーション（SPA）を開発することができます。

Blazor の最も注目すべき点は、最新のWeb標準を活用し、実行するために追加のプラグインやアドオンを必要としないという事実です。これはクライアントサイドの　WebAssembly オプションとサーバーサイドの ASP.NET Core オプションという異なるデプロイメントモデルで提供されます。

WebAssemblyを理解する

WebAssembly（Wasmと略されることが多い）は、最新のWebブラウザーで実行できる新しい標準であり、Webプラットフォームに言語の多様性をもたらします。 Wasmは、コンパクトなバイナリ形式を特徴とする低レベルのアセンブリ言語のようなものであり、C / C ++、Java、Rustなどの複数の言語で記述されたコードをほぼネイティブのパフォーマンスでWeb上で実行できます。

WebAssemblyの目標は、Webで高性能なアプリケーションを促進することです。ただし、その形式は他の環境での実行と統合を想定して設計されており、JavaScriptと一緒に実行することもできます。

Blazorの特徴

JavaScriptやTypeScriptの代わりにC＃を使用してWebUIを構築する
プログレッシブウェブアプリ（PWA）を構築する (PWAs)
C＃で記述された再利用可能なコンポーネントを作成して使用する
サーバー側での完全なデバッグサポートとクライアント側でのいくつかの制限付きのデバッグ
HTML DOMを使用したデータバインディング（制限付き双方向バインディング）
C＃でクライアントとサーバー間でコードを共有
サーバー側とクライアント側のモデル
パフォーマンスを向上させるためのサーバー側レンダリング（別名プリレンダリング）
AoTコンパイル
スコープ付きのスタイル
WebSocket接続
オフラインでの動作（クライアント側のWebAssemblyのみ）
モバイルブラウザを含むすべての最新のWebブラウザで動作
JavaScriptと同じセキュリティサンドボックス
JavaScript interopを使用したJavaScriptフレームワークとライブラリの呼び出し
オープンソース

Angularとは?

AngularJSの後継であるAngularは、フロントエンド開発者がフロントエンドとバックエンドの両方を同時に操作できるようにするためにGoogleによって作成されました。 AngularはJavaScriptベースで、多くのリソースが使用され構成されています。

Angularは MVC / MVVMアプリケーションを完全にサポートする、本番環境での運用に耐えうるフレームワークであり、長い間多くの大企業で使用されています。一方、Blazorは市場に出てからまだ数年しか経っておらず、一部の大手ブランドで採用されているものの、そのライフサイクルはまだ初期段階にあります。

AngularとBlazorは共にプログレッシブWebアプリ（PWA）をサポートしていますが、Blazor ServerはPWAとしてデプロイすることができず、WASMベースのBlazorクライアントサイドのみ可能です。 AngularとBlazorはどちらも主要なIDEでサポートされており、デバッグを完全にサポートし、開発者の生産性を高めるためのツールも追加されています。

Angularは人気も非常にあります。 Githubリポジトリには、Blazor（ASP.NET Coreレポに格納）の27.2Kスターと7.4kフォークと比較して、Angularは約80Kスターと20Kフォークを記録しています。 Stack Overflowには275,000以上のAngularの質問がありますが、Blazorには13,000の質問しかありません。 Angularには教材、本、ブログ、ビデオ、その他の資料など多くのコンテンツもあります。テックイベントが世界中で開催され、巨大なコミュニティがあり、サードパーティインテグレーションとして素晴らしい選択肢です。

Angularでは、「先行コンパイル」（AOT）を使用することで、アプリの読み込みを高速化できる可能性があります。 AOTはAngularのHTMLとTypeScriptのコードを、ブラウザがそのコードをダウンロードして実行する前のビルド段階で、効率的なJavaScriptのコードに変換してくれます。ビルドプロセス中にアプリケーションをコンパイルすることで、ブラウザでのレンダリングを高速化することができます。BlazorもAOTをサポートしますが、クライアントサイドのWebAssemblyを使用しますが、これは.NET Frameworkの初期デプロイメントペイロードを増加させるものです。

Angularでは、スコープされたスタイルを使用することもでき、関連するコンポーネント専用のCSSスタイルを適用できます。

このフレームワークはAngularエレメントとモジュールを使用して、完全にカスタマイズできるように設計されており、開発者とデザイナーにより多くの力を与えます。 Angularは、遅延読み込み、ローカル言語とカルチャー設定をサポートするI18n国際化標準、iOSおよびAndroid用のIonicクロスプラットフォームモバイルアプリなどの機能をサポートします。

以下にまとめたように、Angular開発者が利用できる多くのオープンソースパッケージがあります。

Ignite UI for Angular
NgBootstrap
Angular Google Maps
NgRx
NgTranslate
AngularFire
NgxTextEditor
Angular Material
Ng2 Pdf Viewer
... その他

このブログ記事の冒頭で述べたように、Web開発のあり方は、もう一段階上のレベルに到達しつつあります。ソフトウェアエンジニアは、もはや典型的なフレームワークや時代遅れのツールに依存することなく、ソリューションを構築できます。彼らはソフトウェアの構築方法を変革し、合理化するチャンスを手にしています。

ここ数ヶ月、Infragistics の技術チームは本当に忙しく、Angular アプリ用の App Builder を強化し、Blazor アプリ開発にも利用できるようにする方法を検討していました。そして、Blazor 用のアプリビルダーはすでにリリースされています。App Builder について少しご紹介します。

プロダクトマネージャー、デザイナー、開発者にとって理想的な完全なdesign-to-codeソリューションです
AngularおよびBlazorアプリケーションのための、市場で唯一のWYSIWYGドラッグ＆ドロップツールです
デザインからクリーンなAngularコードを生成するローコードツールとして機能し、近々Blazorでも同様のことができるようになります
企業が完全なビジネスアプリケーションをこれまでより80%速く設計・構築できるよう支援します
サイロをなくし、摩擦、ミスコミュニケーション、コスト増をまねくエラーを削減します
Ignite UI for Angularを搭載し、機能豊富なコンポーネント、60以上のUIコントロールを提供します

Angularのデータグリッド/テーブルをお探しの方は、迅速なデータバインディング、セルと行の選択、セルと行の編集とエラー検証、列のサマリー、インタラクティブなOutlookスタイルのグループ化、Microsoft Excelスタイルのフィルタリング、行と列の仮想化などの機能を持つInfragisticsのAngularグリッドをお試しください。また、テーマ設定やブランディングを容易にするための直感的なAPIも備えています。最新のAngular Data Gridチュートリアルでは、フル機能を備えたAngular UI Gridをゼロから作成する方法を素早く学ぶことができます。

www.youtube.com

BlazorとAngularの比較

BlazorとAngularはどちらもオープンソースのWebフレームワークです。主な違いは、AngularはJavaScriptに基づいているのに対し、BlazorはC＃を利用してWeb用に開発していることです。主な違いは次のとおりです。

	Angular	Blazor
製品利用に耐えうるか	Angularは今日、何年にもわたって本番環境に展開され、テスト済み	2021年11月に.NET 6がリリースされたことで、Blazorは大きな改善を遂げ、ほとんどのアプリケーションでプロダクションレディといえるようになりました
学習曲線	特に.NET / C＃開発者の場合、Blazorと比較すると学習曲線が大きい	C＃およびVisualStudio開発者にとって学び易い
パフォーマンス	フレームワークが非常に成熟しているため、パフォーマンスのチューニングがなされている	マイクロソフトはBlazorのパフォーマンスを調整し続けており、.NET 6のリリースではそれ以前の問題の多くに対処しています
PWA（プログレッシブウェブアプリ）のサポート	あり	あり（Blazor WebAssembly）
クライアントごとのアクティブな接続の必要性	なし	あり（Blazor Server）
各クライアントのコンポーネント状態をサーバー側に保存	なし	あり (Blazor Server)
コンポーネントにスコープされたスタイル	あり	あり
バンドルサイズ	50KB以下（gZipを使用したIvyの場合）	Blazor Server ではとても小さい。クライアントサイドのWASMアプリにおける .NET ランタイムでは、393kbから最大で780kb
ツール	CLIと多くのサードパーティオプション	CLI、Visual Studio、およびサードパーティのオプション
SEO /クローラー向けに最適化	Angularサーバーサイドレンダリング	あり
リリース頻度	年間2回のメジャーリリース（これは実際企業がフォローするには大変な頻度です。）	.NETで年1回のメジャーリリース、年間を通したマイナーアップデート
コードスタイル	非常に細かく、多くの定型文がある	ボイラープレートが少なくなるように最適化されており、簡単に開始可能