どうも、もりもりです。
今月ついに.NET 5.0がリリースされましたね。
今回は.NETでSPA(SinglePageApplication)を実現できるWebフレームワークの
BlazorWebAssemblyを触ってみました。
SPAとは、ページ遷移を行わない単一Webページで動作するWebアプリです。
一般的なWebアプリではJavaScriptを用いてSPAを実現しますが、
C#だけでできてしまうってC#erからしたら嬉しくないですか?
はじめに
Blazorには2種類のモデルがあり、サーバーサイドで動作するBlazor Serverと、
ブラウザ上で動作するBlazor WebAssemblyがあります。
Blazor Serverは、サーバー上の.NET Core環境で主な処理が行われ、サーバー側がブラウザのDOMを変更します。
Blazor WebAssemblyは、最初に.NETアセンブリとランタイムがブラウザにダウンロードされ
ブラウザ上で.NETコードを実行し、別途プラグインなどは不要です。
vscodeでBlazor WebAssemblyプロジェクトを作成して、
さらにTodoMVC
のようなTodoページを追加してみました。
プロジェクト作成
まずは任意の場所で下記コマンドを叩いてプロジェクトを作成します。
プロジェクト構成
確認すると初めからテンプレート的な感じで3つほどページが用意されています。
ソースコードは下記に置いてます。
アプリ起動
ということで早速実行してみましょう。
BlazorWasmSampleまで移動して下記コマンドで実行します。
https://localhost:5001 にアクセスします。
シンプルで今風な感じの画面が表示されました。
Homeメニューには、おなじみの「Hello world」ですね。
Counterメニューをみてみましょう。
ボタンをポチポチするとカウントアップされていきます。
最後はFetch dataページです。
こちらはGrid的な表の画面です。
標準のtableなので編集やソートなどフィルタリングなどはできません。
このあたりはいい感じのパッケージがないかまた探してみます。
ソースを確認
Counterページのソースを確認してみましょう。
Counter.razor
これだけで書けてしまうんですね。
すごい。シンプル。
ボタンをクリックすると @code
内の変数 currentCount
がインクリメントされ
画面上の @currentCount
に反映されるようです。
Todoを追加してみる
◆ 追加 / 編集ファイル
では、TodoMVCのような
ページを追加してみましょう。
追加、編集するファイルは下記の4つだけです。
◆ TodoItemクラス追加
まずはTodoアイテムのクラスを追加します。
TodoItem.cs
◆ Viewと処理を分けてファイルを追加
次に画面と処理ですが、コードが長くなってしまうのでrazorファイルにはViewのみとし、処理はpartialクラスにしてTodo.csと、ファイルを2つに分けて追加します。
Todo.razor
Todo.cs
◆ 入力したTodoアイテムを追加
Todoを入力してEnterでどんどん追加していくようにします。
※現状、Enterを2回押さないとリストに追加されないのでまた時間ある時にデバッグして調べてみます。。。
Todo.razor
Todo.cs
◆ Todoリスト表示
追加したアイテムは下記のように表示します。
TodoItem.IsDoneをCheckBoxに、TodoItem.ContentをTextBoxにバインドしてます。
Todo.razor
◆ Todoアイテムのチェック変更
追加したアイテムのCheckをONにすると取消線を入れ文字色をグレーに、OFFにすると黒に戻すようスタイルと処理を追加します。
Todo.razor
色と装飾をTupleで返します。
Todo.cs
◆ 未完了アイテムの残数表示
未完了のActiveなTodoItemのカウントを左下に表示します。View側に直接LINQでバインドしちゃいます。
Todo.razor
◆ 表示内容の切り替え
全て / 未完了 / 完了と表示を切り替えるボタンを追加し、メソッドをView側でバインドする。
Todo.razor
Todo.cs
◆ 完了アイテムのクリア
完了アイテムが一つ以上ある場合はClear completedボタンを表示するようにし、
クリックで完了アイテムをメモリから削除する。
Todo.razor
Todo.cs
◆ メニューへTodoページを追加
最後に、Todo.razorで指定した @page "/todo"
へのリンクをメニューに追加します。
NavMenu.razor
さいごに
記事の内容は長くなってしまいましたが、思ってたよりもスッキリとコードが書けるのでサクっと作れてしまいました。
ただブラウザにランタイムや.NETアセンブリをダウンロードして実行するので機能の多いアプリにしてしまうとダウンロードに時間がかかってしまうようです。
それでも手軽にSPAをC#で作れちゃうってなかなかイイですね。
今回追加したTodoはスタイルとか特にセットしてないので味気ない感じになってますが
MatBlazorのようなマテリアルデザインのUIフレームワークもあり
面白そうなので近々使ってみようと思います。
以上、もりもりでした。