.NET5 が出るまでもういいかなぁと思っていたんですが、 Blazor が面白そうなので手を出してしまいました。 そこでVB.NETしかわからない私がBlazorに手を出してアプリっぽいコードを書くまでの実体験を書いときます。
環境構築
ASP.NET Core Blazor の概要 | Microsoft Docs このサイトを参考にして環境を構築します。
参考元の
Blazor サーバー アプリを作成するには、ASP.NET および Web 開発ワークロードと共に、最新バージョンの Visual Studio 2019 をインストールします。
あたりを見れば分かる通り、ものすごく簡単に作れます。
あえてまとめると
- VisualStudio2019の最新版をインストールする
- Blazor WebAssembly プレビュー テンプレートをインストール
で終わり。
これでVisualStudioからBlazorアプリのプロジェクトが作れるようになります。
VisualStudioCodeでも環境を作ることができますが、そちらは省略。気になる方はリンク元を見てください。
サンプルを動かす
Blazorアプリのプロジェクトを作った時点で既にサンプルコードが記述されています。 F5でRUNさせましょう。
サイドメニューのあるいかにもな感じの画面が出てきます。
サンプルの中身を読み解く
公式ドキュメントにありますので読んでみましょう。
最初の Blazor アプリをビルドする | Microsoft Docs
この辺は面白いです。手を動かしながら知識を習得できるのでおすすめ。
ASP.NET Core Razor コンポーネントの作成と使用 | Microsoft Docs
この辺から仕様の話になるのでつまらなくなるｗ
知っておいたほうがいいんでしょうけど詰まったら読むことにする。
DB接続をしたくなる
業務アプリを作る身としてはDBに繋がらんことには何にもできないので繋げたくなる。ということでローカルにDB環境を作ることにした*1
実験レベルでいいならSQLiteとか軽量なものがいいんでしょうけど、クライアントも揃ってるSQL Server Express を入れることにした。これは本題ではないので割愛。
DBMSいれたら次はDB接続処理を書くことにする。一番つまらん処理ですね。というわけで先人のコードを探すことにする。
[ASP.NET Core] Blazor Preview 9 入門 (EF Core + SQL Server 編)
こちらのサイトを参考にしてDB接続処理を書きました。需要な点だけ抜粋。
ORマッパーEntityFramework （通称：EF）を使用します
Blazorを学習したいのに別のことも覚えなきゃいけないのは避けたいのですが、この際腹を括って覚えましょう。
ざくっとした所感
- DbContext ・・・ DB環境のこと。テーブル一覧っぽい印象。
- DbService ・・・ DBへのアクセッサ。CRUDはここに書く。SQLっぽい印象。といってもORMなのでSQLを書くことはない。今回は１テーブルのCRUDができればいいとおもったので、ここに全部書いたけど、複数テーブルでてきたときもここに全部書くんかな？そのへん謎。テーブルっていうかサービス単位に作るのが正しい気がする。
EFを使い込んだわけじゃないですが、いいんじゃないでしょうか。私の好きなDirtyCheckもしてるみたいだし。（？）
SQLServerへの接続
リンク元にあるコードで接続可。ただし
if "UseSqlServer" not working then install nuget package "Microsoft.EntityFrameworkCore.SqlServer" and write code "using Microsoft.EntityFrameworkCore;"
なので注意してください。
「そんなメソッドねぇよ」エラーが出るとびびるけど、たいだい拡張メソッドが原因です。usingで参照してあげましょう。
Pageで使用する
[ASP.NET Core] Blazor Preview 9 入門 (EF Core + SQL Server 編)
こちらのサイトを参考にして表示処理までしました。
EFの使い方がわかってる人ならなんてことはなく、またBlazor側の処理も公式のチュートリアルやってれば簡単に理解できるレベルです。
SQLをロギングしたくなる
いきなり脱線しはじめる・・・。
私の性格なんでしょうけどORM気持ち悪いんですよ*2。SQLという目に見える安心がほしいんです。 ということで前から気になってたILoggerを使ってロギングすることにします。
ロガーはNLogにしたかったので、上記のサイトを参考にしてロガーをNLogにしました。上記のサイトはピンポイントの情報なので、周辺のコード載せとくと
using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Logging; using NLog.Extensions.Logging; namespace BlazorAppSample.Data { public class BlazorDbContext : DbContext { private static readonly ILoggerFactory LoggerFactory = new ServiceCollection().AddLogging(builder => builder.AddProvider(new NLogLoggerProvider()).AddFilter(DbLoggerCategory.Database.Command.Name, LogLevel.Debug)) .BuildServiceProvider().GetService<ILoggerFactory>(); public BlazorDbContext(DbContextOptions<BlazorDbContext> options ) : base(options) { } protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) { optionsBuilder.UseLoggerFactory(LoggerFactory); } ・・・ } }
になる。意味は把握しきれていないが、
って感じなんだろう。
以下、未検証なので時間があったら直したほうがいいと思うことをメモ。（あくまでBlazorで使用する話）
- 上記のサンプルは、「サービスに突っ込む処理とFactoryクラス取り出す処理を一気に書いており、あんまりよくない気がする。
- ただ、ServiceCollectionが使い捨てなので問題が起きるわけではない気もする。
- いまはEFにロギングを足す ということに主眼を置いていたが、Blazorのロジックにロガーをいれたいなら「Startup.cs」のDI登録処理にこれらの処理を持っていき、サービスからFactoryなり、Loggerを取り出すほうが良い気がする。
できるかどうかは知らない。
UI Frameworkを探す
また脱線・・・
CRUDのCを作ろうと思ったとき、それっぽいデザインにしたいなぁと思って「Blazor デザイン」で検索したらUI Frameworkなるものが何個が見つかった。
他にも何個かありそうですが、matblazorのみ無償であとは有償。
今回は MatBlaor を採用して進めてみます。MatBlazorの感想を述べておくと・・・
メリット
- シンプルな配色
- 省スペースなTextField
特にロジック屋は配色に時間を割きたくないのでデフォルトでいい感じだと助かります。 変えたくなってもPrimaryとSecondaryの2色だけ設定すればよいのもGood。
デメリット
- AutoComplete のカーソル移動のレスポンスが遅め
- DataTable 機能が他と比べると弱め
- Chartがない
DataTable あたりは実務で本採用するなら辛いかも。
CRUDのCを作る
やべ、＊＊＊来たからまた日を見て書きます。
