【簡単】C#でWebアプリが作れる「Blazor」の始め方
「もし自分で Web アプリを作れたら...」
そう思って、過去に RubyonRails など Web 系の言語を勉強しましたが、何だか肌に合わず挫折してしまいました。
環境構築も大変ですし、学ぶべき知識が多いですし、動的型付けなのも慣れません。
「カッコいい Web アプリを作るのは夢に終わるのか」と諦めていたところ、Blazor（ブレイザー） の存在を知りました。
フロントエンドに HTML と CSS を使うことは変わりませんが、バックエンドにC#が使えます。
普段から C# を使っている人としては、Visual Studio がそのまま使えるのはとても嬉しいですし、.NET SDK をインストールするだけですぐに始められます。
- Web アプリを作りたいけど、Web 系の言語を普段使っていない
- Web 系の言語を始めようとしたとき、環境構築でつまづいた経験がある
- C# が好きで、できることなら C# で何でもやりたい
このような人にはうってつけです。
もちろん Blazor 独自のルールや記法はありますが、ゼロから Web 系の言語を勉強するよりはずっと楽です。
私自身も、「今後確実に伸びていく領域だな」と確信しているので、勉強を進めています。
本記事では、Blazor を動かす新規プロジェクトを作成して、実際に動かしてみるところまで解説しました。
読み終える頃には、「Blazor では他にどんなことができるのだろう」とワクワクしていること間違いありません。
では、早速見ていきましょう。
C#でWebアプリが作れる「Blazor」の始め方
Visual Studio のインストール
まずは、Visual Studio 2019 のインストールが必要です。公式サイトからダウンロードしてインストールしてください。Visual Studio Code でも開発はできますが、本記事では解説しません。
もともと Visual Studio 2019 がインストールされている場合は、更新を確認して最新化しておきましょう。.NET 5 がインストールできれば OK です。
新規プロジェクトの作成
Blazor の新規プロジェクトを作成していきます。以降の画像は Visual Studio for Mac ですが、 Windows もだいたい同じ画面だと思います。Visual Studio を開いて、「新規」を選択ください。
次に、「Web とコンソール > アプリ」と進むと、Blazor に関するふたつの選択肢が表示されます。
- Blazor WebAssembly アプリ
- Blazor Server アプリ
Blazor WebAssembly アプリは、クライアント側で動作するアプリで、Blazor Server アプリはサーバー側で動作するアプリです。今回は、Blazor WebAssembly アプリを選択して、「次へ」を押します。
続いて、アプリの構成についてです。対象のフレームワークを .NET 5.0 にしておきましょう。 プロジェクトを作成する時点で認証機能をつけるかどうかも選択することができますが、今回は「なし」にします。
- 対象のフレームワーク:.NET 5.0
- 認証:なし
- 詳細設定:ASP.NET Core でホストされた
「Blazor WebAssembly アプリは、クライアント側で動作するアプリ」と解説をしました。しかし、処理によってはサーバーで動作させたいものも出てくるはずです。
その場合は、詳細設定の 「ASP.NET Core でホストされた」にチェックをつけることで、クライアント側とサーバー側の両方のプロジェクトが自動で作成されます。
画像の通り設定できたら、「次へ」を押します。
プロジェクト名は何でも構いませんが、今回は「SampleApp」としました。入力ができたら、 「作成」を押します。
すると、プロジェクトが3つ自動で作成されます。
画像の上の方を見ると「SampleApp.Server > Debug > Google Chrome」となっていますが、これはデバッグをしたときに起動するブラウザが Google Chrome という意味です。
それぞれのプロジェクトの役割は表のとおりです。
| プロジェクト | 概要 |
|---|---|
| Client | クライアント側の処理を書く |
| Server | サーバー側の処理を書く |
| Shared | クライアントとサーバーで共通に使用する処理を書く |
クライアント側は、画面レイアウトを作ったり、ボタンを押したときなどのイベントを拾って処理を追加したりします。
サーバー側は、データベース接続をしたり、クライアント側に提供するAPIまわりの処理を実装します。
プロジェクトの実行
Visual Studio の「▶」ボタンを押すか、F5 でデバッグ実行しましょう。すると、Hello World が表示されました。これが初期テンプレートの画面ですね。
左に表示されているのがメニューなので、Counter を選択してみましょう。
すると、Click me と書かれたボタンが表示されます。
このボタンを押すと、Current count が１ずつ増えていく仕組みです。
ではここでブレイクポイントを置いてみましょう。
クライアント側のプロジェクトにあるPages/Counter.razorを開き、IncrementCountのメソッドにブレイクポイントを置きます。
その後に Click me のボタンを押すと、ブレイクポイントで止まることが確認できました。
細かいデバッグも簡単にできそうですね。
デバッグを終了する
デバッグを終わるには、次のふたつが必要になります。
- ブラウザを閉じる
- Visual Studio のデバッグを終了する
ブラウザを閉じただけでは Visual Studio のデバッグは終了しません。逆に、Visual Studio のデバッグを終了しただけでは、ブラウザは閉じませんので注意してください。
終わりに
Blazor の新規プロジェクトを作成して実行する手順について解説をしました。
新規作成するだけで、かんたんなテンプレートがすでに実装されているのもありがたいですね。
Blazor の魅力をもっと多くの人に伝えたくて、Blazor 専用のブログも書いています。
もしよければ合わせてご覧ください。
Discussion