C#でSPAを実現！ .NET 6でASP.NET CoreのBlazorアプリケーションの基本「Blazor Server」を理解しよう

.NET最新版でASP.NET Core 第7回

Blazor Serverプロジェクトを作成して実行する

　ここからは実際にアプリケーションを作成し、実際に動作させたり生成されるファイルの内容を見たりしながら動作イメージを掴んでいきましょう。作成するのは、Blazor Serverアプリです。なお、Blazor WebAssemblyの詳細については別連載を参照してください。本稿ではBlazor WebAssemblyとの違いを中心に、Blazor Serverについてのみ解説します。

　本連載では、プロジェクト群を格納するフォルダをcz_aspdotnetとしています。作成していない方は、ここで作成しておいてください。引き続き、このフォルダを起点に作業します。ここで、Visual Studio Code（VSCode）を起動しておきます。コマンドの操作は、基本的にVSCodeのターミナル上で行っていきます。

［NOTE］VSCodeの設定

　macOSでcodeコマンドを有効化する方法、C#の実行環境のインストール、ビルドとデバッグに必要なアセットのプロジェクトへの追加、localhost上での実行のための開発用証明書を受け入れる設定については、本連載の第2回を参照してください。

プロジェクトの作成

　cz_aspdotnetフォルダに移動します。そして以下のコマンドでプロジェクトを作成します。

% dotnet new blazorserver -o BlazorServerSample --no-https -f net6.0

　ここで使われているdotnetコマンドについては、第2回で紹介していますのでそちらを参照してください。今回は、プロジェクトの名称はBlazorServerSampleとし、プロジェクトのテンプレートにblazorserverを指定しました（Blazor WebAssemblyではblazorwasmとなります）。dotnet new --listコマンドで表示できるテンプレートの一覧を見ると、「blazorserver」は「Blazor Server App」に相当し、言語はC#で、タグに「Web/Blazor」が指定されていることがわかります。

　また、テンプレートオプションを2個指定しています。「--no-https」はHTTPS接続を使用しないことを、「-f net6.0」はターゲットのフレームワークのバージョンを6.0にするという指定です。

ビルドと実行

　これで、BlazorServerSampleフォルダに新しいプロジェクトが作成されますので、VSCodeのコマンドであるcodeで、このフォルダに移動しておきます。

% code -r BlazorServerSample

　作成したプロジェクトは、VSCodeでターミナルを開き、dotnet watchコマンドで実行できます。デフォルトブラウザが起動しトップページが表示されます（図3）。

% dotnet watch
watch : Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload. Press "Ctrl + R" to restart.
watch : Building...
…略…

図3：BlazorServerSampleのトップページ

　大まかに左側のサイドバー（ナビゲーション）、右側のコンテンツエリアで構成されています。上部には、「About」リンクもあります。

　少し操作してみましょう。サイドバーの［Counter］をクリックしてみてください。コンテンツエリアが「Index」から「Counter」に変化します（このときページ遷移はありません）。そして、［Click me］ボタンを何回かクリックすると、「Current count: 0」のカウントが1個ずつ増えていくのが確認できます（図4）。もちろん、このときもページの遷移は発生していません。クライアントサイドで完結する処理の例です。

図4：アプリケーションのCounterページ

　続けて、サイドバーの［Fetch data］をクリックしてみてください。コンテンツエリアが、「Weather forecast」に変化します。これは明日以降の気温予想を取得して表示しているというものです。これはサーバーサイドでデータ取得を行って表示するという処理の例になっています（図5）。それぞれ、後ほど簡単に触れます。

図5：アプリケーションのFetch dataページ

［NOTE］ホットリロードとは？

　dotnet watchコマンドの出力にあるように、ホットリロードが可能とあります。ホットリロードとは、アプリケーションを起動させたままでソースコードなどの変更を反映する仕組みです。ソースコードなどを変更したら、Ctrl＋Rキーを押すだけでアプリケーションに反映できるので、いちいちサーバーを起動し直す必要がなく便利です。