一通りのプロジェクト新規作成をためした一連の記事をまとめた記事を書きました。
こちらの記事で一気読みできます。
Blazor 新規プロジェクトの作成(Blazor WebAssembly)
最近話題の Blazor ですが、意外とまだ様子見の方も多いのではないでしょうか? 私もです。
Blazor によるモバイルアプリ開発やデスクトップアプリなどの計画も発表されており、期待はしていますがまだ触れる物は少ないです。
■ Blazor WebAssembly
WebAssembly でクライアントで動く Blazor で、まだプレビューの形式です。
NuGet からテンプレートをインストールすることでプレビュー版を試すことができます。
■ Visual Studio
Windows の場合、テンプレートをインストールすると新しいプロジェクトの作成からポチポチやって WebAssembly プロジェクトを作成できます。
参考: Visual Studio での Blazor サーバー プロジェクトの作成
テンプレートのインストール前はアプリの形式の選択で Blazor サーバー アプリ しか選択肢がありませんでした。
インストール後は Blazor WebAssembly App という選択肢が追加されます。
mac の場合は残念ながらインストールしても Visual Studio for Mac にテンプレートは生えませんでした。
■ dotnet コマンドなら mac も Windows も
dotnet コマンドでなら mac でも Windows でも同じようにプロジェクトを作れます。そこで今回はコマンドで作って行きます。
インストール されているテンプレートを確認
インストールされているテンプレートは次のコマンドで確認できます。
dotnet new --help
実行結果 (関係のないテンプレートは省略)
Templates Short Name Language Tags ---------------------------------------------------------------------------------------------------------------------------------- Blazor Server App blazorserver [C#] Web/Blazor
Blazor Server App のテンプレートしかインストールされていないことが確認できます。
■ Blazor WebAssembly のテンプレートをインストール
Blazor WebAssembly のテンプレートをインストールします。
インストールコマンド
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
末尾の数字はバージョン番号です。それぞれのタイミングに合わせて最新のものをインストールしてください。
バージョンと履歴は先のリンクで確認できます。
インストール確認
dotnet new --help
実行結果 (関係のないテンプレートは省略)
Templates Short Name Language Tags ---------------------------------------------------------------------------------------------------------------------------------- Blazor Server App blazorserver [C#] Web/Blazor Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly
Blazor WebAssembly アプリが追加されました。
■ プロジェクトの新規作成 (Blazor サーバー)
プロジェクトの新規作成も dotnet コマンドで行えます。いったんまずは Blazor サーバーのプロジェクトを作って、Visual Studio と比較してみます。
dotnet new blazorserver
出来上がったファイル群を確認してみます。
Mode Length Name ---- ------ ---- d----- obj d----- wwwroot d----- Shared d----- Properties d----- Data d----- Pages ------ 148 SDN.csproj ------ 1999 Startup.cs ------ 192 appsettings.json ------ 357 App.razor ------ 321 _Imports.razor ------ 195 appsettings.Development.json ------ 758 Program.cs
完全に一致しています。
■ 実行
実行も dotnet コマンドで行えます。
dotnet run
> dotnet run info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: X:\XXXXXX
当たり前ですが挙動は Windows と同じです。
■ プロジェクトの新規作成 (Blazor WebAssembly)
dotnet コマンドで次のコマンドです。
dotnet new blazorwasm
>dotnet run info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Production info: Microsoft.Hosting.Lifetime[0] Content root path: X:\XXXXXX