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

こんにちは、@studio_meowtoon です。今回は、WSL の Ubuntu 22.04 で C# ASP.NET Core Blazor Webアプリケーションを作成して Hello World を出力する方法を紹介します。

目的

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

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

実現すること

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

C# には本来厳格なコーディング規則がありますが、この記事では可読性のために、一部規則に沿わない表記方法を使用しています。ご注意ください。

技術トピック

ASP.NET Core Blazor とは？

こちらを展開してご覧いただけます。

Blazor (ブレイザー)

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 など、多くのプラットフォームで動作することができます。

開発環境

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

WSL の Ubuntu を操作していきますので macOS の方も参考にして頂けます。

WSL (Microsoft Store アプリ版) ※ こちらの関連記事からインストール方法をご確認いただけます

> wsl --version
WSL バージョン: 1.0.3.0
カーネル バージョン: 5.15.79.1
WSLg バージョン: 1.0.47

Ubuntu ※ こちらの関連記事からインストール方法をご確認いただけます

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.1 LTS
Release:        22.04

.NET SDK ※ こちらの関連記事からインストール方法をご確認いただけます

$ dotnet --list-sdks
7.0.202 [/usr/share/dotnet/sdk]
$ dotnet --version
7.0.202

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

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

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

説明を開きます。

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

Hello World を表示する手順

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

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

$ cd ~/tmp

プロジェクトの作成

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

$  dotnet new blazorwasm-empty \
    --name BlazorApp \
    --no-https \
    --no-restore

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

$ cd ~/tmp/BlazorApp

アプリのビルドと起動

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

$ dotnet run

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

アプリの動作確認

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

一部抜粋

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5181

URLを ctrl を押しながら選択すると Web ブラウザが立ち上がります。

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

プロジェクトの修正

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

index.html を修正します。

$ vim wwwroot/index.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>

説明を開きます。

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

App.razor を修正します。

$ vim App.razor

ファイルの内容

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found>
        <RouteView RouteData="@context" />
    </Found>
    <NotFound />
</Router>

説明を開きます。

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

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

Index.razor を修正します。

$ vim Pages/Index.razor

Pages/Index.razor

@page "/"
<h1>@getMessage()</h1>

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

説明を開きます。

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

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

C# の機能を使用した例 (※実装に深い意味はありません)

ラムダ式

Pages/Index.razor

@page "/"
<h1>@_message</h1>

@code {
    string? _message;

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

Action デリゲート

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

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!";
    }
}

MainLayout.razor を削除します。

$ rm MainLayout.razor

app.css を削除します。

$ rm -fr wwwroot/css

プロジェクトの構成

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

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

アプリのビルドと起動

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

$ dotnet run

アプリの動作確認

URLを ctrl を押しながら選択すると Web ブラウザが立ち上がります。

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

まとめ

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

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

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

推奨コンテンツ

関連記事

JavaScript Vue.js

JavaScript React