Chapter 03

開発環境について

はじめに

ここでは、ASP.NET Core Blazor WebAssembly の開発環境について説明します。

ASP.NET Core Blazor WebAssembly を開発するには .NET 5 の SDK が必要です。.NET 5 の SDK を個別に入れて環境を構築することも出来ますが Visual Studio 2019 をインストールすることで .NET 5 の SDK や開発に必要なツールが一括でセットアップされるのでお勧めです。

Visual Studio 2019 は以下のサイトからダウンロードしてインストールできます。

https://visualstudio.microsoft.com/ja/vs/

Windows と macOS では上記のサイトから Visual Studio 2019 か Visual Studio 2019 for Mac をインストールをすることで開発環境が整います。Linux の場合は .NET 5 SDK を以下のサイトからインストールしてください。

https://dotnet.microsoft.com/download

エディターはお好みのもので構いませんが、インテリセンスなどのコード補完機能の充実度合いから Windows と macOS では Visual Studio 2019 をお勧めします。Linux の場合は Visual Studio Code に C# for Visual Studio Code 拡張機能をインストールしたものを使用することをお勧めします。

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

プロジェクトの新規作成から実行

開発環境が正しくセットアップされていることを確認するために以下の手順でプロジェクトの新規作成から実行まで出来るか確認をしてください。ここでは Windows と macOS での手順について解説を行います。

Windows の場合

Visual Studio 2019 を起動して「新しいプロジェクトの作成」を選択します。

「Blazor アプリ」を選択します。

プロジェクト名を入力して「作成」を選択します。

Blazor WebAssembly を選択して「作成」を選択します。

プロジェクトが作成されます。プロジェクトが作成されたら、ツールバーの緑の三角の再生ボタンのアイコンのドロップダウンの選択肢を IIS Express から、プロジェクト名に変更してください。IIS Express でも動作に差支えはありませんが、開発用のサーバーのポート番号が異なるためここでは IIS Express ではない方を選択しています。

F5 キーを押してデバッグ実行を行います。初回のデバッグ実行時には ASP.NET Core の HTTPS 開発証明書を信頼するかを確認するダイアログが表示されるので、指示にしたがってインストールをしてください。

証明書のインストールいついての詳細は以下のドキュメントを参照してください。

https://docs.microsoft.com/ja-jp/aspnet/core/security/enforcing-ssl?view=aspnetcore-5.0&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos

以下のようにブラウザーと DOS 窓が起動してブラウザーに Blazor WebAssembly のアプリケーションが表示されます。

macOS の場合

Visual Studio 2019 を起動して「新規」を選択します。

Blazor WebAssembly アプリを選択して「次へ」を選択します。

対象のフレームワークで .NET 5.0 を選択して「次へ」を選択します。

プロジェクト名を入力して「作成」を選択します。

プロジェクトが作成されます。プロジェクトが作成されたら、Visual Studio 2019 の画面左上にある三角のアイコンを選択してデバッグ実行を行います。

初回のデバッグ実行時には ASP.NET Core の HTTPS 開発証明書を信頼するかを確認するダイアログが表示されるので、指示にしたがってインストールをしてください。

証明書のインストールいついての詳細は以下のドキュメントを参照してください。

https://docs.microsoft.com/ja-jp/aspnet/core/security/enforcing-ssl?view=aspnetcore-5.0&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos

以下のようにブラウザーが起動して Blazor WebAssembly のアプリケーションの画面が表示されます。

まとめ

プロジェクトの新規作成から実行までの動作確認が出来たので次章以降では、ASP.NET Core Blazor WebAssembly の構成要素の解説に移りたいと思います。