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

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

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

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

原文:Jason Beres/翻訳:インフラジスティックス・ジャパン)

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

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

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回のメジャーリリース、年間を通したマイナーアップデート

コードスタイル

非常に細かく、多くの定型文がある

ボイラープレートが少なくなるように最適化されており、簡単に開始可能

 

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

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

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

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

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

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

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

jp.infragistics.com

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

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

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

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

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