C# ASP.NET Core Blazor Webアプリで Hello World する

# C# ASP.NET Core Blazor Webアプリで Hello World する

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 24.04 で C# ASP.NET Core Blazor Webアプリケーションを作成して Hello World を出力する方法を紹介します。
![blazor_on_ubuntu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/621aa72d-f706-2f63-24e4-521b4a28e139.png)

## 目的

Windows 11 の Linux でクラウド開発します。

こちらから記事の一覧がご覧いただけます。

https://qiita.com/studio_meowtoon/items/6119ab05d8b13527efd8

## 実現すること

ローカル環境の Ubuntu で、C# ASP.NET Core Blazor の DLL ファイル形式のアプリを起動します。

:::note alert
C# には本来[厳格なコーディング規則](https://learn.microsoft.com/ja-jp/dotnet/csharp/fundamentals/coding-style/coding-conventions)がありますが、この記事では可読性のために、一部規則に沿わない表記方法を使用しています。ご注意ください。
:::

## 技術トピック

### ASP.NET Core Blazor とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

### [Blazor (ブレイザー)](https://learn.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-7.0)

:::note info
ASP.NET Core Blazor は、C# を使ってブラウザー上で Web アプリケーションを構築するためのフレームワークです。Blazor は、Webアプリケーションを開発するための新しい方法を提供します。Blazor アプリケーションは、C# によって開発され、WebAssembly またはサーバーサイドで実行されます。

|キーワード|内容|
|:--|:--|
|C# 言語の使用|Blazor は、C# を使用してフロントエンドの Web 開発を行うことができます。|
|WebAssembly またはサーバーサイド実行|Blazor アプリケーションは、WebAssembly またはサーバーサイドで実行することができます。|
|コンポーネントベースのアーキテクチャ|Blazor は、コンポーネントベースのアーキテクチャを採用しています。これにより、UI コンポーネントの再利用性が向上し、コードの保守性が向上します。|
|Razor 構文の使用|Blazor は、Razor 構文を使用して、C# コードを HTML マークアップと混在させることができます。これにより、コンポーネントの開発をより簡単に行うことができます。|
|クロスプラットフォーム対応|Blazor アプリケーションは、Windows、Mac、Linux、Android、iOS など、多くのプラットフォームで動作することができます。|
:::

</details>

## 開発環境

+ Windows 11 Home 23H2 を使用しています。  

:::note info
[WSL](https://learn.microsoft.com/ja-jp/windows/wsl/about) の Ubuntu を操作していきますので macOS の方も参考にして頂けます。
:::

<details>

WSL (Microsoft Store アプリ版) [※ こちらの関連記事からインストール方法をご確認いただけます](https://qiita.com/studio_meowtoon/items/cd0c4a607d451dbf5430)

```sh
> wsl --version
WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
```

Ubuntu [※ こちらの関連記事からインストール方法をご確認いただけます](https://qiita.com/studio_meowtoon/items/cd0c4a607d451dbf5430)

```sh
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04 LTS
Release:        24.04
Codename:       noble
```

.NET SDK [※ こちらの関連記事からインストール方法をご確認いただけます](https://qiita.com/studio_meowtoon/items/d68031c91462f6808dff)

```sh
$ dotnet --list-sdks
8.0.107 [/usr/lib/dotnet/sdk]
$ dotnet --version
8.0.107
```

</details>

:::note warn
この記事では基本的に Ubuntu のターミナルで操作を行います。**Vim を使用してコピペする方法**を初めて学ぶ人のために、以下の記事で手順を紹介しています。ぜひ挑戦してみてください。
:::

https://qiita.com/studio_meowtoon/items/7771ad48676926e41463

## 作成する Web アプリケーションの仕様

|No|エンドポイント|HTTPメソッド|MIME タイプ|
|:--|:--|:--|:--|
|1|/|GET|text/html|

<details>
<summary>説明を開きます。</summary>

:::note info
Web ブラウザで **/** という**エンドポイント**にアクセスすると、**HTML ファイル**がレスポンスされるシンプルな Web アプリを実装します。
:::

</details>

## Hello World を表示する手順

### プロジェクトルートフォルダに移動

プロジェクトルートフォルダに移動します。  
※ ~/tmp/BlazorApp をプロジェクトフォルダとします。

```sh
$ cd ~/tmp
```

### プロジェクトの作成

プロジェクトを作成します。

```sh
$ dotnet new blazorwasm \
    --name BlazorApp \
    --no-https \
    --no-restore
```

プロジェクトフォルダに移動します。

```sh
$ cd ~/tmp/BlazorApp
```

### アプリのビルドと起動

アプリを起動します。
※ アプリを停止するときは ctrl + C を押します。

```sh
$ dotnet run
```

:::note info
ここまでの手順で、**Ubuntu** でアプリの **DLL ファイル**を起動することができました。
:::

### アプリの動作確認

:::note warn
アプリを起動したターミナルにアプリがリッスンする URL が表示されています。※ **ポート番号**は**変動**するので読み替えてください。
:::


```sh:一部抜粋
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5181
```

URLを ctrl を押しながら選択すると Web ブラウザが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/9674b44e-c8cf-1ca6-758b-307b937d1766.png)

:::note info
Web ブラウザに **Hello, World!"** と表示されました。
:::

### プロジェクトの修正

:::note warn
ここまでの手順で、**Blazor** Web アプリを起動することができました。次に、Blazor をより深く理解するため、デフォルトのコードを変更してみましょう。
:::

index.html を修正します。

```sh
$ vim wwwroot/index.html
```

ファイルの内容

```html:wwwroot/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>BlazorApp</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="_framework/blazor.webassembly.js"></script>
    </body>
</html>
```

<details>
<summary>説明を開きます。</summary>

:::note info
**Blazor WebAssembly** ホストページの HTML ファイルの例です。WebAssembly アプリケーションが読み込まれると、**_framework/blazor.webassembly.js** が実行され、Blazor アプリケーションが初期化されます。
:::

</details>

App.razor を修正します。

```sh
$ vim App.razor
```

ファイルの内容

```html:App.razor
<Router AppAssembly="@typeof(Program).Assembly">
    <Found>
        <RouteView RouteData="@context" />
    </Found>
    <NotFound />
</Router>
```

<details>
<summary>説明を開きます。</summary>

:::note info
Blazor WebAssembly アプリケーションのルーティングを定義しています。

|内容|
|:--|
|Router コンポーネントはアプリケーション全体のルーティングを管理し、AppAssembly 属性によってアセンブリを指定しています。|
|Found 要素は、ルートパスが一致した場合に表示するコンテンツを指定します。この場合、RouteView コンポーネントが使用され、ルートデータが context プロパティにバインドされています。|
|NotFound 要素は、ルートが一致しなかった場合に表示するコンテンツを指定します。|
:::

</details>

Index.razor を修正します。

```sh
$ vim Pages/Index.razor
```

```sh:Pages/Index.razor
@page "/"
<h1>@getMessage()</h1>

@code {
    string getMessage() {
        return "Hello World!";
    }
}
```

<details>
<summary>説明を開きます。</summary>

:::note info
Blazor アプリケーション内で表示される単純なページを定義するためのコードです。

|内容|
|:--|
|@page ディレクティブは、このページがルートページであることを示します。|
|\<h1\> タグ内の @getMessage() は、このページに表示されるメッセージを表示するためのものであり、 @code ブロック内に定義された getMessage() メソッドが呼び出されます。|
|getMessage() メソッドは、単純な文字列 "Hello World!" を返します。|
|つまり、このページにアクセスすると、"Hello World!" というメッセージが表示されます。|
:::

</details>

:::note info
<details>
<summary>C# の機能を使用した例 (※実装に深い意味はありません)</summary>

ラムダ式

```sh:Pages/Index.razor
@page "/"
<h1>@_message</h1>

@code {
    string? _message;

    protected override void OnInitialized() => _message = "Hello world!";
}
```

Action デリゲート

```sh:Pages/Index.razor
@page "/"
<h1>@_message</h1>

@code {
    string? _message;

    protected override void OnInitialized() {
        getMessage(result => _message = result);
    }

    void getMessage(Action<string> callback) {
        callback.Invoke("Hello World!");
    }
}
```

async/await

```sh:Pages/Index.razor
@page "/"
<h1>@_message</h1>

@code {
    string? _message { get; set; }

    protected override async Task OnInitializedAsync() {
        _message = await getMessage();
    }

    async Task<string> getMessage() {
        await Task.Delay(1000);
        return "Hello World!";
    }
}
```

</details>

:::

_Imports.razor を修正します。

```sh
$ vim _Imports.razor
```

ファイルの内容

```html:_Imports.razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorApp
```

Layout ディレクトリを削除します。

```sh
$ rm -fr Layout
```

不要な Page を削除します。

```sh
$ rm Pages/Counter.razor
$ rm Pages/Home.razor
$ rm Pages/Weather.razor
```

app.css を削除します。

```sh
$ rm -fr wwwroot/css
```

その他不要なファイルを削除します。

```sh
$ rm wwwroot/*.png
$ rm -fr wwwroot/sample-data
```

### プロジェクトの構成

プロジェクトのファイル構成を表示してみます。

```sh
$ tree -I 'bin|obj'
.
├── App.razor
├── BlazorApp.csproj
├── Pages
│   └── Index.razor
├── Program.cs
├── Properties
│   └── launchSettings.json
├── _Imports.razor
└── wwwroot
    └── index.html
```

### アプリのビルドと起動

アプリを起動します。
※ アプリを停止するときは ctrl + C を押します。

```sh
$ dotnet run
```

### アプリの動作確認

URLを ctrl を押しながら選択すると Web ブラウザが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3206449/bb97be1c-c8dc-2f3f-3e63-92d7dd7374c3.png)

:::note info
始めに起動したコード修正前のアプリと同様に、Web ブラウザに **Hello World!** と表示されました。**最小構成** の Blazor Webアプリを起動することができました。
:::

## まとめ

Ubuntu に構築したシンプルな .NET 開発環境で、C# ASP.NET Core Blazor Web アプリを実行することができました。

:::note warn
実際の業務での ASP.NET Core Blazor の使用ケースでは、ここで示したようなシンプルな構成とは異なる場合があります。しかしながら、最小構成の例を学ぶことで、ASP.NET Core Blazor がどのような構成が必要なのかを理解することができます。
:::

どうでしたか？ WSL Ubuntu で、C# ASP.NET Core Blazor Web アプリケーションを手軽に起動することができます。ぜひお試しください。今後も .NET の開発環境などを紹介していきますので、ぜひお楽しみにしてください。

## 推奨コンテンツ

https://qiita.com/studio_meowtoon/items/63a4286a78df82a0556c

## 関連記事

#### JavaScript Vue.js

https://qiita.com/studio_meowtoon/items/2381f271f88f783d1321

#### JavaScript React

https://qiita.com/studio_meowtoon/items/c4f635b470981a8cdecb