BlazorWebAssembly入門（環境構築編）

プログラミングC#Microsoftアドベントカレンダー2021
公開日：2021-12-06T13:30:27.136492+09:00 閲覧数：913

アドベントカレンダー6日目の記事になります！
今回から複数回に分けてBlazor WebAssenblyに関する入門記事を投稿したいと思います。

.NET Coreと.NET Frameworkが統合されてから、初めてのLTS版である.NET 6がリリースされました！
.NET 6では次世代XamarinであるMAUIなど、新しいフレームワークに目が行きがちですが、個人的にはBlazor WebAssenblyに注目しています。

Blazor WebAssemblyとは？

BlazorWebAssemblyとは、Microsoftが開発したWebフロントエンドをC#で開発することが出来るフレームワークのことです。もう少し詳しく言うと、最近登場したWebAssemblyというブラウザで動くバイナリプログラムでC#のランタイムが作られており、プログラマの書いたC#コードをコンパイルした*.dllファイルをそのまま実行できるものになっています。
WebAssemblyに関しての詳細な説明は割愛しますが、様々な言語にて対応が進められており、最近ではC++で書かれた有名なビデオエンコードソフトであるffmpegをブラウザ上で動かせるように出来たりと高速性や既存のソフトウェア資産の流用などが期待されています。

.NET6で改善された実行速度と開発環境

Blazor WebAssenbly自体は.NET 5から存在しますが、.NET 5でのBlazor WebAssenblyでは.NETランタイムのみがWebAssemblyにビルドされ、我々が書いたコードはIL言語までコンパイルされ実行時に.NET ランタイムによりインタプリンタ実行されます。そのため、WebAssemblyのイメージである「速さ」の恩恵が受けれませんでした。
.NET6ではAOT(ahead of time)コンパイルで我々が書いたコードもWebAssemblyにコンパイルできるようになったので、上記の速度問題が解決されています。（ただ、生成されるサイズが2倍になるらしいので、負荷があまり高くないアプリケーションならAOTコンパイルはしない方が良さそうです。）
これに加え、.NET 6からはホットリロードに対応しています。アプリケーション開発をする際、通常プログラムコードに少しでも変更を加え、反映したものを見たいときは、アプリケーションの実行を止め、再度ビルドしてから実行する必要があります。複数手順を経た画面を検証したいときなどはこれが案外面倒であったりします。ホットリロードに対応したことで、アプリケーションを終了しなくても変更箇所がビルドされ自動的に実行中のアプリに変更が適用されるようになっています。これにより開発効率が何倍にもなったりしますね。

導入

BlazorWebAssemblyですが、導入方法は下記2つの方法があります。

  • VisualStudio2022 にてASP.NET系のインストールオプションを選択してインストール
  • .NET 6 SDKをインストール

後々の便利な機能を使えることを考えると、基本はVisualStudio2022での導入をおすすめしますが、WSL環境で開発するのになれていたり、MacOSを利用している場合は .NET 6 SDKを導入してやるやり方をおすすめします。

VisualStudio 2022での導入

基本的には 過去記事　を参考にしてVisualStudio2022をインストールしてください。（記事内ではVisualStudio2019ですが、さほど手順は変わりません）
1点違うのが、インストールする項目です。
インストール時の機能選択の際に、ASP.NETとWeb開発にもチェックが必要です。

bwasm-1.png

.NET 6 SDK単体インストールでの導入

WSLなどのLinux環境での導入方法

基本は Microsoftのページ に書いてあるとおりです。

wget https://packages.microsoft.com/config/ubuntu/21.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

を実行後、

sudo apt-get update
sudo apt-get install -y apt-transport-https
sudo apt-get update
sudo apt-get install -y dotnet-sdk-6.0

で、.NET 6の導入は完了です。
導入後dotnetコマンドが使えていれば問題ありません。

MacOSでの導入

こちらのページからMacOS用のSDKをダウンロードします。
M1 Macをお使いの方はarm64を、古いIntel Macを使っている方はx64を選択してください。

bwasm-2.png

インストール自体は通常アプリと変わりません。インストールウィザードに従ってインストールを完了してください。
完了後、動作確認のためにターミナルでdotnetコマンドを実行してみてください。

Blazor WebAssemblyアプリケーションを作成して実行してみる

Blazor WebAssemblyのプロジェクトを作成してサンプルを実行してみましょう。

VisualStudio2022の場合

起動後、まずは新しいプロジェクトを選択します。
作成画面になったら、テンプレートの検索にてBlazorと入力しBlazor WebAssembly アプリを選択して次に進みます。
（BlazorServerアプリなどもありますが、間違えないでください）

bwasm-3.png

初期値でプロジェクト名がBlazorApp1になっていると思いますが、今回はBlazorTestAppに変更しましょう。
追加情報では以下のような画面になっているか確認してください。（特にフレームワークが.NET 6になっているか）

bwasm-4.png

最後に作成を押してプロジェクトを作成します。

作成が完了したら実行ボタンを押してみてください。
そうすると以下のようなメッセージが出てくるのではいを選んでください

bwasm-5.png
こちらもはいを選んでください

bwasm-6.png

上記2つが完了すれば、ブラウザが自動で起動しBlazor WebAssenblyで作られた画面が表示されます。
bwasm-7.png

WSLやMacOSの場合

ターミナルやコンソールにて

dotnet new blazorwasm -o BlazorTestApp

と実行します。
そうすると現在のディレクトリにBlazorTestAppが作成されると思うので、そちらのフォルダをVisualStudio Codeなどを用いて開いてみましょう。
内容が確認出来たら、実行してみましょう。
実行は

dotnet run

で行えます。
基本的にブラウザが自動で立ち上がり表示をしてくれると思いますが、そうでなかったらブラウザにてlocalhost:5000にアクセスしてみましょう。

サンプルプログラムの挙動を確認する

Counterページにアクセスしてみましょう。

bwasm-8.png

Counterページは/counterにあり、Click Meボタンを押すことで上のボタンがカウントアップしていきます。

bwasm-9.png

次にこのページのプログラムを見ていきます。プロジェクトフォルダにあるCounter.razorを開きます。

bwasm-10.png

プログラムは以下のようになっています。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

pageのURLは@page要素で指定しています。
その下は基本的にHTML要素です。
pタグにCurrent countL @currentCountと書いてありますが、この@currentCountが下の@code内のprivate int currentCountに対応しています。
buttonタグでは@onclickにて@code内の実行するメソッドを指定しています。
C#が分かれば結構分かりやすい文法だと思います。
では、最後にこれを少し弄ってみましょう。
現在はカウントアップがされますが、
1
2
3
のように数字が下に増えていくようにしてみましょう。
プログラムコードは以下のように変更します。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

@foreach(int count in counts)
{
    <p>@count</p>
}

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private List<int> counts = new();

    private void IncrementCount()
    {
        currentCount++;
        counts.Add(currentCount);
    }
}

ここまでできたら、VisualStudioの方は下の図のようなホットリロードボタン右のオプションからアプリケーションの再起動を押してブラウザで動作確認してみてください。
bwasm-11.png

bwasm-12.png

VisualStudio 以外を使っている方は一度Ctrl+Cでアプリケーションを停止して再度dotnet runで実行してみてください。

bwasm-13.png

以上のようにClick meを押すたびに数字が増えていけば、成功です。

次回からは、このBlazor WebAssenblyを使って簡単なチャットアプリの製作をしていきます。お楽しみに。