はじめに

私は普段の開発ではmacOSを使っていて、Blazor WebAssemblyでアプリを開発するときだけWindowsを使っていました。Windowsで集中してBlazor WebAssemblyのコードを編集しているときはいいのですが、macOSを使っている時にちょっとした修正のアイディアを思いついたときはWindowsを起動するのが面倒で、あとでまとめて修正すればいいかと思うことが多かったです。たぶん忘れてしまった修正もたくさんあったと思います。

試しにVisual Studio for Macを使おうとしたこともあったのですが、Windowsで使っていたVisual Studioとはちょっと違って、結局はWindowsからの移行はしなかったです。

そのような状況を改善するため、macOSとVS CodeでBlazor WebAssemblyの開発環境をセットアップすることにしました。以下の手順は私の開発環境のMacBook Air (M1, 2020)で動作を確認しています。

セットアップ

.NET

Homebrewにdotnetというパッケージがあるのですが、私の環境では動作させることができませんでした。dotnetではなくdotnet-sdkを使うことにしました。

Homebrewでdotnet-sdkをインストールします。

% brew install --cask dotnet-sdk

Microsoft.NET.Runtime.WebAssembly.Templatesをインストールします。

% dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

AOTコンパイルする場合はwasm-toolsもインストールします。

% sudo dotnet workload install wasm-tools

VS Code

VS CodeでC#の拡張機能をインストールします。

ソースコードのフォーマットを有効にしている場合は、言語別の設定でC#のDefault FormatterをC# ms-dotnettools.csharpに設定します。

アプリの作成と実行

Blazor WebAssemblyのアプリを作成します。

% dotnet new blazorwasm -o Sample1

作成したアプリのフォルダーに移動して、サーバーを起動します。

% cd Sample1
% dotnet run

公開ファイルを作成するためには以下のコマンドを実行します。

% dotnet publish -c Release

bin/Release/net7.0/publish/に公開ファイルが作成されます。

NuGetパッケージの管理

Homebrewにnugetがあるのですが、今回は必要なかったです。dotnetコマンドでパッケージを管理します。

パッケージの一覧表示

% dotnet list package

パッケージの追加・更新

% dotnet add package <PACKAGE_NAME>

パッケージの削除

% dotnet remove package <PACKAGE_NAME>

おわりに

macOSでBlazor WebAssemblyの開発環境をセットアップしました。私はこれまで.NETの開発はWindowsでVisual Studioを使っていて、コマンドの使い方はほとんど知らなかったので、macOSでの環境構築は意外と時間がかかってしまいました。まだ基本的な使い方しかできていませんが、とりあえずこれでmacOSでの開発が進められそうです。

Homebrewでdotnet-sdkをインストールしてしまうと、.NETのプレビューリリースを試すことができないかもしれません。その場合は以下のWebサイトから.NETのインストーラーをダウンロードしてインストールすることになりそうです。

参考