(原文:Jason Beres/翻訳:インフラジスティックス・ジャパン)
最近まで、C#開発者がフロントエンドのコーディングをする場合、最も使われているプログラミング言語である JavaScript を多く使用していました。しかし、Web 開発の世界は急速に変化しており、開発者はハイエンドの Web アプリ開発のために JavaScript に依存する必要はありません。 Blazor の登場により、アドオンやプラグインを使用することなく、C# で書かれた .NET による SPA のブラウザー上での実行が可能になりました。
本記事では、現在の Blazor の状況、その機能、本番レベルで利用可能であるかなどを詳しく見てから、最も人気のあるフレームワークの1つである Angular と比較します。(2023年2月最新情報に更新しました。)
Blazor とは?
Blazor は、開発者が C# でブラウザー用のコードを記述できる Microsoft の ASP.NET Core Web フレームワークです。 Blazor は、HTML や CSS などの既存の Web テクノロジーに基づいていますが、JavaScript の代わりに C# および Razor 構文を使用して開発ができます。 Razor は、.NET で人気のあるテンプレートマークアップ構文です。 Blazor (名前の由来は Browser + Razor による造語) を使用すると、開発者は、.NET で記述されたクライアント Web アプリケーション用の Web UI を構築できます。 クライアント側、サーバ側両方のコードが C# で記述されているため、コードとライブラリを両者で共有でき、.NET をエンドツーエンドで使用しながら最新のシングルページアプリケーション(SPA)を開発することができます。
Blazor の最も注目すべき点は、最新の Web 標準を活用し、実行するために追加のプラグインやアドオンを必要としないという点です。これはクライアントサイドの WebAssembly オプションとサーバーサイドの ASP.NET Core オプションという異なるデプロイメントモデルで提供されます。
WebAssembly を理解する
WebAssembly(Wasm と略されることが多い)は、最新の Web ブラウザーで実行できる新しい標準であり、Web プラットフォームに言語の多様性をもたらします。 Wasmは、コンパクトなバイナリ形式を特徴とする低レベルのアセンブリ言語のようなものであり、C/C++、Java、Rust など様々な言語で記述されたコードをほぼネイティブのパフォーマンスでブラウザ上で実行できます。
WebAssembly の目標は、Web で高性能なアプリケーション開発を促進することです。 ただし、その形式は他の環境での実行と統合を想定して設計されているため、JavaScript と一緒に実行することもできます。
Blazor の特徴
- JavaScript や TypeScript の代わりに C# を使用して Web UI を構築する
- オフライン対応を含むプログレッシブウェブアプリ(PWA)を構築する
- C# で記述された再利用可能なコンポーネントを作成して使用する
- 完全なデバッグサポート (Blazor WebAssembly では限定的)
- HTML DOM を使用した双方向データバインディング
- C# でクライアントとサーバー間でコードを共有
- WebSocket によるサーバーモデルと WebAssembly によるクライアントモデル
- パフォーマンスを向上させるためのサーバー側プリレンダリング
- AoT コンパイル
- スコープ付きのスタイル
- モバイルブラウザを含むすべての最新 Web ブラウザで動作
- JavaScript と同じセキュリティサンドボックス
- JavaScript 相互運用機能を使用した JavaScript フレームワークとライブラリの呼び出し
- 標準で組み込みの Virtualization コンポーネントによる行の仮想化
- C# で記述されたコンポーネントを Web 標準のカスタム要素として登録可能
- C/C++ や Rust などで開発された WebAssembly バイナリの呼び出し
- .NET バイナリに完全互換のため既存の NuGet パッケージ資産の再利用
- オープンソース (MIT ライセンス)
Angular とは?
AngularJS の後継である Angular は、フロントエンド開発者がフロントエンドとバックエンドの両方を同時に操作できるようにするために Google によって作成されました。 Angular は JavaScript ベースで、多くのリソースが使用され構成されています。
Angular は MVC/MVVM アプリケーションを完全にサポートする、本番環境での運用に耐えうるフレームワークであり、長い間多くの大企業で使用されています。
Angular と Blazor は共にプログレッシブ Web アプリ(PWA)をサポートしていますが、Blazor Server は PWA としてデプロイすることができず、Blazor WebAssembly のみ可能です。 Angular と Blazor はどちらも主要な IDE でサポートされており、デバッグを完全にサポートし、開発者の生産性を高めるためのツールも追加されています。
Angular は人気も非常にあります。 GitHub リポジトリには、Blazor(ASP.NET Core リポジトリに収録されています)の 30.8K スターと 8.7K フォークと比較して、Angular は約 86.1K スターと 22.9K フォークを記録しています。 Stack Overflow には 291,000 以上のAngular の質問がありますが、Blazor にはおおよそ 12,000 の質問しかありません。 Angular には教材、本、ブログ、ビデオ、その他の資料など多くのコンテンツもあります。 テックイベントが世界中で開催され、巨大なコミュニティがあり、サードパーティインテグレーションとして素晴らしい選択肢です。
Angular では、「先行コンパイル」(AOT)を使用することで、アプリの読み込みを高速化できる可能性があります。 AOT は Angular の HTML と TypeScript のコードを、ブラウザがそのコードをダウンロードして実行する前のビルド段階で、効率的な JavaScript のコードに変換してくれます。ビルドプロセス中にアプリケーションをコンパイルすることで、ブラウザでのレンダリングを高速化することができます。Blazor WebAssembly も AOT をサポートし、.NET のコードを WebAssembly のバイナリに事前コンパイルすることで、処理速度をプロセッサネイティブにより近づけます。その代わり初期デプロイメントペイロードは増加します。
Blazor もそうですが、Angular でももちろん、スコープされたスタイルを使用することができ、関連するコンポーネント専用の CSS スタイルを適用できます。
このフレームワークは Angular エレメントとモジュールを使用して、完全にカスタマイズできるように設計されており、開発者とデザイナーにより多くの選択肢を与えます。 Angular は、遅延読み込み、ローカル言語とカルチャー設定をサポートする I18n 国際化標準、iOS および Android 用の Ionic クロスプラットフォームモバイルアプリなどの機能をサポートします。
以下にまとめたように、Angular 開発者が利用できる多くのオープンソースパッケージがあります。
- NgBootstrap
- Angular Google Maps
- NgRx
- NgTranslate
- AngularFire
- NgxTextEditor
- Angular Material
- Ng2 Pdf Viewer
- ... その他
このブログ記事の冒頭でも触れたように、Web 開発のあり方は、もう一段階上のレベルに到達しつつあります。ソフトウェアエンジニアは、もはや典型的なフレームワークや時代遅れのツールに依存することなく、ソリューションを構築できます。彼らはソフトウェアの構築方法を変革し、合理化するチャンスを手にしています。
App Builder | インフラジスティックス ・ジャパン株式会社
ここ数ヶ月、Infragistics の技術チームは本当に忙しく、Angular アプリ用の App Builder を強化し、Blazor アプリ開発にも利用できるようにする方法を検討していました。そして、Blazor 用のアプリビルダーをリリースしました。
App Builderについて少しご紹介します。
- プロダクトマネージャー、デザイナー、開発者にとって理想的な完全な Design-to-Code ソリューションです
- Angular および Blazor アプリケーションのための、市場で唯一の WYSIWYG ドラッグ&ドロップツールです
- デザインからクリーンな Angular コードおよび Blazor Server と Blazor WebAssembly の双方のコードを生成するローコードツールとして機能します
- 企業が完全なビジネスアプリケーションをこれまでより 80% 速く設計・構築できるようサポートします
- サイロ化をなくし、軋轢、ミスコミュニケーション、コスト増をに繋がるエラーを削減します
- Ignite UI for Angular および Ignite UI for Blazor を搭載し、機能豊富なコンポーネント、60 以上のUIコントロールを提供します
Angular および Blazor のデータグリッド/テーブルをお探しの方は、迅速なデータバインディング、セルと行の選択、セルと行の編集とエラー検証、列のサマリー、インタラクティブな Outlook スタイルのグループ化、Microsoft Excel スタイルのフィルタリング、行と列の仮想化などの機能を持つ Infragistics のグリッドコンポーネントをお試しください。また、テーマ設定やブランディングを容易にするための直感的な API も備えています。最新の Angular Data Grid チュートリアルでは、フル機能を備えた Angular UI Grid をゼロから作成する方法を素早く学ぶことができます。
Blazor と Angular の比較
Blazor と Angular はどちらもオープンソースの Web フレームワークです。 両者の主な違いは、Angular は JavaScript に基づいているのに対し、Blazor は C# を利用して Web アプリケーションを開発することです。 その他の主な違いは次のとおりです。
Angular |
Blazor |
|
製品利用に耐えうるか |
Angular は何年にもわたって本番環境に展開され、テスト済み |
2021年11月に .NET 6 がリリースされたことで、Blazor は大きな改善を遂げ、ほとんどのアプリケーションでプロダクションレディといえるようになりました |
学習曲線 |
特に .NET/C# 開発者の場合、Blazor と比較すると学習曲線が大きい JavaScript 開発者にとっては学びやすい |
C# および Visual Studio 開発者にとって学び易い |
パフォーマンス |
フレームワークが非常に成熟しているため、パフォーマンスのチューニングがなされている |
マイクロソフトは Blazor のパフォーマンスを調整し続けており、.NET 6 のリリースではそれ以前の問題の多くに対処しています |
PWA(プログレッシブウェブアプリ)のサポート |
あり |
あり(Blazor WebAssembly) |
クライアントごとのアクティブな接続の必要性 |
なし |
あり(Blazor Server) |
各クライアントのコンポーネント状態をサーバー側に保存 |
いいえ |
はい (Blazor Server) |
コンポーネントにスコープされたスタイル |
あり |
あり |
バンドルサイズ |
50KB以下(gZip を使用した Ivy の場合) |
Blazor Server ではとても小さい。Blazor WebAssembly アプリにおける .NET ランタイムは、350KBから (Brotli 圧縮有効時)。 |
ツール |
CLI と多くのサードパーティオプション |
CLI、Visual Studio、およびサードパーティのオプション |
SEO /クローラー向けに最適化 |
Angular サーバーサイドレンダリング |
あり |
リリース頻度 |
年間 2 回のメジャーリリース(これは実際企業がフォローするには大変な頻度です。) |
.NET で年1回のメジャーリリース、年間を通したマイナーアップデート |
コードスタイル |
多くの定型文があり、開発者数が増えてもブレにくい |
ボイラープレートが少なくなるように最適化されており、簡単に開始可能 |
Blazor と Angular のどちらを選ぶべきか?
Blazor と Angular はどちらも、新たな開発プロジェクトにおいて選択可能なオプションです。 考慮すべきものとしては以下のようなものがあります。
- あなたは最新の Web アプリ開発を行うための、より簡単な方法求めている C# 開発者ですか? → Blazor
- あなたは、Web 開発で .NET を使用することに特にメリットがない JavaScript 開発者ですか? → Angular
どちらを選択しても、トレードオフがあると思います。
Infragistics では、両方のフレームワークをサポートしています。 詳細は Ignite UI for Angular と Ignite UI for Blazor ページをぜひご覧ください。
開発全般に関するご相談はお任せください
インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。
「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」
「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」
「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」
「UI を刷新したい。UI デザインや UI/UX に関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」
といったご相談を承っています。お問い合せはこちらからお気軽にご相談ください。