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

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

Blazor Server と Blazor WebAssembly: 特徴をまとめてみました

つい最近まで、C# 開発者がブラウザー向けコードを記述したいとなった場合、JavaScript を使う必要がありました。しかし、Web 開発の世界は急速に変化していて、今や開発者はハイエンドの Web アプリ開発のために JavaScript に依存する必要はなくなりました。もしあなたがサーバーに接続せずに (アドオンやプラグインなしで) ブラウザーで .NET を実行することを考えたことがある場合、Blazor は WebAssembly と呼ばれるテクノロジーのおかげでそれを実現しています。

このブログでは、Blazor WebAssembly と、なぜそれが多くの話題を呼んでいるのかを詳しく見ていきます。

この記事はインフラジスティックス本社により作成された英文記事の機械翻訳により生成されました。
原文は以下よりご確認いただけます。
Jason Beres 2021.2.23  [Blazor Server vs. Blazor WebAssembly: Just the Facts](https://www.infragistics.com/community/blogs/b/jason_beres/posts/blazor-server-vs-blazor-webassembly)
また、本記事の内容に深くご興味がある場合、インフラジスティックス・ジャパンのスタッフによる翻訳リクエストを受け付けておりますので、「JapanPR@infragistics.com」宛にご連絡ください。

Blazor WebAssembly とは何ですか?

Blazor WebAssembly は、WASM とも呼ばれ、Web ブラウザーで実行されるソフトウェアを作成するために W3C (World Wide Web Consortium) によって開発された標準です。 JavaScript とは異なり、Blazor WebAssembly は、CPU 上でネイティブに近い速度で実行されるコンパイル済みソフトウェアです。

Blazor WebAssembly プログラムは、C などの他の言語で記述でき、WebAssembly バイト コードにコンパイルできます。 WebAssembly は、JavaScript を置き換えることを意図したものではなく、できるだけ高速に実行する必要のあるプログラム (またはプログラムの一部) に対して JavaScript と一緒に実行することを目的としています。

Microsoft によってサポートされている Blazor は、JavaScript の代わりに .NET と C# を使用してシングルページ アプリを構築するためのオープン ソースでクロスプラットフォームの WebUI フレームワークです。 Blazor は、Web アプリケーションをホストするためにサポートされている 2 つの方法を提供します。Blazor Server と Blazor WebAssembly です。

Blazor WebAssembly と Blazor Server

前述のように、Blazor は、WebAssembly を使用して、クライアント側の C# コードをブラウザーで直接実行できます。 WebAssembly で実行されている実際の .NET であるため、アプリケーションのサーバー側の部分からコードとライブラリを再利用できます。

または、Blazor でサーバー上でクライアント ロジックを実行することもできます。クライアント UI イベントは、リアルタイム メッセージング フレームワークである SignalR を使用してサーバーに返送されます。実行が完了すると、必要な UI の変更がクライアントに送信され、DOM にマージされます。

Blazor サーバー

Blazor Server は、標準の ASP.NET Core アプリケーションを使用します。そのアプリケーション内で、エンティティ フレームワーク (元々は .NET Framework の不可欠な部分として出荷されたオープンソースのオブジェクトリレーショナル マッピング フレームワーク) を介して SQL Server データベースを統合するなど、サーバー側の機能を統合できます。

Blazor Server アプリケーションは、SignalR を使用した常時接続を介してブラウザーと通信します。 Razor コンポーネントまたは Razor ページを使用してクライアント側ページを作成できます。

SignalR を使用した Blazor サーバーの例

Blazor Server アプリは、読み込みが速く、実装が簡単です。 Blazor Server のサポートは、.NET Core 3.1 LTS で利用できます。

Blazor WebAssembly

Blazor WebAssembly を使用すると、ブラウザーで Blazor アプリケーションをダウンロードできます。

これは、Blazor アプリケーションが Web ブラウザーで実行されることを意味します。アプリケーションが機能するためにサーバーとの常時接続は必要ありません。

Blazor WebAssembly の例

ただし、Blazor WebAssembly は単にクライアント側のアプリケーションであるため、サーバー側の機能を Blazor アプリケーションに直接統合することはできません。

それを行うには、ASP.NET Core Web API などのサーバー側アプリケーションに接続する必要があります。

Blazor Server と同様に、Razor コンポーネントまたは Razor ページを使用してクライアント側のページを作成できます。

JavaScript と同様に、Blazor WebAssembly アプリは、ブラウザーのセキュリティ サンドボックス内からユーザーのデバイス上で安全に実行されます。これらのアプリは、.NET サーバー コンポーネントをまったく使用せずに完全にスタンドアロンの静的サイトとして展開することも、ASP.NET Core と組み合わせて、.NET を使用したフルスタック Web 開発を可能にすることもできます。この場合、コードをクライアントやサーバーと簡単に共有できます。

Blazor 機能のフルライン

Blazor WebAssembly には、次の Web アプリプロジェクトの生産性を維持するための機能が満載されています。

  • C# の生産性と強力なランタイム タイピングを活用する
  • 安定かつ成熟した .NET エコシステム上に構築する
  • クライアントとサーバーでコードと既存の .NET 標準ライブラリを簡単に再利用できます
  • Razor コンポーネント ファイルに実装された Blazor Server アプリとの共有コンポーネント モデル
  • アプリをスタンドアロンの静的サイトとして展開するか、ASP.NET Core でホストします
  • オフライン機能とネイティブ OS 統合を備えたプログレッシブ ウェブ アプリ (PWA) を構築する
  • 認証の組み込みサポート
  • 統合されたグローバリゼーションとローカリゼーションのサポート
  • 環境ベースの構成
  • IL トリミングとビルド時の事前圧縮
  • フル スタックのデバッグ
  • Visual Studio、Visual Studio for Mac および VisualStudioCode を使用した優れたツール

SignalR とは何ですか?

SignalR は、ASP.NET 開発者が、アプリケーションにリアルタイム Web 機能を追加するプロセスを簡素化するためのライブラリです。リアルタイム Web 機能は、クライアントが新しいデータを要求するのをサーバーが待機するのではなく、サーバー コードが接続されたクライアントにコンテンツが利用可能になるとすぐにプッシュする機能です。チャット アプリケーションは、SignalR の例としてよく使用されます。

Blazor サーバーと WebAssembly - いつ使用するか?

使用する必要のあるホスティング モデルは、アプリケーションで提供する目的と機能によって異なります。インターネット接続が弱いアプリケーションを使用する場合は、サーバーに接続しなくても正常に機能する Blazor WebAssembly を選択できます。オフラインで作業する場合にも適しています。

一方、Google で上位にランクされるクライアント向けアプリケーションの構築を検討している場合は、Blazor Server の方が適しています。

Blazor WebAssembly vs Angular

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

Angular は、Blazor とは異なり、長い間存在してきました。これは、MVC / MVVM アプリケーションを完全にサポートする本番環境に対応したフレームワークであり、多くの大企業で使用されています。一方、Blazor は継続的に変更されており、非常に有望であるにもかかわらず、Angular と戦うのに十分な成熟度をまだ達成していません。 Angular ツールは、VS Code などの IDE での完全なデバッグ サポートによりさらに成熟しています。

比較の詳細については、2022 年のブログの Blazor と Angular の比較をご覧ください。

Blazor WebAssembly に組み込まれた米国大統領選挙ダッシュボード

Blazor アプリケーションでサポートできる視覚化と分析の種類を説明するために、Infragistics のチームは、現在と過去のデータを比較し、データの傾向を特定するサンプルアプリケーションである米国大統領選挙ダッシュボードを作成しました。 Blazor WebAssembly サンプルアプリケーション

このダッシュボードは、2020 年の選挙までの選挙データのインタラクティブな視覚化を提供します。このサンプルアプリケーションは、Blazor 用の Ignite UI を使用して Blazor (WASM) に組み込まれており、Blazor データグリッド、Blazor ツリーマップ、Blazor マップおよび Blazor データチャートコンポーネントを備えています。

Blazor WebAssembly コンポーネント

Infragistics の IgniteUI for Blazor には、Blazor Server、Blazor WebAssembly、および .NET 6 の完全サポートを含む専門的に設計された Blazor コンポーネントが含まれています。C# スキルを使用してリッチな Web アプリケーションを作成し、複雑で習得が難しい JavaScript を排除できます。 Ignite UI for Blazor コントロールには、最速のデータグリッド、60 以上の高性能チャート (株価チャート、財務チャート、地理空間マップ、複数列のコンボボックスなど) が含まれます。

フル機能の軽量 Blazor DataGrid と Blazor Table を構築して、顧客が期待するすべてのインタラクティブ機能を提供しながら、大量のデータを表示するという課題に対応しました。データ グリッドとすべてのIgnite UI Blazor コンポーネントは、Blazor WebAssembly の完全なサポートを含む、最新の C# Blazor アプリ用に設計されているため、最新のブラウザーにデプロイして、可能な限り最高のユーザーエクスペリエンスを実現できます。

そして、ここに Blazor 開発者にとってエキサイティングな何かがあります。 AppBuilder® for Blazorをリリースしました! これは、アプリ開発プロセスにとってどのような意味がありますか?

  • App Builder は完全なクラウドベースの WYSIWYG ドラッグ アンド ドロップ ツールであり、アプリ、テーマの作成、データ バインディングの追加を簡単に行えるクラウドベースの IDE を使用して、UI デザインの複雑さを解消します。
  • Blazor アプリを 10 倍速く作成できます。
  • App Builder がローコード開発ツールとして機能することで、設計するすべてのものが Blazor の本番環境に対応したコードになります。
  • コード プレビューを使用すると、アプリのビルド中にリアルタイムで生成されている、クリーンでテスト可能なソース コードを確認できます。
  • Ignite UI、Infragistics Professional または Infragistics Ultimate サブスクリプションで今すぐ AppBuilder を入手してください。

jp.infragistics.com

非常に高速な Blazor DataGrid の詳細と、Blazor Gridの例をご覧ください。

Ignite UI for Blazor の最新リリースに含まれているものを確認するには、ブログ「Ignite UI for Blazor - 21.2 の新機能」をお読みください。

Blazor を検討していて質問がある場合は、jasonb@infragistics.com にメールを送ってください。

また、興味があれば、Blazor vs AngularBlazor vs React の比較記事を読むことができます。

では、コーディングを楽しんでください!

20220902150132