コンソールアプリ-テンプレートを用いたプロジェクト

通常、Blazor WebAssemblyを用いたWebアプリを作るにはテンプレートとしてVisualStudioのBlazor WebAssemblyを選択して行いますが、ここではテンプレートとしてコンソールアプリを選択して作ります。
コンソールアプリより作る目的は、余分なものを無くした最低の構成で動くBlazor WebAssemblyを用いたWebアプリを作るためです。
これにより、Blazor WebAssemblyの基本的な仕組みを理解します。

プロジェクトの新規作成
プロジェクトファイルの変更
index.htmlの作成
index.htmlの変更
Program.csの変更
Appコンポーネントの作成
プロジェクトの実行

(参考先)
この記事はZenn記載のKazuki OtaさんのASP.NET Core Blazor WebAssembly 入門を大いに参考にさせて頂きました。

プロジェクトの新規作成

VisualStudioより「新しいプロジェクトの作成」を選択します。
テンプレートよりコンソールアプリを選択します。
コンソールアプリには .NET Framework用と .NET用の二つのものがあります。ここでは.Net用のコンソールアプリを選んでください。
プロジェクト名に「HelloConsoleApp」と入力します。
フレームワークとして「.Net 8.0」以上を選択してプロジェクトの作成を行います。

プロジェクトファイルの変更

ソリューションエクスプローラーで「HelloConsoleApp」と表示されているのがプロジェクトファイルです。
これをダブルクリックして開くと以下のようなXML形式のファイルが表示されます。

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

</Project>

これは、.NET向けのコンソールアプリケーションのプロジェクトファイルになっているので、以下のようにBlazor WebAssembly用に変更します。

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.18" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.18" PrivateAssets="all" />
  </ItemGroup>

</Project>

・Project タグの SDK 属性で BlazorWebAssebmly のプロジェクトであるということを明示します。
・OutputTypeは削除します。
・PackageReference で ASP.NET Core Blazor WebAssembly 関連のパッケージを追加しています。
・WebAssemblyとWebAssembly.DevServerのバージョンはインストールされているバージョンをPowerShellのコマンド「dotnet --info」で調べ.Netのバージョンに合わせて変更します。

プロジェクトファイルの変更を保存します。このときVisual Studioでプロジェクトの再読み込みを求められる場合は再読み込みを行います。

index.htmlの作成

index.htmlはプロジェクトを実行したときに表示されるファイルです。
ソリューションエクスプローラーでプロジェクトファイルを右クリックし「追加」→「新しいフォルダ」でwwwroot フォルダーを作成します。
wwwroot フォルダーはプロジェクトの直下に作られます。
次にソリューションエクスプローラーでwwwrootフォルダを右クリックし「追加」→「新しい項目」→「HTMLページ」でindex.htmlを作成ます。
index.htmlファイルがwwwrootフォルダ中に次の内容で作られます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

これにタイトルとスクリプト指定を追加して次のように変更します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
</head>
<body>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

この状態でデバッグ実行を行うと Web ブラウザーが起動して index.html ファイルが表示されます。
まだ何も書いていないので真っ白な画面になりますが、ブラウザのタブにはタイトル「Hello World」が表示されますのでindex.htmlが読み込まれたのが確認できます、。
また表示されたブラウザーで F12 キーを押して開発者ツールを表示させ、コンソールタブを表示すると「Hello world !」と表示されているのが確認できます。
これはどこで表示しているのでしょうか？
ソリューションエクスプローラーでProgram.csの内容を確認すると次のようになっています。

// See https://aka.ms/new-console-template for more information
Console.WriteLine("Hello, World !");

どうもProgram.csでコンソールに「Hello world !」を書き込んでいるようです。
index.htmlは何も表示していませんが、スクリプトblazor.webassembly.jsは読み込まれ実行されます。
このスクリプトが動くとProgram.csが実行されるようです。
ちなみに、index.htmlからスクリプト記述を削除すると「Hello world !」は出力されなくなりました。

index.htmlの変更

今のindex.htmlは何も表示しませんので、「Hello world !」と表示する様に変更します。
単に「Hello world !」と表示するだけでは面白くありませんので、最初は「読込中...」と表示し、スクリプトを読み込むと「Hello world !」に変わるようにしたいと思います。
index.htmlを次のように変更します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
</head>
<body>
    <div id="app">読込中…</div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

スクリプトblazor.webassembly.jsが読み込まれたら　id="app"のタグのテキストを「読込中...」から「Hello world !」に変更する予定です。

Program.csの変更

スクリプトblazor.webassembly.jsが読み込まれたらProgram.csが呼ばれるのが分かりましたので、Program.csでBlazor WebAssemblyの機能を使ってindex.html内のid="app"のタグのテキストを「読込中...」から「Hello world !」に変わるようにします。
Program.cs を次のように変更します。

using HelloConsoleApp;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
await builder.Build().RunAsync();

WebAssemblyHostBuilderとは

WebAssemblyHostBuilderは、Blazor WebAssemblyアプリケーションのホスティング環境を構成するためのビルダーです。
Blazor WebAssemblyアプリケーションを起動する際に、WebAssemblyHostBuilderは以下の役割を担います。

アプリケーションのホスティング環境の構成:

Blazor WebAssemblyアプリケーションが実行されるブラウザ環境をセットアップします。

サービスの登録:

アプリケーションで使用するサービス（依存関係の注入など）を登録します。

ルートの構成:

アプリケーションのエンドポイント（URLとコンポーネントのマッピング）を定義します。

UIフレームワークの初期化:

BlazorのUIフレームワークを初期化し、コンポーネントのレンダリングを可能にします。

using HelloConsoleApp;

自作のコンポーネントを使用するには、作成したプロジェクトの名前空間をusingで指定する必要があります。

WebAssemblyHostBuilder.CreateDefault(args);

最も一般的な規則と設定を使用しての WebAssemblyHostBuilder インスタンスを作成します。

builder.RootComponents.Add<App>("#app");

builder:

Blazorアプリの構築に使うオブジェクト。アプリ全体の設定をここで行います。

RootComponents:

アプリの最上位コンポーネントを登録するためのプロパティです。

Add<App>("#app"):

App コンポーネントを HTML の id="app" を持つ要素にマウント（描画）します。
Appコンポーネントはまだ定義されていません。

await builder.Build().RunAsync();

Blazor WebAssemblyアプリの起動し、アプリ全体を「実行可能な状態」にして、ブラウザ上で非同期的にスタートさせます。
これにより、Blazorが初期化されて、UIのレンダリングやイベントの処理が始まります。

builder.Build()

これで WebAssemblyHost オブジェクトが作られます。

.RunAsync()

作成されたホストを非同期で実行します。

await

RunAsync() は非同期メソッドなので、完了を待つようにします。

Appコンポーネントの作成

Appコンポーネントを作成します。
Appコンポーネントはrazor ファイルとして作成します。
ソリューションエクスプローラーでプロジェクトファイルを右クリックし「追加」→「新しい項目」→「raiorコンポーネント」でApp.razorファイルを作成します。
App.razorファイルはプロジェクトの直下に作られます。

<h3>App</h3>

@code {

}

これを次のように変更します。

<h3>Hello World !</h3>

プロジェクトの実行

以上で必要なファイルが揃いましたので、ビルドして実行すると、以下のようにApp.razor で定義した内容が表示されています。

ブラウザ

Webサーバーへの配置はサーバーへの配置をご覧ください。

目次