つい最近まで、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 と Blazor Server
- Blazor 機能のフルライン
- SignalR とは何ですか?
- Blazor Server と WebAssembly - いつ使用するか?
- Blazor WebAssembly に組み込まれた米国大統領選挙ダッシュボード
- Blazor WebAssembly コンポーネント
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# を使用してシングルページ アプリを構築するためのオープン ソースのクライアント Web UI フレームワークです。 Blazor は、Web アプリケーションをホストするためにサポートされている 2 つの方法を提供します。Blazor Server と Blazor WebAssembly です。
Blazor WebAssembly と Blazor Server
前述のように、Blazor は、WebAssembly を使用して、クライアント側の C# コードをブラウザーで直接実行できます。 WebAssembly で実行されている実際の .NET であるため、サーバー側と同じコードとライブラリを再利用できます。
または、サーバー上で Blazor のクライアント ロジックを実行することもできます。クライアント UI イベントは、リアルタイム メッセージング フレームワークである SignalR を使用してサーバーに返送されます。実行が完了すると、必要な UI の変更がクライアントに送信され、DOM にマージされます。
Blazor Server
Blazor Server は、標準の ASP.NET Core アプリケーションを使用します。そのアプリケーション内で、Entity Framework Core (元々は .NET Framework の不可欠な部分として出荷されたオープンソースのオブジェクトリレーショナル マッピング フレームワーク) を介して SQL Server データベースを統合するなど、サーバー側の機能を統合できます。
Blazor Server アプリケーションは、SignalR を使用した常時接続を介してブラウザーと通信します。 Razor コンポーネントを使用してクライアント側ページを作成できます。
Blazor Server アプリは、読み込みが速く、実装が簡単です。 Blazor Server のサポートは、.NET Core 3.1 LTS 以降で利用できます。
Blazor WebAssembly
Blazor WebAssembly を使用すると、Blazor アプリケーションがブラウザ内にダウンロードされます。
これは、Blazor アプリケーションが Web ブラウザーで実行されることを意味します。アプリケーションが機能するためにサーバーとの常時接続は必要ありません。
ただし、Blazor WebAssembly は単にクライアント側のアプリケーションであるため、サーバー側の機能を Blazor アプリケーションに直接統合することはできません。
それを行うには、ASP.NET Core Web API などのサーバー側アプリケーションに接続する必要があります。
Blazor Server と同様に、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 および Visual Studio Code といった優れた開発用ツール
SignalR とは何ですか?
SignalR は、ASP.NET 開発者が、アプリケーションにリアルタイム Web 機能を追加するプロセスを簡素化するためのライブラリです。リアルタイム Web 機能は、クライアントが新しいデータを要求するのをサーバーが待機するのではなく、サーバー コードが接続されたクライアントにコンテンツが利用可能になるとすぐにプッシュする機能です。チャット アプリケーションは、SignalR の例としてよく使用されます。
Blazor Server と WebAssembly - いつ使用するか?
使用する必要のあるホスティング モデルは、アプリケーションで提供する目的と機能によって異なります。インターネット接続が弱いアプリケーションを使用する場合は、サーバーに接続しなくても正常に機能する Blazor WebAssembly を選択できます。オフラインで作業する場合にも適しています。
一方、Google で上位にランクされるようなクライアント向けアプリケーションの構築を検討している場合は、Blazor Server の方が適しています。
Blazor WebAssembly に組み込まれた米国大統領選挙ダッシュボード
Blazor アプリケーションでサポートできる視覚化と分析の種類を説明するために、Infragistics のチームは、現在と過去のデータを比較し、データの傾向を特定するサンプルアプリケーションである米国大統領選挙ダッシュボードを作成しました。
このダッシュボードは、2020 年の選挙までの選挙データのインタラクティブな視覚化を提供します。このサンプルアプリケーションは、Blazor 用の Ignite UI を使用して Blazor WebAssembly アプリケーションに組み込まれており、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 サブスクリプションで今すぐ App Builder を入手してください。
非常に高速な Blazor Grid の詳細と例をご覧ください。
Ignite UI for Blazor の最新リリースに含まれているものを確認するには、ブログ「Ignite UI for Blazor - 21.2 の新機能」をお読みください。
Blazor を検討していて質問がある場合は、jasonb@infragistics.com にメールを送ってください。
また、興味があれば、Blazor vs Angular と Blazor vs React のそれぞれの比較記事も読むことができます。
では、コーディングを楽しんでください!
