プロジェクトの作成
本連載では、Windows 10の環境で、統合開発環境のVisual Studio 2019を使って開発を行うことにします。なお、.NET Coreの開発は、Visual Studioを使用せずに、テキストエディタを使ってコマンドラインベースでも可能です。
Visual Studioのインストール
まずは、Visual Studio 2019のインストールです。ここから、Visual Studio Communityを選択して、インストーラーをダウンロードし、インストールします。
インストーラーを実行すると、途中で、ワークロードやコンポーネントを選択する画面になります。Blazorの開発環境は、「ASP.NETとWeb開発」に含まれていますので、このワークロードを選択しておきます。
Blazorプロジェクトの作成
Visual Studioの起動後、新しいプロジェクトの作成を選びます。プロジェクトテンプレートでは、Blazorアプリを選択します。
次に、プロジェクト名、作成場所の設定となりますが、今回は次のように設定しました。
作成ボタンをクリックすると、作成するアプリのタイプを選択する画面になります。ここでは、Blazor WebAssemblyを選択します。
詳細設定の、ASP.NET Core hosted、Progressive Web Applicationのチェックは、外しておきます。ASP.NET Core hostedは、ASP.NET Coreのランタイムもプロジェクトに含めるオプションで、ASP.NETのサーバー機能を利用する場合などに必要となります。Progressive Web Applicationのオプションは、WebアプリをProgressive Web Application（註）として作成する場合のオプションです。いずれも今回は使用しませんので、両方のオプションのチェックを外しておきます。
【註】Progressive Web Application（PWA）とは、Webサーバー経由で配信されるWebアプリケーションでありながら、スマートフォンアプリのような動作を実現したアプリケーションのことです。
Blazorプロジェクトの構築と起動
次にデバッグの開始を選択すれば、テンプレートプロジェクトがビルドされてデバッグが開始されますが、その前に、ブラウザを確認しておきましょう。
適当なブラウザを選んで、デバッグを開始すると、ブラウザが起動して、次のような画面となります。
テンプレートは、レスポンシブデザインになっていて、ブラウザの幅を狭めると、メニュー表示が変わります。メニューから、3つのページが選択できますが、ページを切り替えても、ページ全体の読み込みは発生せず、ボタン操作を行ってもリロードされることがないSPAとなっていることがわかります。
