本記事は .NET 6 または .NET 7 で Blazor を始める手順です。.NET 8 で始めたい人は、【.NET8対応】Blazorのはじめかた【環境構築から初回実行まで】を参照してください。
何か新しい言語やフレームワークを勉強しようとしたときに、環境構築でつまづくことはよくありますよね。
Blazor は Visual Studio があれば誰でも開発ができるので、環境構築でつまづくこともありません。
簡単なテンプレートも用意されているため、すぐに動かして確認することも可能です。
本記事では、Blazor の環境構築から初回実行までを丁寧に解説しました。
この記事を読むことで、スムーズに Blazor の導入ができると思います。
ちなみに、読み方は「ブレイザー」です。
それでは、さっそく見ていきましょう。
環境構築
まずは、Visual Studio 2019 のインストールが必要です。
公式サイトからダウンロードしてインストールしましょう。
あとは、.NET 5 のインストールが必要です。
.NET Core 3.1 でも動くようですが、これを機に最新の .NET を入れておくといいと思います。
環境構築はこれだけです。
新規プロジェクトの作成
Visual Studio を開いて、「新規」を選択しましょう。
次に、「Web とコンソール > アプリ」と進むと、Blazor に関するふたつの選択肢が表示されます。
- Blazor WebAssembly アプリ
- Blazor Server アプリ
Blazor WebAssembly アプリは、クライアント側で動作するアプリで、Blazor Server アプリはサーバー側で動作するアプリです。
今回は、Blazor WebAssembly アプリを作成してみます。
続いて、アプリの構成についてです。
- 対象のフレームワーク：.NET 5.0
- 認証：なし
- 詳細設定：ASP.NET Core でホストされた
.NET 5.0 をインストールしている人は、対象のフレームワークを .NET 5.0 にしておきましょう。
プロジェクトを作成する時点で認証機能をつけるかどうかも選択することができますが、今回は「なし」にします。
認証「あり」でプロジェクトを作成したい人は、次の記事を参照してください。
先ほど「Blazor WebAssembly アプリは、クライアント側で動作するアプリ」と解説をしました。
しかし、処理によってはサーバーで動作させたいものも出てくるはずです。
その場合は、詳細設定の「ASP.NET Core でホストされた」にチェックをつけることで、クライアント側とサーバー側の両方のプロジェクトが自動で作成されます。
また、「プログレッシブ Web アプリケーション」はオフにしました（PWA と呼ばれます）。
例えばスマホアプリをインストールすると、ホーム画面にアイコンが表示されて、いつでもそこから起動できますよね。
PWA を実装すると、アプリをインストールするのと同じように、ホーム画面にアイコンとしてインストールすることができます。
通常、スマホアプリをリリースした後に何か修正をする場合は、その都度審査が必要になり、手続きも面倒になりがちです。
ですが PWA の場合はダウンロードや審査が不要なので、開発者にとってもユーザーにとっても嬉しい技術になっています。
アプリによってはオフラインでも使用できるようにもできるので、そこも特徴のひとつです。
プロジェクト名は適当に「SampleApp」として、プロジェクトを作成します。
すると、プロジェクトが３つ自動で作成されます。
- Client：クライアント側の処理を書く
- Server：サーバー側の処理を書く
- Shared：クライアントとサーバーで共通に使用する処理を書く
プロジェクトの実行
ではさっそくデバッグ実行してみましょう。
すると、Hello World が表示されました。
これが初期テンプレートの画面ですね。
左に表示されているのがメニューなので、Counter を選択してみましょう。
すると、Click me と書かれたボタンが表示されます。
このボタンを押すと、Current count が１ずつ増えていく仕組みです。
ではここでブレイクポイントを置いてみましょう。
Client.Pages.Counter.razor を開き、IncrementCount のメソッドにブレイクポイントを置きます。
その後に Click me のボタンを押すと、ブレイクポイントで止まることが確認できました。
細かいデバッグも簡単にできそうですね。
デバッグを終わるには、次のふたつが必要になります。
- ブラウザを閉じる
- Visual Studio のデバッグを終了する
どちらか一方をやっても、もう片方が残ってしまうので注意してください。
まとめ
Blazor の環境構築から初回実行までを丁寧に解説しました。
まだ中身を詳しく見てない状態でも「なんとなくよさそう」と感じたのではないでしょうか？
私も同じく Blazor にピンとくるものがあったので、こうしてブログを書いています。
長くなってきたので、プログラム的にはどのように動いているのかは、別の記事に書きますね。
この記事をきっかけに、Blazor を始める人が増えれば幸いです。
入門編から EC サイトを作る応用編まで、Blazor の本を３冊執筆しました。
私が１年以上かけて学習した内容をすべて詰め込んでいるので、さらにステップアップしたい方はぜひご覧ください。
