テクニカルノート

コンポーネントとは
ルーティング
SPA（Single Page Application
HTMLの作られ方
イベント処理

コンポーネントとは

Blazor WebAssemblyのコンポーネントは、アプリケーションの画面に表示される部品です。
Blazorではフォームや入力項目など様々なものがコンポーネントとして提供されています。
また、ユーザーもコンポーネントを作ることが出来ます。ページもコンポーネントです。
ユーザーは再利用可能なコンポーネントを定義していき、提供されているコンポーネントや自分で定義したコンポーネントを組み合わせてアプリケーションを作っていきます。

ルーティング

Blazor WebAssembly で Index.razor が呼び出される仕組みは次のようになります。

ユーザーが URL（例：https://eternalboy.stars.ne.jp/match）にアクセス
Web サーバーが wwwroot/index.html をクライアントに返す
ブラウザが index.html をレンダリングし、必要なスクリプトを読み込む
blazor.webassembly.js を通して .NET ランタイムとアプリを初期化
JavaScript が Blazor ランタイムを起動し、C# の Program.cs を実行
builder.RootComponents.Add("#app") により
に App.razor がマウントされる
App.razor を表示
Routerコンポーネントにより、ブラウザの現在の URL に基づいて、対応する .razor ページを表示
Index.razor を表示

つまり…
・index.html は Blazor アプリの外側にある純粋な HTML ファイル
・ブラウザの表示処理 → Blazor の起動処理（JS＋.NET）→ App.razor の表示 → ルーティング → Index.razor という順序です
さらに面白いのは、この構造によって Blazor アプリは SPA（Single Page Application）として動作する点です。
画面遷移しても、index.html は再読み込みされず、すべての処理が JavaScript＋WebAssembly 上で完結します

SPA（Single Page Application

SPA（Single Page Application）とは、ページ全体を再読み込みせずに動作するWeb アプリケーションの形態です。
次のような特徴があります。

ページ再読み込みなし

ユーザーが別のページに移動しても index.html は再読み込みされず、内部的に画面内容だけを切り替えます

クライアントサイドで完結

JavaScript や WebAssembly によって、すべての処理がブラウザ側で動作します

高速な操作感

ネットワーク通信が少なく、ページ遷移がスムーズです

初期ロードが重め

最初にすべてのリソース（JS、DLLなど）を読み込むのでやや時間がかかります

ブラウザ履歴・URL対応

JavaScript で URL を操作し、ユーザーの履歴機能やブックマークにも対応します

HTMLの作られ方

index.html の <div id="app">...</div> に MainLayout.razor を表示

MainLayout.razor の @Body　に各ページの.raizor を表示する

イベント処理

Blazor WebAssembly では、ボタンのクリックなどのイベントの処理を C# で書くことが出来ます。
クリック時のイベントのイベントハンドラを追加するには button タグに @click="呼び出されるメソッド名" のように指定します。呼び出されるメソッドの定義は razor ファイルに @code { ... } で囲まれたブロック内で定義します。
Hello Worldアプリにボタンを追加します。App.razor を以下のように書き換えます。

@using Microsoft.AspNetCore.Components.Web
<h3>@Message</h3>

<button @onclick="ToJapanese">To Japanese</button>

@code {
    private string Message { get; set; } = "Hello world";
    private void ToJapanese() => Message = "こんにちは世界";
}

@using Microsoft.AspNetCore.Components.Web

button タグなどの基本的な HTML タグのイベントに対応するイベントハンドラを定義するためには Microsoft.AspNetCore.Components.Web 名前空間の using が必要になります。

<h3>@Message</h3>

@code { ... } 内で定義されたプロパティMessageを表示します。

<button @onclick="ToJapanese">To Japanese</button>

ボタンクリックイベントのイベントハンドラを指定します。
button タグに @click="呼び出されるメソッド名" のように指定します。
呼び出されるメソッドは@code { ... } で囲まれたブロック内で定義されます。

@code { ... }

@code { ... } で囲まれた部分にはメソッドの他にプロパティ、フィールド、メソッドなどが定義できます。

private string Message { get; set; } = "Hello world";

プロパティMessageを定義しています。初期値は"Hello world"です。
ここで定義されたプロパティはHTML を内で <h3>@Message</h3>" などの様に参照できます。

private void ToJapanese() => Message = "こんにちは世界";

メソッドToJapaneseを定義しています。
実行されるとMessageプロパティに "こんにちは世界" が入ります。
定義されたメソッドはHTML を内で @onclick="ToJapanese" などの様に参照できます。

目次