【2021年版】Blazor vs Angular 比較 - どちらを選ぶべきか？

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

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

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

Blazorとは?

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

この新しいテクノロジーの最も注目すべき点は、最新のWeb標準を活用し、実行するために追加のプラグインやアドオンを必要としないという事実です。これはWebAssemblyによって可能になります。

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＃でクライアントとサーバー間でコードを共有
• サーバー側とクライアント側のモデル
• パフォーマンスを向上させるためのサーバー側レンダリング（別名プリレンダリング）
• WebSocket接続
• オフラインでの動作（クライアント側のWebAssemblyのみ）
• モバイルブラウザを含むすべての最新のWebブラウザで動作
• JavaScriptと同じセキュリティサンドボックス
• JavaScript interopを使用したJavaScriptフレームワークとライブラリの呼び出し
• オープンソース

Angularとは?

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

Angularは MVC / MVVMアプリケーションを完全にサポートする、本番環境での運用に耐えうるフレームワークであり、長い間多くの大企業で使用されています。 一方、Blazorは絶えず変更が発生しており、非常に有望であるにもかかわらず、Angularと戦うのにまだ十分な成熟度があるとは言えません。

Angularはプログレッシブウェブアプリ（PWA）をサポートしていますが、BlazorはBlazor WebAssemblyでのみPWAをサポートします。 Angularは、VSCodeなどのIDEでの完全なデバッグサポートが備わっています。

Angularは人気も非常にあります。 Githubリポジトリには、Blazorの9.3Kスターと689フォークと比較して、Angularは70.2Kスターと18.4Kフォークがされています。 Stack Overflowには243,930のAngularの質問がありますが、Blazorには4,695の質問しかありません。 Angularには教材、本、ブログ、ビデオ、その他の資料などBlazorに比べてはるかに多くのコンテンツもあります。 テックイベントが世界中で開催され、巨大なコミュニティがあり、サードパーティインテグレーションとして素晴らしい選択肢です。

Angularは、一般に「事前コンパイラ（AOT）」と呼ばれる優れた概念を使用することで、読み込み時間を短縮し、セキュリティを強化します。AOTは、ブラウザがダウンロードして実行される前のビルドフェーズで、AngularHTMLおよびTypeScriptコードを効率的なJavaScriptコードに変換します。 ビルドプロセス中にアプリケーションをコンパイルすると、ブラウザーでのレンダリングが高速になります。

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
• ... その他

BlazorとAngularの比較

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

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

 

BlazorとAngularのどちらを選ぶべきか?

BlazorとAngularはどちらも、新たな開発プロジェクトにおいて選択可能なオプションです。 考慮すべきものとしては以下のようなものがあります。

• Blazorの新しい、未成熟度なプラットフォームを使用することで発生する多くの細かな問題に対処することは出来ますか？
• Web開発において10年以上多くの実績があるフレームワークのメリットを享受するために、Angularの学習コストをかけることは出来ますか？
• あなたは最新のWebアプリ開発を行うための、より簡単な道筋を望んでいるC＃開発者ですか？
• あなたは、Web開発で.NETを使用することに特にメリットがないJavaScript開発者ですか？

どちらを選択しても、トレードオフがあると思います。

Infragisticsでは、両方のフレームワークをサポートしています。 詳細はIgnite UI for Angular と Ignite UI for Blazor ページをぜひご覧ください。

開発全般に関するご相談はお任せください

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

jp.infragistics.com

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。お問い合せはこちらからお気軽にご相談ください。