Blazor WebAssembly プロジェクトを作成・実行する

現在表示しているページは選択中の表示言語には対応しておりません。 ×

環境

Visual Studio

• Visual Studio 2019

.NET

• .NET 5.0

Visual Studio の入手とインストール

Blazor プロジェクトの開発を行うには Visual Studio を使用します。 Visual Studio の入手やセットアップ方法については以下にまとめていますのでそちらを参照してください。

• Visual Studio 2019 のインストール手順
• Visual Studio Tips 一覧

他にも手順は面倒になりますが、Visual Studio Code でも開発は可能です。(こちらの説明は行いません)

Blazor WebAssembly プロジェクトの作成

スタートメニューから Visual Studio 2019 を選択します。 ここではバージョンを 2019 としていますが、これ以降のバージョンでもプロジェクトは作成可能です。

「新しいプロジェクトの作成」を選択します。

上の検索入力欄に「Blazor」と入力すると一覧が表示されるので「Blazor WebAssembly アプリ」を選択して「次へ」ボタンをクリックします。

プロジェクト名は何でも構いませんがここでは「BlazorWebAssemblySample」としています。 プロジェクトを作成する場所はどこでも構いません。 ソリューション名は自動的に入力されるのでそのままで問題ありません。

ターゲットフレームワークは「.NET Core 3.1」以降が対象となります。ここでは最新の「.NET 5.0」を選択しています。 残りは初期設定のままにしています。 設定が終わったら「作成」ボタンをクリックします。

Visual Studio のメインウィンドウ(IDE)が表示されプロジェクトの作成が完了しました。 ウィンドウのレイアウトは環境設定によって違いがあるかもしれませんが開発には影響ありません。

指定したフォルダにはプロジェクトに関係するファイルが作成されています。 プロジェクトはこのフォルダより上の階層(外側)には影響しませんので、いらなくなったらこのフォルダごと削除すればすべて無かったことにできます。

実行 (デバッグ実行)

プロジェクト作成状態でちょっとしたサンプルが出来上がっていますのでそのまま実行することが可能です。 ツールバーにある「IIS Express」をクリックして実行します。 自身の環境で簡易Webサーバー「IIS Express」が作成され Blazor アプリを実行できます。 この「IIS Express」はデバッグを終了したときに自動的に終了します。

ちなみに Blazor WebAssembly のデバッグ実行では Web サーバーはアプリをダウンロードするためだけに使用しています。

ビルドが開始され一定時間経過するとビルドが完了し Web ブラウザが起動します。 Web 画面が表示されますが、これらの画面はすべてクライアント側の処理だけで完結しています (サーバーリソースへのアクセスは除く)。 通常 Web アプリのクライアント側の処理は Javascript で作成することが多いですが、Blazor では WebAssembly の仕組みを利用して C# で作成することが可能です。

以下はクリックするたびにカウントを増やす処理です。こういった画面をリフレッシュしない処理は一般的に Javascript で記述しますが、これらも C# で実装されています。

サーバーから JSON ファイルをダウンロードして一覧を表示している画面です。

デバッグ実行の停止

Web ブラウザが単独で起動された場合は Web ブラウザを閉じればデバッグ実行は終了しますが、すでに起動されている Web ブラウザの新規タブで開いた場合はタブを閉じてもデバッグ実行は終了しません。

その場合は Visual Studio のツールバーから「デバッグの停止」ボタンをクリックしてください。

開発の終了

基本的には他のプロジェクトと同じで Visual Studio をそのまま終了してください。保存されていないファイルがある場合は保存確認が表示されます。

再度開発するときは「xxxxxxxx.sin」ファイルを開くか、Visual Studio を起動したときに履歴が表示されていますのでそこから開くことも可能です。