C# Blazor 書初め

正月ってことで書初め。自分メモとして履歴残します。

やったこと

これをやって要点をまとめました。コピペで10分で確認できるようにまとめてあります。

入れたもの

フォントは最近お試しで使い始めているもの。ゼロ0とオーOが違うなどのPG向き。

• VSCodeUserSetup-x64-1.52.1
• dotnet-sdk-3.1.404-win-x64
• JetBrainsMono-2.221

TL;DR

こまけぇこたぁいいんだ。これだけやれば理解できた気になれる。

プロジェクト生成

• cd /c/git
• dotnet new blazorserver -o TodoList
• cd TodoList

アプリ起動

watch でファイル変更時にリコンパイルかかる。

• dotnet watch run

page追加

• dotnet new razorcomponent -n Todo -o Pages

Pages/Todo.razor

@page "/todo"

<h3>Todo</h3>

@code {

}

@page "/todo" を書くことでURLが解釈される。書かないと

Sorry, there's nothing at this address.

が出てページなしエラーとなる。
ルーティングを各ページに書くのね・・・メモメモ。

menu追加

Shared/NavMenu.razor

<li class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</li>

ここまで書けば、メニュークリックで新しい表示が出来ます。

処理追加

プロジェクト (TodoList フォルダー) のルートに TodoItem.cs ファイルを追加します。

TodoItem.cs

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

razor側にもコード追加

Pages/Todo.razor

@page "/todo"

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

え、インポート文とかいらないの？F12で参照ジャンプできるんですけど、なにこれすごい（語彙力

残課題

仕事用の検証としてはまだまだ確認できていない事があるのでメモ。

• Material Design な UI コンポーネントライブラリ（MatBlazor）を使ってみる
  https://www.matblazor.com/
• APIの非同期通信と、通信中のグルグル表示
• IndexedDBでローカル保存
• サーバーサイドレンダリングとクライアントSPAの違い、メリデメ比較

まとめ

Reactで普通だと思ってたことが、若干「竹槍」に感じるくらいに楽にコード書ける（かもしれない。まだ検証不足）

ReactはCordovaでネイティブアプリ作れるメリットがあるので、住み分けするならBlazorをWeb用で高速開発、Cordovaでスマホアプリか。

xamarin? おや、誰かきたようだ