こんにちは、TechFULでアルバイトをしているAtriaです。
現在はTechFULで出題される問題の作成をしています。
さて、みなさんはWebフロントエンド開発を行う際にどのようなフレームワークを利用するでしょうか。
Vue, React, Angular, Django, Ruby on Rails.... 様々なものがありますね。
そんな様々なWebフレームワークがある中で、私が最近特にアツイと思っているものが Blazor になります。
Blazorってなんだ
Blazor(読み : ぶれいざー) とは JavaScriptの代わりにC#で記述することができるWeb開発フレームワーク です。ASP.NETの一機能とされています。
C#を利用するため、型に守られながら .NET の資産を生かした開発を行うことが可能になります。
また、Blazorアプリケーションは、"コンポーネント" に基づきます。
Blazor のコンポーネントとは、ページ、ダイアログ、データ、エントリ、フォームなどの UI の要素を指します。
実際に自分はBlazorを利用して以下のようなポートフォリオサイトを遊びで作ったりしています。
Blazorで作成したCUI風のポートフォリオサイト
この記事ではまずはじめにBlazorの特徴をご紹介いたします。
特徴1 : .NET Standardの基礎の上でC#により記述する
Blazor最大の特徴です。BlazorはC#+HTML+CSSを使用してWebアプリを作成します。
C#とはマルチパラダイムな静的型付け言語であり、CとJavaの影響を強く受けている言語です。
C#といえばWindows機のイメージがありますが、 .NETCoreの恩恵により、Windows機はもちろん Linux(macOS) での開発も可能です。
また、.NET Standardがあるおかげで既存の .NETライブラリを利用できる(NuGetを利用できる)のがアツイです。
特に自分は LINQ(統合言語クエリ) というデータ処理機能が好きなため、C#の恩恵をモロに受けています。
余談 : LINQ(統合言語クエリ)
Blazorから少し外れC#の話題になります。余談ですので読み飛ばしてもらってもかまいません。
LINQ(統合言語クエリ) を利用するとデータ集合の扱いを簡単にすることができます。
例えば
名前と年齢が格納されているデータ集合が与えられる。
未成年(19才以下)を省いたデータ集合を新しく作り出力せよ。
なんてものが求められる場合は
using System; using System.Collections.Generic; using System.Linq; namespace CP { class Atria { static void Main(string[] args) { //人物名と年齢(簡単にするためにDict使ってます) var ls = new Dictionary<string, int>() { {"hoge",11}, {"fuga",23}, {"boo",35}, {"bar",12}, {"piyo",19}, {"nyan",20}, }; var ansDic = new Dictionary<string, int>(); foreach (var item in ls) { if (item.Value >= 20) { ansDic.Add(item.Key, item.Value); } } foreach (var item in ansDic) { Console.WriteLine($"{item.Key} : {item.Value}"); } } } }
の36行での記述となり、実行結果は以下のようになります。
fuga : 23 boo : 35 nyan : 20
この記述がLINQを利用すると
using System; using System.Collections.Generic; using System.Linq; namespace CP { class Atria { static void Main(string[] args) { //人物名と年齢(簡単にするためにDict使ってます) var ls = new Dictionary<string, int>() { {"hoge",11}, {"fuga",23}, {"boo",35}, {"bar",12}, {"piyo",19}, {"nyan",20}, }; foreach (var item in ls.Where(x => x.Value >= 20)) { Console.WriteLine($"{item.Key} : {item.Value}"); } } } }
で出力は変わらず9行減の27行になります。超便利。
LINQについては過去に以下のようなLTをしたことがありますので、興味が湧いた方は覗いてみてください。
Linqの魅力 / attractiveness of Linq - Speaker Deck
そしてそんな言語で記述できるBlazorはすばらしい。
特徴2 : WebAssembly またはサーバーで実行
Blazorには Blazor WebAssemblyとBlazor Serverの2種類があります。
われわれ開発者は、使用用途に合わせてこの2つのうちから選びます。
Blazor WebAssemblyでは、いわゆるSPAフレームワークです。モバイルブラウザを含めたすべての最新のWebブラウザで動作します。
Blazor Serverと比べ最初のダウンロードに時間がかかるのが欠点ですが、ダウンロード終了後はオフラインの状況下でも軽快に動作します。
Blazor Serverでは、ASP.NET Core アプリでサーバー上の Razor コンポーネントをホストします。
サーバーサイドで動作するため、Blazor WebAssemblyと比べてロード時間が短く、デバッグが行いやすいのが特徴です。
一方欠点として、常時Webサーバーとブラウザが接続している必要があります。
自分の場合、オフラインの状況下でも利用したいものにはBlazor WebAssemblyを
デバッグやロード時間を気にする場合はBlazor Serverを採用することが多いです。
これらについての詳しい説明は以下の公式ドキュメントで説明されています。
ASP.NET Core Blazor の概要 | Microsoft Docs
特徴3 : JavaScript 相互運用
C#からJavaScriptを呼び出すことができます。
実のところ、Blazorで利用しているC#だけではどうしても手の届かない複雑な処理というものが存在します。
そのような場合、JavaScriptコードをC#から呼び出すことで解決することができます。
つまり、Blazorだからできないということはありません。
基本はC#で記述し、ときにはJavaScriptも呼び出せる。最高です。
特徴4 : だいぶ新しめの技術
Blazor Serverは2019年に、Blazor WebAssemblyは2020年にリリースされた技術です。
他のWebフロントフレームワークと比べ比較的新しいため、まだまだ日本語文献が少なかったりします。しかし、そこが面白かったりします。
特徴5 : オープンソースで無料
BlazorはApache-2.0 Licenseのもとオープンソースとして公開されています。
aspnetcore/src/Components at main · dotnet/aspnetcore
サンプルプロジェクトを覗いてみる
今回はBlazorのプロジェクトを作成した際に生成されるプロジェクトを覗いてみましょう。
開発環境
- Windows 10
- .NET Core3.1
- Visual Studio 2019
- Blazor WebAssembly
プロジェクトの作成
まずはBlazorプロジェクトを作成します。
新しいプロジェクトを作成(N) を選択して
Blazorアプリ を選択して 次へ をクリックします。
作成 をクリックします。
プロジェクト完成後はVisualStudio画面上部の ISS Express をクリックすることでBlazorアプリケーションをデバッグビルドすることができます。
生成されたファイルを見てみる
今回は特にカウンターページに着目して生成されたファイルを見てみましょう。
カウンターページは、デバッグビルドした際に左側メニューに表示される Counter のページです。
Pages ディレクトリ下にあります。
開いてみると以下のような記述がされていることを確認することができます。
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
この記述法こそBlazorで用いられる"Razor構文"になります。(コードはシンタックスハイライトを効かせるためにhtmlとして表示しています)
上部はHTML感があり、@codeの中身はC#感があります。
個人的にはCSSを書く場所のない .vueファイルと言う感じがします。
このファイル記述を説明すると
@code内でint型の変数currentCountを宣言している。<p>Current count: @currentCount</p>では、@currentCountの部分にcurrentCountの値が直接入りレンダリングされる。<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>では@onclickディレクティブを利用してbuttonのクリックイベントにIncrementCountメソッドを設定している。IncrementCountメソッドは呼ばれるたびにcurrentCountの値を1加算する
というものになっています。
また、@page "/counter" ではアクセス先のURLを記述しています。
このように、Blazorを利用するとC#によってSPAを開発することが可能となるのです。
Blazorの未来
少し古い画像ですが、以下の図はBlazorが将来目指していくものが記述されています。
感覚としては React Nativeに近いでしょう。
まだ開発段階ではありますが、Mobile Blazor Bindings (プレビュー版) を使えば現時点でもBlazorによるネイティブモバイル開発が可能です。
(内部でXamarinが動いている.NETオタクとしては心踊る技術だったりします)
また、最近では.NET MAUIという最新のUIフレームワークの中でBlazor Webアプリケーションをホストすることを可能にするBlazorWebViewなども発表されています。(これもまたすごい技術)
Blazorを取り巻く環境は日々進化していくことでしょう。
最後に
今回は自分が大好きなC#でSPA開発ができるWebフロントフレームワークBlazorの話をしました。
この記事を読んでBlazorに興味を持ってくだされば幸いです。
つたない文章でしたが、最後まで読んでくださりありがとうございました！
