発端
Blazorを勉強するのになんかいい教材ないかなぁと探してたらYoutubeにチュートリアル動画(英語)が上がっていたので自動翻訳字幕見ながらまとめてみました。
https://www.youtube.com/watch?v=xr56fmgLl74&list=PL4WEkbdagHIR0RBe_P4bai64UDqZEbQap
★★★★注意★★★★
翻訳ではなく
「そんな感じのこと言ってるなぁ」
「全然違うこと言ってるけどつまりはそういうことか」
ということをまとめてます。
EP01：Blazorの基礎
- ASP.NETでサーバーサイドで処理してたけど、サーバーのリソースいっぱい使うよね
- react angular vueとかでクライアントサイドのリソース使えばサーバーのリソース使わなくて済むよね
- でも認証コート書くわけにはいかないし、複数の言語使うの面倒だよね
- WebAssembly使えばサーバーサイドもクライアントサイドも全部C＃で書けるよ
- VisualStudioでBlazorのプロジェクト作るとサンプルが勝手にできるよ
- 動かしてみるとどんな感じでリクエスト飛んでるかよくわかるね。
EP02：サンプルの解説とページの追加
- 「Index.razor」「Counter.razor」「FetchData.razor」って奴らがナビゲーションをクリックしたときに表示されるWebページだよ。
- 各ファイルの頭に「
@page "(パス)”」ってなってるね。例えば「Counter.razor」なら「@page "/counter"」とか。 - 「Counter.razor」見てみるとHTMLと「
@code{}」みたいなのが書かれてるね - 「Counter.razor」みたいに、HTMLの部分に「
@変数名」「@onclick="関数名"」、「@code{}」の中に変数宣言と関数って書くと動くんだね。 - 「Counter.razor」でいうところの「
@currentCount」「@onclick="IncrementCount"」と「private int currentCount = 0;」「private void IncrementCount(){currentCount++;}」だね。 - 「FetchData.razor」では天気と気温をテーブルに表示してるね。
- 「FetchData.razor」のHTML部分では
forecastsっていうオブジェクトからデータを取ってきてforeachで回してるね。 forecastsはコード部分に宣言されててWeatherForecastクラスの配列だね。- WeatherForecastクラスは「WeatherForecast.cs」で宣言されてるね。
forecastsはOnInitializedAsync関数をオーバーライドして初期化の時に非同期でForecastServiceっていうオブジェクトから引数に現在の時間を指定して値を設定してるね。ForecastServiceはWeatherForecastService.csで定義されてるね。
(Task.FromResultってなんやろう？)
タスク ベースの非同期プログラミング
https://docs.microsoft.com/ja-jp/dotnet/standard/parallel-programming/task-based-asynchronous-programming
C# 並行・並列プログラミング パターン集
https://qiita.com/takutoy/items/c384fcb439d345a9a0d3
→そうか、このメソッドが非同期処理で、戻り値がTask<WeatherForecast[]>やからこれを使うんやな。
+ (「Enumerable.Range(1, 5).Select」…？)
[C#] 連番の作成 (Enumerable.Rangeの利用）
https://qiita.com/koara-local/items/534376eabd11c64d31af
→連番作成のメソッドとLINQの組み合わせかぁ
(アロー演算子もよう知らんねんなぁ…)
デリゲート - C# によるプログラミング入門 | ++C++; // 未確認飛行 C
https://ufcpp.net/study/csharp/sp_delegate.html
→関数ポインタの考えを発展させたみたいな感じやな。
古典的に書き換えるとこんな感じか。
LINQもアロー演算子も確かにコード量は減るけど、初学者には厳しいなぁ…
varrng=newRandom();varret=newWeatherForecast[5];for(inti=0;i<5;i++){vartmp=newWeatherForecast();tmp.Date=startDate.AddDays(i);tmp.TemperatureC=rng.Next(-20,55);tmp.Summary=Summaries[rng.Next(Summaries.Length)];ret[i]=tmp;}returnTask.FromResult(ret);ForecastServiceが使えるのは「FetchData.razor」の上で「@inject WeatherForecastService ForecastService」って書いてるからだよ。- じゃ自分でページを追加してみようか
(ちょっとまて、ForecastServiceの実体はどこやねん)
→EP04で解説されてた。「Startup.cs」のConfigureServicesメソッド内で
「services.AddSingleton<WeatherForecastService>();」
って感じでシングルトンつくって@injectで使ってるんか。
- 「Authors.razor」っていう名前でRazorコンポーネント追加するよ
- 「Authors.razor」の頭に「
@page "/authors"」って書くよ。「Index.razor」「Counter.razor」「FetchData.razor」と一緒だね。 - 「MainLayout.razor」と「NavMenu.razor」を見てみよう。
- 「NavMenu.razor」には「
@page」が無いね。他のRazorコンポーネントから部品として呼ばれるようにするにはこんな風に書くよ。 - 「MainLayout.razor」には「」って書いてあるね。こうやって「NavMenu.razor」を組み込んでるんだよ。
- 「MainLayout.razor」の「
@Body」は「NavMenu.razor」の操作で変わるよ。 (詳しく説明はないけど「MainLayout.razor」に「@inherits LayoutComponentBase」ってあるからLayoutComponentBaseって奴から継承した機能なんかなぁ) - 「NavMenu.razor」のメニューコピペ編集したらAuthorsってメニューが追加されてクリックしたら追加した「Authors.razor」が表示されたね。
(とりあえずEP10まで見たけど、まとめると結構時間かかる)
