みなさんGWをいかがお過ごしでしょうか？ウマ娘の育成に励んでいらっしゃいますでしょうか？私はまぁぼちぼちと言ったところです(最強のマックイーンが作れなくてむせび泣いている程度)。さて、今回は前回記事を書きました燻製監視アプリ開発の一環として、スマホで閲覧できるページを C# の Blazor WebAssembly で作るためのお勉強をしていきたいと思います。完全に備忘録扱いになりますので、間違ってるよとか色々あるかもしれませんので扱いにはお気を付けください。また、指摘大歓迎です。

Blazor WebAssembly

C# を用いてWebアプリが開発できるフレームワークです。正式リリースが2020年5月なのでかなり新しいサービスという事になります。つまり情報がほとんどなく今から始めようというのはイバラの道ですね。…けどほら、いばらの道の方が楽しいじゃない？ちなみに開発はご存じ Visual Studio 2019 から行うことができます。慣れた環境で開発できるのはいいですね！ちなみに WebAssembly はクロスプラットフォーム開発でいろいろ作れちゃうでおなじみ Uno Platform でも作成可能で、さらに言えば Xamarin.Forms と同じ書き方で作成できます。こちらは以前やってみてるので興味がある方はこちらをご参照ください。

www.gunshi.info

さっそくやってみよう

Microsoft公式にあるこちらを用いてやってみました。

docs.microsoft.com

ただし、こちらの記事は VisualStudioCode を用いて作成しているのでそこだけ注意しましょう。まぁ最初のプロジェクト作成手順以外はかわらないです。

環境

Microsoft Visual Studio Community 2019 Version 16.8.2

VisualStudio2019 でプロジェクトの作成

VisualStudio2019 からファイル → 新規作成 → プロジェクト → Blazor アプリを選択→プロジェクト名を入力→ Blazor WebAssembly App を選択して作成します。 f:id:roamschemer:20210430051703p:plain f:id:roamschemer:20210430051743p:plain

構成を確認してみる

docs.microsoft.com

Pages

各ページに該当する部分です。ページを追加したければ Pages を右クリック → 追加 → Razorコンポネートで追加します。
Shred
1. NavMenu.razor
  
  画面左側にあるメニューに該当する部分です。ここの <ul class="nav flex-column"> に<li class="nav-item px-3"> を追加することでリストにページを追加できます。
2. MainLayout.razor
  
  全体のレイアウトに該当する部分です。今は理解できませんが、そのうち理解できるようになります。
3. SurveyPrompt.razor
  
  Blazorの使い勝手などに関するアンケートページに飛ばされる部分です。Pages.Index の <SurveyPrompt Title="How is Blazor working for you?" /> から参照されているようですね。開発には不要なファイルですが、コーディングの参考にはなるかと思います。

要点や躓いたところ

NavMenu.razor と Page ってどう結ぶん？
1. Pages に追加した .razor の頭に @page "/[pagename]" を追加する。
2. Shared.NavMenu.razor の <ul class="nav flex-column"> 内に <li class="nav-item px-3"> を追加するが、その際 <NavLink class="nav-link" href="[pagename]"> とする。
メニューをクリックしたのに選択されないしなんか青い

クラス名を間違っていました(class="nav-item px-3"とするべきところをclass="navi-item px-3"としていた)。間違っていても実行時にエラーにはならないし VisualStudio 上でも特に指摘してくれません。気を付けましょう。
変数はどう取り扱うの？

@code{}で囲んだ部分を作成し、C#で変数(やメソッド)を記述してそれを html 側で呼び出して使用します。表示するだけなら@変数名だけで、inputとかを使う場合は@bind="変数名"でいいのかな？なお、勝手に双方向でバインディングしてくれる模様です。

<table class="table">
    <tr>
        <th>最初</th>
        <th><input @bind="Val1" /></th>
    </tr>
    <tr>
        <th>2番目</th>
        <th><input @bind="Val2" /></th>
    </tr>
    <tr>
        <th>3番目</th>
        <th><input @bind="Val3" /></th>
    </tr>
    <tr>
        <th>Total:</th>
        <th>@Total</th>
    </tr>
</table>

<button class="btn btn-primary" @onclick="Calculate">Calculate</button>

@code {
    private double Val1 { get; set; } = 5000;
    private double Val2 { get; set; } = 5;
    private double Val3 { get; set; } = 10;
    private double total { get; set; } = 0;
    private string Total { get; set; }
    private void Calculate() {
        var total = Val1 + Val2 + Val3;
        Total = total.ToString();
    }
}