まえがき

　本書を手に取っていただき、ありがとうございます。

　私は普段C#を使っています。以前、Webアプリを作ったときはRubyonRailsを独学しましたが、新しい言語をゼロから学ぶのはとても時間がかかると感じました。C#を使ってWebアプリをつくれないかと考え調べてみたところ、Blazorに出会いました。Blazorを試しに触ってみたところ、「C#でこんなことができるのか」と驚いただけでなく、これからの可能性も感じました。

　Blazorは比較的新しい技術で、公式ドキュメント以外にはなかなかまとまった情報がありません。公式ドキュメントを参照しながら勉強を進めていきましたが、途中でエラーなどが発生すると、英語のブログを読んで解決しなければいけませんでした。Blazorは触っていて楽しいですが、ゼロから独学するには時間がかかってしまい、少しハードルが高いと感じました。

　そこで、本書を書こうと決意しました。「最初にこういった情報があれば、スムーズに理解が進んだかもしれない」という内容にしています。何事も、やり始めが一番挫折しやすいです。ただし、このやり始めを乗り越えれば、そのあとの勉強は比較的ラクになっていくと思っています。本書は、やり始めを簡単にしたいという想いで書きました。

　また、基礎的な内容だけでなく、AzureやEntity Frameworkを使ったCRUDアプリも作成できるように解説しました。私は普段の仕事でAzureやEntity Frameworkを使っているわけではないので、「このくらいは知っているだろう」と内容を省くことはありません。なぜなら、勉強し始めた頃の過去の自分に対して読んでほしい本だからです。Blazorを少し触ったことがある人が、スムーズにもっと理解を深めていけるような本に仕上げました。CRUDアプリが作れるようになれば、他にも応用が利きます。私と一緒にステップアップしていける内容になっています。

　難しい用語をならべて解説するのではなく、できるだけ易しい表現に置き換えて解説をしました。手順を省略せず画面キャプチャもとっているので、迷うことなく進められると思います。本書を読むことで、あまり難しく感じることなく、Blazorの理解を進めることができるはずです。本書が少しでもみなさんのためになれば幸いです。

ねこじょーかー

本書の目的

　本書の目的は、Blazorのことをまったく知らない人が、全体の雰囲気を理解することです。具体的には、概要を理解したあとにBlazorのプロジェクトを新規に作成し、簡単な問い合わせフォームの画面を作ることができるようになります。また、基礎を学習すると同時に、認証付きのCRUDアプリを作れるようになることです。Azure AD B2CとEntity Frameworkを統合して、記事投稿アプリを作成していきます。途中の手順を省略することなく解説しているので、迷うことなく進められます。Blazorを少し触ったことがある人で、さらにBlazorを深く知りたい人にとって、この本はぴったりです。

本書の対象読者

　本書では次のような人を対象としています。

　・Blazorについて興味がある人

　・BlazorでCRUDアプリを作れるようになりたい人

　・C#が好きな人

前提とする知識

　本書を読むにあたり、次のような知識が必要となります。

　・C#、HTML、CSSの基礎文法の理解

使用したソフトウェアのバージョン

　本書は .NET 5 の時点で執筆したため、随所の画像は Visual Studio 2019 になっていますが、その後 .NET 6 にアップデートするタイミングで Visual Studio 2022 にて動作確認をしています。

　・Visual Studio 2022 for Mac Version 17.0 Preview

　・.NET SDK 6.0.100

本書で使用したソースコード

　ソースコードは、以下のリンクからダウンロードいただけます。パスワードは Y2hHmy7D です。ただし、接続文字列やAzureの秘密情報は削除しているため、そのまま実行しても正常に動作しません。正しい内容で埋めていただくか、コピーすることを目的にご使用ください。

　https://github.com/nekojoker/sample-contents/tree/main/blazor/practice

第1章　Blazorとは

　Blazorを使うことで、何ができるようになるのでしょうか。また、どういった種類があるのでしょうか。本章では、Blazor全体の概要について解説をしていきます。

1.1　Blazorの概要

　Blazorは、C#と.NET Coreを用いてWebアプリケーションの開発ができるようになるフレームワークのことです。ASP.NET Core Blazorとも呼ばれます。フロントエンドにHTMLとCSSを使用するのは変わりませんが、バックエンドのロジック部分をC#で書くことができます。Webアプリケーションを開発するときには必須の知識になっていたJavaScriptも必須ではなくなり、C#によるプログラミングでSPA（Single Page Application）のWebアプリケーションを開発できます。C#をメインの言語としていた人が、.NETやVisual Studioの利点を活かして開発ができるということです。ちなみにJavaScriptについては、C#からJavaScriptを呼び出すことと、JavaScriptからC#を呼び出す両方ができるようになっています。

　C#のロジックとしては、「ボタンをクリックした」などのイベントを拾うことができるので、さまざまな箇所に処理を差し込むことができます。また、HTMLのタグを記述するところにC#の条件式やループ処理を書くことができるので、動的にHTMLのタグを生成できるのも、特徴のひとつです。

1.2　Blazorの種類

　Blazorには次の種類があります。

　・Blazor Server

　・Blazor WebAssembly

　・Blazor PWA

　・Blazor Hybrid

　・Blazor Native

　上記について詳しく調べてみると、「DOMがうんぬん」「WebAssemblyがうんぬん」と入門者をふるいにかけるかのように、難しい用語や解説がたくさん出てきます。もちろん仕組みから理解できれば素晴らしいですが、ここから入っていては「よくわからないな」と挫折してしまうかもしれません。初めは雰囲気が理解できれば十分だと思うので、ざっくり雰囲気がわかるように、それぞれ解説をしていきます。ちゃんと仕組みから理解したい人は、ご自身で公式ドキュメントを読み込んでください。

Blazor Server

　Blazor Serverはその名のとおり、サーバー側で動作するアプリです。したがって、クライアント側に大きいサイズのデータをダウンロードすることはありません。また、クライアント側の環境にも依存しません。ただし、ASP.NET Core Webサーバーが必要になり、サーバーが停止するとアプリも停止します。

Blazor WebAssembly

　WebAssembly（wasmと略されることもあります）によって、Webブラウザー内で.NETコードを実行することが可能になります。クライアント側で動作するので、大きいサイズのデータをダウンロードすることになり、読み込みに時間がかかります。ただし、ASP.NET Core Webサーバーが不要になり、CDN（Content Delivery Network）からアプリを提供することが可能です。

Blazor PWA

　PWA（Progressive Web Apps）とは、Webサイトをブラウザから見るのではなく、PCであればデスクトップアプリ、スマホであればアプリを立ち上げるのと同じように使える技術のことです。インストールが不要なので、Google PlayやApp Storeなどを経由してリリースする必要もありません。PCならデスクトップにショートカットを追加できますし、スマホであればホーム画面にアイコンを追加できるので、一見すると通常のアプリとの違いがありません。また、オフラインのときもWebサイトを見ることができるようになるのも、特徴のひとつです。Blazor PWAは、BlazorもPWAに対応しているということです。Blazor PWAは、Blazor WebAssemblyのプロジェクトを作成するときのオプションとして付けることができます。

Blazor Hybrid

　Blazor Hybridは、ひとつのソースコードでデスクトップアプリとWebアプリの両方を実現するものです。これは「.NET Multi-platform App UI（.NET MAUI）」がベースになっていて、WindowsやmacOSだけでなく、iOSやAndroidに共通したUIを実現することもできます。プラットフォームに依存せずに、同じようなUIを表示することができるということですね。この機能は現在開発が進められています。

Blazor Native

　Blazor Nativeは、HTMLではなく独自のタグで簡単にUIが実現できるようなものです。現在はUIを記述するにはHTMLの記述が必要なので、普段から使っていない人にとっては実装が大変です。たとえばメニューを表示するドロワーも、DrawerContentなどBlazor独自のタグを使用することで、簡単に実現ができるようになる予定です。この機能が使える時期は未定です。

1.3　サポートされているプラットフォーム

　Blazorが動作保証されているプラットフォームは次のとおりです。

　・Apple Safari（iOSを含む）

　・Google Chrome（Androidを含む）

　・Microsoft Edge

　・Mozilla Firefox

　ほとんどが上記に当てはまると思いますが、Internet Explorerや少しマイナーなブラウザは動作保証がされていないことは覚えておきましょう。

第2章　Blazorのはじめかた

　Blazorは、Visual Studioがあれば簡単に始めることができます。本章では、環境構築からBlazorの新規プロジェクトを作成する手順について解説をしていきます。

2.1　Visual Studioのインストール

　まずは、Visual Studio 2022のインストールが必要です。公式サイト¹からダウンロードしてインストールしてください。Visual Studio Codeでも開発はできますが、本書では解説しません。もともとVisual Studio 2022がインストールされている場合は、更新を確認して最新化しておきましょう。.NET 6がインストールできればOKです。

2.2　新規プロジェクトの作成

　Blazorの新規プロジェクトを作成していきます。以降の画像はVisual Studio for Macですが、Windowsもだいたい同じ画面だと思います。Visual Studioを開いて、「新規」を選択ください。

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

　・Blazor WebAssemblyアプリ

　・Blazor Serverアプリ

　Blazor WebAssemblyアプリは、クライアント側で動作するアプリで、Blazor Serverアプリはサーバー側で動作するアプリです。今回は、Blazor WebAssemblyアプリを選択して、「次へ」を押します。

　続いて、アプリの構成についてです。対象のフレームワークを .NET 5.0にしておきましょう。プロジェクトを作成する時点で認証機能をつけるかどうかも選択することができますが、今回は「なし」にします。

　・対象のフレームワーク：.NET 6.0

　・認証：なし

　・詳細設定：ASP.NET Core でホストされた

　「Blazor WebAssemblyアプリは、クライアント側で動作するアプリ」と解説をしました。しかし、処理によってはサーバーで動作させたいものも出てくるはずです。その場合は、詳細設定の「ASP.NET Core でホストされた」にチェックをつけることで、クライアント側とサーバー側の両方のプロジェクトが自動で作成されます。画像の通り設定できたら、「次へ」を押します。

　プロジェクト名は何でも構いませんが、今回は「SampleApp」としました。入力ができたら、「作成」を押します。

　すると、プロジェクトが３つ自動で作成されます。それぞれの役割は表2.1のとおりです。画像の上の方を見ると「SampleApp.Server > Debug > Google Chrome」となっていますが、これはデバッグをしたときに起動するブラウザがGoogle Chromeという意味です。

表2.1: ASP.NET Core でホストされたプロジェクト構成
プロジェクト	概要
Client	Clientクライアント側の処理を書く
Server	Serverサーバー側の処理を書く
Shared	クライアントとサーバーで共通に使用する処理を書く

2.3　プロジェクトの実行

　Visual Studioの「▶」ボタンを押すか、F5でデバッグ実行しましょう。すると、Hello Worldが表示されました。これが初期テンプレートの画面ですね。

　細かい内容は次の章で解説するので、いまはブラウザが起動できる確認だけで大丈夫です。デバッグを終わるには、次のふたつが必要になります。

　・ブラウザを閉じる

　・Visual Studioのデバッグを終了する

　ブラウザを閉じただけではVisual Studioのデバッグは終了しません。逆に、Visual Studioのデバッグを終了しただけでは、ブラウザは閉じませんので注意してください。ますは、新規にプロジェクトを作成する手順について解説をしました。新規作成するだけで、簡単なテンプレートがすでに実装されているのもありがたいですね。次の章からは、プログラムが具体的にどうなっているのかを見ていきます。

目次