Blazor Webassembly触ってみる
初めに
こんにちは！
私は，現在プログラミングに熱中しているしがない大学生です．
今回は，最近勉強しているC#で作れるWebFramework，Blazorを使って簡単なチュートリアルを通して行きたいと思います．
作業環境
今回はVisualStudioを使って，開始～デプロイまで作業を行いました．
今回やること
公式チュートリアル沿ってBlazor Webassemblyを触り，StaticWebAppにデプロイまで通していきます．Static Web Appについての説明は省かせて頂きます．
→ 参考にした記事
いざ触ってみる
アプリの作成
VisualStudioの「新規プロジェクト作成」からBlazor Webassembly(※以下Blazorと省略)の項目を選択し，Blazorのアプリを作成してもらいます．
Githubにアップロード＆Static Web Appにデプロイ
Githubに作成したプロダクトをPushし，Azure PortalからStaticWebAppのリソースを作成します．
リソースグループを作成し
その中にStaticWebAppを作成．
これが完了すると，自動で紐づけたrepositoryにworkflowフォルダとGithub Actionsの設定ymlファイルが追加されデプロイされます．すごく便利です．
本番環境で見ることが出来ました．
これが初期画面です．
驚いた事に，初期実装でローディング画面がついていました👀
カッコいい…
アプリの中を書き換える
デプロイが完了したので，開発の方を行っていきます．
今回は，チュートリアルの解説を読みながら自分でTodoアプリを作ってみたいと思います．
（ただしデータバインドの設定は後日）
機能を観察
ナビゲーションタブが左側にあったので，この設定部分を見ていきいます．
このファイルみたいです．
そこにTodoのナビゲーションを追加
NavLinkタグでページの遷移を行い，描画する内容を切り替えているみたいなのでそれを真似て，呼び出すページの編集を行います．
今回はTodoリストを書くために，初期実装で存在したCounterページコンポーネントの書き方を編集し挙動を探っていきます．
なので，PagesのフォルダにTodoのコンポーネントを追加します．
Counterの中の記述はこんな感じでした．
公式チュートリアルに書いてあったように，Blazorでは＠codeにC#で関数や変数を定義し，HTML的な部分で@マークを付けることで呼び出すみたいです．
また，変数については値が更新される度に参照し直してくれるみたいで，Reactで言うところuseEffectのような記述は無くても更新してくれました．
ということで，何となく挙動がわかったので，Todoのコンポーネントを書き換えていきます．
書き換えた結果 (Pages/todo.razor)
@page "/todo"
<h3 class="mb-4">Todo List</h3>
<span class="me-2">見積もり時間(分):</span>
<input id="text1" type="text" @bind="@time" />
<span class="mx-2">タスク:</span>
<input id="text2" type="text" @bind="@task" />
<br />
<button class="my-4" @onclick="ButtonClick">Button</button>
<table class="table">
<thead>
<tr>
<th>見積もり時間(分)</th>
<th>タスク</th>
</tr>
</thead>
<tbody>
@foreach (var task in tasks)
{
<tr>
<td>@task.estimateTime</td>
<td>@task.task</td>
</tr>
}
</tbody>
</table>
<div>@result</div>
@code {
private int time = 0;
private string task = "";
private int sumTime = 0;
private string result = "";
private List<Task> tasks = new List<Task>(){};
public class Task
{
public int estimateTime;
public string? task;
}
void ButtonClick()
{
sumTime += time;
var inputTask = new Task()
{
estimateTime = time,
task = task
};
tasks.Add(inputTask);
result = string.Format("合計時間は {0:d}分 です。", sumTime);
}
}
見た目
解説
inputで入力された値を保持するために，＠code内にTaskを管理するためにTaskのクラスを宣言し，List<>で格納しておくことで，HTML要素で＠foreachを使って描画しています．
Table的なレイアウトは，Fetch dataのレイアウトを参考に書きました．
デプロイ(Pushするだけ)
最後にこの差分をgithubにPushします．
先にStatic Web Appのリソースに紐づけておいたので，デプロイのWorkflowが走ります💨
完了しました！
今回のプロダクト
https://polite-bush-0e54a3900.2.azurestaticapps.net/
最後に
今回は簡単な実装でTodoアプリを作成しました．
初めてのBlazorでしたが，直感的に書きやすい部分が多く，データの反映も基本的に楽な記述で行ってくれるので，これから使ってみたいと思いました．
次回は，今回のようなアプリで入力されてデータをStrageリソースにバインドする部分までやってみたいです🍵