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
ファイルの内容
<!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
ファイルの内容
<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
@page "/"
<h1>@getMessage()</h1>
@code {
string getMessage() {
return "Hello World!";
}
}
説明を開きます。
Blazor アプリケーション内で表示される単純なページを定義するためのコードです。
| 内容 |
|---|
| @page ディレクティブは、このページがルートページであることを示します。 |
| <h1> タグ内の @getMessage() は、このページに表示されるメッセージを表示するためのものであり、 @code ブロック内に定義された getMessage() メソッドが呼び出されます。 |
| getMessage() メソッドは、単純な文字列 "Hello World!" を返します。 |
| つまり、このページにアクセスすると、"Hello World!" というメッセージが表示されます。 |
C# の機能を使用した例 (※実装に深い意味はありません)
ラムダ式
@page "/"
<h1>@_message</h1>
@code {
string? _message;
protected override void OnInitialized() => _message = "Hello world!";
}
Action デリゲート
@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
@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