rksoftware

Visual Studio とか C# とかが好きです

Blazor 新規プロジェクトの作成(Blazor WebAssembly)

一通りのプロジェクト新規作成をためした一連の記事をまとめた記事を書きました。
こちらの記事で一気読みできます。

Blazor 新規プロジェクトの作成(Blazor WebAssembly)

最近話題の Blazor ですが、意外とまだ様子見の方も多いのではないでしょうか? 私もです。
Blazor によるモバイルアプリ開発やデスクトップアプリなどの計画も発表されており、期待はしていますがまだ触れる物は少ないです。

■ Blazor WebAssembly

WebAssembly でクライアントで動く Blazor で、まだプレビューの形式です。

NuGet からテンプレートをインストールすることでプレビュー版を試すことができます。

■ Visual Studio

Windows の場合、テンプレートをインストールすると新しいプロジェクトの作成からポチポチやって WebAssembly プロジェクトを作成できます。

参考: Visual Studio での Blazor サーバー プロジェクトの作成

テンプレートのインストール前はアプリの形式の選択で Blazor サーバー アプリ しか選択肢がありませんでした。
f:id:rksoftware:20200127012525j:plain

インストール後は Blazor WebAssembly App という選択肢が追加されます。 f:id:rksoftware:20200127012711j:plain

mac の場合は残念ながらインストールしても Visual Studio for Mac にテンプレートは生えませんでした。 f:id:rksoftware:20200127012551j:plain

■ 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

Visual Studio で作ったものと比較してみると

完全に一致しています。

■ 実行

実行も 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