【NTQ Engineer Insight】Webアプリケーション開発を更に簡単にするBlazor

数年来、Webアプリケーション開発においてJavaScriptは確固たる地位を守り続けています。VBScriptやDartなどの他の言語が登場した時期もありましたが、広く普及するにはいたっていません。Javascriptの問題を部分的に解決するために生まれたTypescriptも完全ではないですし、本質はJavascriptです。

しかし、JavaScriptは強力な言語であるものの、欠点もあります。たとえば、コールバック関数、非同期処理、Promise等の一部のややこしい処理が多少ではあるもののプログラミング自体の難易度を上げており、メンテナンスやバグ修正に費用がかかります。また、Javascriptと人気のあるバックエンド開発言語に大きな違いがあるため、バックエンドエンジニアがフルスタックエンジニアを目指す場合には障害になります。

Webアプリケーション開発において、JavaScriptよりも良い選択肢がないかという長年の問いに対して、Microsoftが2018年にBlazorという答えを出しました。

Blazorとは？

Blazor =  Browser + Razor

Blazorは、Microsoftの.NETプラットフォームの一部で、C#を使ってWebクライアントを開発するためのMicrosoftの無料のオープンソースフレームワークです。

プログラマーは、C#を.NETエコシステムで利用可能なプログラミングツールと組み合わせることで、Javascriptを使わずにWebアプリケーションのクライアント側をすばやく簡単に作成できます。

Blazorは、なぜ生まれたのか？

React、Vue、Angularに代表されるようにフロントエンドに使われるフレームワークは数多く存在します。長所、短所を含め、それぞれのフレームワークが語られる際には違いに注目されますが、すべてに共通する点が1つあります。それは、開発者がJavaScriptの使用に習熟している必要があるということです。そして、JavaScriptは速度や保守性に課題が残っています。

そのような背景の中、Blazorは、JavaScript一強の時代を終わらせ、開発プロセスを簡素化するためのMicrosoftの試みとして生まれました。オープンソースで無料で使用できるBlazorを使えば、JavaScriptの代わりにC#、HTML、CSS、Razorを使用して、Webアプリケーションをより簡単に迅速に作成することができます。C#は、一般にJavaScriptよりも習得しやすい言語と見なされており、開発速度の点でも明らかな利点があります。

もちろん、現時点ではJavascriptの影響を否定することはできません。人気があること、膨大なサポートライブラリがあることから、Javascriptとそのフレームワークを使用してWebアプリケーションを開発することを優先する企業は以前として多いです。

Blazorを使うメリットは？

ここからは、Web開発の標準的な段階を分析しながら、Blazorの意義を考えます。

Web開発には、多くの場合、フロントエンドとバックエンド、またはクライアント側とサーバー側の開発が必要なことは一般に知られています。

フロントエンドは、Webサイトまたはアプリケーションのグラフィカルユーザーインターフェイスの作成に関係します。フロントエンドの開発では、React、Vue、Angularなどのフレームワークを使用できる言語としてJavaScript、HTML、CSSなどのさまざまな言語を使用します。

一方、バックエンドは、データベース、API統合、サーバーとの通信など、ユーザーが認識しないすべての部分に関係します。バックエンドの開発では、開発者はJava、Ruby、Python、PHP、C＃など他の言語を使用する必要があります。

つまり、フロントエンドとバックエンドを分けて考えているため、開発者は2セットの言語を学習する必要があります。また、加えてフロントエンドとバックエンドがどのように相互に作用しているかを理解する必要があります。そのため、Web開発の開発者が両側の役割を担う場合、プレッシャーも強く、疲弊していきやすくなります。

この前提を理解したうえで考えると、Blazorには以下のようなメリットがあるといえます。

■エンジニアの観点：開発に参加するまでの時間の短縮

Blazorでは、2セットの言語を学ぶ必要がなく、C#、HTML、CSS、Razorテンプレートのみを使用してクライアントとサーバーの両方を開発できます。これらはすべて.NETの基本的な機能であり、JavaScriptの複雑さに比べるとはるかに単純です。

■雇用主の観点：エンジニア調達コストの削減

フロントエンドとバックエンドでエンジニアを別々に雇う必要がなくなります。Blazorはフロントエンドとバックエンドで別の言語を学ぶ必要がないため、JavaScriptを使った開発のような2セットの言語を覚える必要がないため、開発者を簡単かつ迅速にフルスタック開発者にすることができます。

■PMの観点：リソースの調整の容易化

プロジェクトマネージャーの大きな課題であるリソース不足の解消の観点でもメリットがあります。例えば、在籍するバックエンドエンジニアをフロントエンドエンジニアとして活用することができ、作業効率の最適化が容易になります。

Blazorはどのように機能するのか？

Blazorは2つのホスティングモデルで動作します。

■Blazor WebAssembly

Blazorを使用すると、フロントエンドのロジックとUIを、C＃、HTML、CSSを介してブラウザで直接実行できます。WebAssemblyはOpenWeb Standardsに基づいているため、追加のプラグインをインストールする必要はありません。 ブラウザの.NET runtimeの機能を使用すると、オフライン操作とUIへの直接変更が可能になります。

動作を保証するために、System.dllのような.NET Coreの使い慣れたライブラリを含む、Blazor WebAssemblyで使用する必要のある全てのライブラリがブラウザにダウンロードされます。C＃で記述したすべてのコンポーネントもクラスライブラリに変換され、ブラウザにダウンロードされます。これにより、サーバーに関係なく、コンポーネントは完全にクライアント上で実行されるようになります。

Blazor WebAssemblyが、デスクトッププログラムファイルと同じようないくつかの静的ファイルの寄せ集めであり、ブラウザで実行されるように感じられます。

Blazor WebAssemblyには次のメリットがあります。

・クライアントのダウンロード後、.NETサーバーに依存しません。

・クライアントリソースを活用します。

・サーバーの負荷を軽減し、より多くのクライアントにサービスを提供できます。

・CDNから展開するようにサーバーなしで展開することが可能です。

一方、Blazor WebAssemblyには下記のようなデメリットもあります。

・性能はブラウザの機能とクライアントのパフォーマンスに依存します。

・クライアントデバイスに対して、より高度な要求があります。

・ダウンロードサイズが大きく、初回の読み込み速度が遅いです。

■Blazor Server

Blazorは、メッセージングフレームワークであるSignalIRとのリアルタイム接続を確立します。 これにより、アプリケーションはクライアント側のUIへの変更をサーバーに伝えることができ、サーバーは変更前後の違いを記録します。違いに気づいたサーバーは、それらを返し、DOMへの変更を更新します。

言い換えると、Blazor Serverは、サーバーで生成されたUIがクライアントにリアルタイムで送信され、クライアントはサーバーによって提供された変更のみを適用します。

ここで注意が必要なことは、Blazor Serverは新しいページを再度生成することはなく、Javascriptが使われるフレームワークと同じようにDOMで必要な変更を計算し、これらの変更をカプセル化してブラウザに送り返すだけであることです。SPA(シングルページアプリケーション)と同様、ページはリロードされません。

ネットワークを介したインタラクティブなプロセスを実行するために、Blazor Serverはblazor.server.jsファイルをブラウザにアップロードします。このファイルは、クライアントとサーバーのつながりを確立、維持し、たとえばネットワークが停止した際にアプリケーションの状態を復元する役割を果たします。

このモデルでは、Blazor Serverは、処理パフォーマンス、サポートツール、.NET Standardライブラリ等、.NET Coreで実行するすべてのメリットを継承します。したがって、Blazor Serverはブラウザの制限を受けません。同時に、Blazor Serverはブラウザにコードを公開しません。ブラウザが取得するのは、事前に計算されたDOMの更新のみです。

Blazor Serverには次の利点があります。

・ブラウザにダウンロードするファイルの容量が非常に小さいため、アプリケーションのブラウザへのダウンロードがより高速です。

・このアプリケーションは、サーバーのケイパビリティと.NET Coreの機能を活用できます。

・Blazor Server上では古いマシン、モバイルデバイス、古いブラウザ等のパフォーマンスが低いデバイスもより適切に機能します。

・アプリケーションのコード全体はクライアントに提供されません。

一方、下記のようなデメリットもあります。

・高速で安定したネットワーク接続が必要です。

・オフラインでの操作をサポートしていません。

・多くのユーザーに同時にサービスを提供する場合、サーバーに対する要件が高くなります。

・Asp.net Coreサーバーを使用してサービスを提供することが必要です。

Blazorの印象的な強み

■オープンWeb標準に基づいて構築されている

Blazorは、プラグインやトランスパイルなしで共通の標準に基づいて構築されます。Blazorは、モバイルを含むすべての最新ブラウザで動作します。

■.NETのコード、巨大なライブラリを継承できる

Blazorアプリは、広く普及している.NET APIの標準である.NETStandardによって、既存の.NETライブラリを使用できます。 .NET標準では、サーバー、ブラウザを含め、.NETコードを使用するあらゆる場所で同じコードとライブラリを使用できます。

■Javascriptのアセットを使用できる

C#を使用して、JavaScriptのライブラリとAPIを簡単に呼び出すことができます。そのため、必要に応じて、クライアント側ですでに使用可能な巨大なJavaScriptライブラリのエコシステムを継続して使用できます。

■ポピュラーな開発者ツールが使える

開発者に人気があるVisual StudioとVisual Studio Codeが使用できます。Windows、Linux、macOSのいずれのサーバーでもBlazorは開発可能です。

■豊富なUIコンポーネントエコシステムを所有する

Telerik、DevExpress、Syncfusion、Radzen、Infragistics、GrapeCity、jQWidgets等のトップベンダーが提供するUIコンポーネントを使用して、生産性を高めることができます。また、Blazorコミュニティが有する多数のオープンソースUIコンポーネントを使用できます。

■無料で強力なサポートコミュニティがある

Blazorは、3,700社を超える企業による強力なコミュニティを持つオープンソースの.NETプラットフォームの一部です。 商用利用を含め、一切の手数料はかかりません。

Blazorが適した開発案件は？

Blazorやその他のMicrosoft関連の開発におけるNTQの長年の経験より、以下のようなプロジェクトはBlazorでの開発に適していると考えています。

・最新のUIコンポーネントを使用するSPAやMVCアプリを作成する必要があるプロジェクト。

・ユーザーフレンドリーで柔軟なインターフェイスを備えたCRMシステムを作成する必要があるプロジェクト。

・ブラウザとモバイルデバイスの両方で使用できるWebサイトの開発が必要なプロジェクト。

・短納期であったり、関与者が多いプロジェクト(シンプルなBlazorを使うことでプロセスがスムーズになる)。

まとめ

Web開発は非常に幅広く多様であるため、一口にBlazorの未来を予測することはできません。Blazorはまだ若いフレームワークであるものの、クライアント側とサーバー側の両側で簡単に使うことができるという柔軟性があります。そのため、特に企業内の開発プロジェクトの中で迅速かつ確実にWeb開発を進めようとしている開発者に適したツールです。 また、BlazorはIT業界をリードするMicrosoftの.NETツールであり、彼らからの包括的なサポートを確実に得ることができます。

企業にとっては、Blazorを使用することで、人員やそれによって左右される予算の検討が楽になります。まず、Blazorを使用するプロジェクトは、フロントエンドエンジニアとバックエンドエンジニアを別々に要求しないため、関与するスタッフを最少化できます。また、 Blazorはシンプルで習得しやすく、開発者がプロ​​ジェクトの開発を開始する前の準備時間を削減することができます。

Microsoftの認定資格を有する強力な開発者が複数人在籍する開発チームにて、Blazorや.NETに関連するソリューションを検討するすべてのお客様に無料で相談会を実施しております。 お気軽にNTQまでご連絡ください。

お問い合わせページ

また、NTQでは社内エンジニアによる技術に特化した情報を配信しています。あわせて、ご覧ください。

【NTQ Engineer Insight】生産性と品質を上げるクリーンコードとその浸透のさせ方

【NTQ Engineer Insight】.NETアップグレードアシスタントで、Windows上のデスクトップア

プリを.NET6にマイグレート

【NTQ Engineer Insight】Microsoft365＆Azureクラウド