入門者向け

【入門者向け】Blazor のはじめかた【環境構築から初回実行まで】

blazor-how-to-start

何か新しい言語やフレームワークを勉強しようとしたときに、環境構築でつまづくことはよくありますよね。

Blazor は Visual Studio があれば誰でも開発ができるので、環境構築でつまづくこともありません。

簡単なテンプレートも用意されているため、すぐに動かして確認することも可能です。

本記事では、Blazor の環境構築から初回実行までを丁寧に解説しました。

この記事を読むことで、スムーズに Blazor の導入ができると思います。

それでは、さっそく見ていきましょう。

環境構築

まずは、Visual Studio 2019 のインストールが必要です。

公式サイトからダウンロードしてインストールしましょう。

あとは、.NET 5 のインストールが必要です。

.NET Core 3.1 でも動くようですが、これを機に最新の .NET を入れておくといいと思います。

環境構築はこれだけです。

新規プロジェクトの作成

Mac での手順ですが、Windows もほとんど同じです。

Visual Studio を開いて、「新規」を選択しましょう。

blazor-how-to-start

次に、「Web とコンソール > アプリ」と進むと、Blazor に関するふたつの選択肢が表示されます。

  • Blazor WebAssembly アプリ
  • Blazor Server アプリ
blazor-how-to-start

Blazor WebAssembly アプリは、クライアント側で動作するアプリで、Blazor Server アプリはサーバー側で動作するアプリです。

今回は、Blazor WebAssembly アプリを作成してみます。

続いて、アプリの構成についてです。

  • 対象のフレームワーク:.NET 5.0
  • 認証:なし
  • 詳細設定:ASP.NET Core でホストされた
blazor-how-to-start

.NET 5.0 をインストールしている人は、対象のフレームワークを .NET 5.0 にしておきましょう。

プロジェクトを作成する時点で認証機能をつけるかどうかも選択することができますが、今回は「なし」にします。

認証「あり」でプロジェクトを作成したい人は、次の記事を参照してください。

先ほど「Blazor WebAssembly アプリは、クライアント側で動作するアプリ」と解説をしました。

しかし、処理によってはサーバーで動作させたいものも出てくるはずです。

その場合は、詳細設定の「ASP.NET Core でホストされた」にチェックをつけることで、クライアント側とサーバー側の両方のプロジェクトが自動で作成されます。

また、「プログレッシブ Web アプリケーション」はオフにしました(PWA と呼ばれます)。

PWA とは?

例えばスマホアプリをインストールすると、ホーム画面にアイコンが表示されて、いつでもそこから起動できますよね。

PWA を実装すると、アプリをインストールするのと同じように、ホーム画面にアイコンとしてインストールすることができます。

通常、スマホアプリをリリースした後に何か修正をする場合は、その都度審査が必要になり、手続きも面倒になりがちです。

ですが PWA の場合はダウンロードや審査が不要なので、開発者にとってもユーザーにとっても嬉しい技術になっています。

アプリによってはオフラインでも使用できるようにもできるので、そこも特徴のひとつです。

プロジェクト名は適当に「SampleApp」として、プロジェクトを作成します。

blazor-how-to-start

すると、プロジェクトが3つ自動で作成されます。

  • Client:クライアント側の処理を書く
  • Server:サーバー側の処理を書く
  • Shared:クライアントとサーバーで共通に使用する処理を書く
blazor-how-to-start

プロジェクトの実行

ではさっそくデバッグ実行してみましょう。

すると、Hello World が表示されました。

これが初期テンプレートの画面ですね。

blazor-how-to-start

左に表示されているのがメニューなので、Counter を選択してみましょう。

すると、Click me と書かれたボタンが表示されます。

このボタンを押すと、Current count が1ずつ増えていく仕組みです。

blazor-how-to-start

ではここでブレイクポイントを置いてみましょう。

Client.Pages.Counter.razor を開き、IncrementCount のメソッドにブレイクポイントを置きます。

blazor-how-to-start

その後に Click me のボタンを押すと、ブレイクポイントで止まることが確認できました。

blazor-how-to-start

細かいデバッグも簡単にできそうですね。

デバッグを終わるには、次のふたつが必要になります。

  • ブラウザを閉じる
  • Visual Studio のデバッグを終了する

どちらか一方をやっても、もう片方が残ってしまうので注意してください。

まとめ

Blazor の環境構築から初回実行までを丁寧に解説しました。

まだ中身を詳しく見てない状態でも「なんとなくよさそう」と感じたのではないでしょうか?

私も同じく Blazor にピンとくるものがあったので、こうしてブログを書いています。

長くなってきたので、プログラム的にはどのように動いているのかは、別の記事に書きますね。

この記事をきっかけに、Blazor を始める人が増えれば幸いです。

【無料】PDF書籍「猫でもわかるBlazor入門」
blazor-beginner-book

Blazor の入門書を書きました。

この本を読むことで、挫折することなくスムーズに入門できます。

「無料」で配布しているので、もしよければお受け取りください。