目次
まえがき
本書を手に取っていただき、ありがとうございます。
私は普段C#を使っています。以前、Webアプリを作ったときはRubyonRailsを独学しましたが、新しい言語をゼロから学ぶのはとても時間がかかると感じました。C#を使ってWebアプリをつくれないかと考え調べてみたところ、Blazorに出会いました。Blazorを試しに触ってみたところ、「C#でこんなことができるのか」と驚いただけでなく、これからの可能性も感じました。
Blazorは比較的新しい技術で、公式ドキュメント以外にはなかなかまとまった情報がありません。公式ドキュメントを参照しながら勉強を進めていきましたが、途中でエラーなどが発生すると、英語のブログを読んで解決しなければいけませんでした。Blazorは触っていて楽しいですが、ゼロから独学するには時間がかかってしまい、少しハードルが高いと感じました。
そこで、本書を書こうと決意しました。「最初にこういった情報があれば、スムーズに理解が進んだかもしれない」という内容にしています。何事も、やり始めが一番挫折しやすいです。ただし、このやり始めを乗り越えれば、そのあとの勉強は比較的ラクになっていくと思っています。本書は、やり始めを簡単にしたいという想いで書きました。
また、基礎的な内容だけでなく、AzureやEntity Frameworkを使ったCRUDアプリも作成できるように解説しました。「このくらいは知っているだろう」と内容を省くことはありません。なぜなら、勉強し始めた頃の過去の自分に対して読んでほしい本だからです。Blazorを少し触ったことがある人が、スムーズにもっと理解を深めていけるような本に仕上げました。CRUDアプリが作れるようになれば、他にも応用が利きます。私と一緒にステップアップしていける内容になっています。
難しい用語をならべて解説するのではなく、できるだけ易しい表現に置き換えて解説をしました。手順を省略せず画面キャプチャもとっているので、迷うことなく進められると思います。本書を読むことで、あまり難しく感じることなく、Blazorの理解を進めることができるはずです。本書が少しでもみなさんのためになれば幸いです。
ねこじょーかー
本書の目的
本書の目的は、Blazorのことをまったく知らない人が、全体の雰囲気を理解することです。具体的には、概要を理解したあとにBlazorのプロジェクトを新規に作成し、簡単な問い合わせフォームの画面を作ることができるようになります。また、基礎を学習すると同時に、認証付きのCRUDアプリを作れるようになることです。Azure AD B2CとEntity Frameworkを統合して、記事投稿アプリを作成していきます。途中の手順を省略することなく解説しているので、迷うことなく進められます。Blazorを少し触ったことがある人で、さらにBlazorを深く知りたい人にとって、この本はぴったりです。
本書の対象読者
本書では、次のような人を対象としています。
・Blazorについて興味がある人
・BlazorでCRUDアプリを作れるようになりたい人
・C#が好きな人
前提とする知識
本書を読むにあたり、次のような知識が必要となります。
・C#、HTML、CSSの基礎文法の理解
使用したソフトウェアのバージョン
・Visual Studio 2022 バージョン: 17.8.1
・Visual Studio Code バージョン: 1.84.2
・.NET SDK 8.0.100
・C# Dev Kit v1.0.14
本書の後半で使用したソースコード
以下のリンクからダウンロードいただけます。パスワードは「Y2hHmy7D」です。ただし、接続文字列やAzureの秘密情報は削除しているため、そのまま実行しても正常に動作しません。正しい内容で埋めていただくか、コピーすることを目的にご使用ください。
https://github.com/nekojoker/sample-contents/tree/main/blazor/practice-net8
第1章 Blazorとは
Blazorを使うことで、何ができるようになるのでしょうか。また、どういった種類があるのでしょうか。本章では、Blazor全体の概要について解説をしていきます。
1.1 Blazorの概要
Blazorは、C#でWebアプリが作ることができる、ASP.NET Coreに統合されたフレームワークのことです。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 Hybrid
上記について詳しく調べてみると、Web系の開発経験があることが前提の単語や解説がたくさん出てきます。もちろん仕組みから理解できれば素晴らしいですが、ここから入っていては挫折してしまうかもしれません。初めは雰囲気が理解できれば十分だと思うので、ざっくり雰囲気がわかるように、それぞれ解説をしていきます。
1.2.1 Blazor Server
Blazor Serverはその名のとおり、サーバー側で動作するアプリです。したがって、クライアント側に大きいサイズのデータをダウンロードすることはありません。また、クライアント側の環境にも依存しません。ただし、ASP.NET Core Webサーバーが必要になり、サーバーが停止するとアプリも停止します。プロジェクトを新規で作成したときの初期値は、Blazor Serverになります。
1.2.2 Blazor WebAssembly
WebAssembly（wasmと略されることもあります）によって、Webブラウザー内で.NETコードを実行することが可能になります。クライアント側で動作するので、大きいサイズのデータをダウンロードすることになり、読み込みに時間がかかります。ただし、ASP.NET Core Webサーバーが不要になり、CDN（Content Delivery Network）からアプリを提供することが可能です。
また、PWA（Progressive Web Apps）にも対応しています。PWAとは、Webサイトをブラウザーから見るのではなく、PCであればデスクトップアプリ、スマホであればアプリを立ち上げるのと同じように使える技術のことです。インストールが不要なので、Google PlayやApp Storeなどを経由してリリースする必要もありません。PCならデスクトップにショートカットを追加できますし、スマホであればホーム画面にアイコンを追加できるので、一見すると通常のアプリとの違いがありません。また、オフラインのときもWebサイトを見ることができるようになるのも、特徴のひとつです。Blazor PWAは、BlazorもPWAに対応しているということです。Blazor PWAは、Blazor WebAssemblyのプロジェクトを作成するときのオプションとして付けることができます。
1.2.3 Blazor Hybrid
Blazor Hybridは、ひとつのソースコードでデスクトップアプリとWebアプリの両方を実現するものです。これは「.NET Multi-platform App UI（.NET MAUI）」がベースになっており、WindowsやmacOSだけでなく、iOSやAndroidに共通したUIを実現することもできます。プラットフォームに依存せずに、同じようなUIを表示することができるということです。HTMLやCSSを使った画面をスマホアプリの画面に流用できるのも、特徴のひとつです。
1.3 サポートされているプラットフォーム
Blazorが動作保証されているプラットフォームは、次のとおりです。
・Apple Safari（iOSを含む）
・Google Chrome（Androidを含む）
・Microsoft Edge
・Mozilla Firefox
ほとんどが上記に当てはまると思いますが、マイナーなブラウザーは動作保証がされていないことは覚えておきましょう。
第2章 Blazorの始めかた
Blazorはすぐに始めることができます。本章では、環境構築からBlazorの新規プロジェクトを作成する手順について解説をしていきます。
2.1 はじめかた（Windows）
2.1.1 Visual Studioのインストール
まずは、Visual Studio 2022のインストールが必要です。公式サイト1からダウンロードしてインストールしてください。Visual Studio Codeでも開発はできますが、WindowsマシンではVisual Studioの方が使いやすいです。すでにVisual Studio 2022がインストールされている場合は、更新を確認して最新化しておきましょう。.NET 8がインストールできれば問題ありません。
2.1.2 プロジェクトの作成
インストールができたら、「新しいプロジェクトの作成」でBlazor Web Appを選択します。
プロジェクト名や保存場所を入力して「次へ」を選択します。
次に、フレームワークなど追加情報を設定します。図2.4は初期値になっており、そのまま作成して問題ありません。
| 項目 | 設定値 |
| フレームワーク | .NET 8.0 |
| 認証の種類 | なし |
| HTTPS用の構成 | ON |
| Interactive render mode | Server |
| Interactive location | Per page / component |
| Include sample pages | ON |
| Do not use top-level statements | OFF |
次のように画面が立ち上がれば、新規プロジェクトの作成は完了です。
2.1.3 デバッグ実行
Visual Studioの「▶」ボタンを押すか、F5でデバッグ実行しましょう。初回は、図2.6や図2.7のように証明書を信頼するかどうかのダイアログが表示されることがあります。信頼して問題ありませんので、「はい」を選択してください。正常にデバッグ実行ができたら、図2.8の画面が表示されます。
ここで、ホットリロードについて確認しましょう。ホットリロードとは、プログラムを実行しながらコードを編集し、そのコード変更を実行中のアプリに即時反映できる仕組みのことです。Home.razorの英語のメッセージをコピーしてふたつに増やしたあと、Visual Studioのデバッグアイコンの隣りにある炎のアイコンを選択しましょう。すると、デバッグ中にもかかわらず、変更した内容が画面に反映されていることが確認できます（図2.10）。ちょっとした変更をするたびに何度も「立ち上げ→停止」を繰り返さなくてよいので、とても便利ですね。ブレークポイントをつけることでステップ実行もできるので、まだやったことがない人は試してみてください。
デバッグ実行を終了するには、ブラウザーを閉じるか、Visual Studioのデバッグを終了してください。
2.2 はじめかた（Mac）
2.2.1 ツールのインストール
残念ながら Visual Studio for Macは 2024年にサポートが終了し、.NET 8の開発にも対応していません。その後継としてVisual Studio Codeでの開発ができるように「C# Dev Kit」という拡張機能がリリースされ、Visual Studioと同じような開発体験ができるようになりました。とはいえ、まだまだ発展途上なのでVisual Studioの機能と同等にはなっていませんが、Macでお金をかけずに開発するにはこれがベストの環境になります。Windowsのマシンがあれば、そちらを使用したほうがストレスなく開発が進められると思います。Macで開発をする場合は、Visual Studio Codeと拡張機能のC# Dev Kitをインストールしておきましょう。
2.2.2 プロジェクトの作成
まずは上部にあるコマンドパレットで > New Projectと入力して、新しいプロジェクトを作成します。
テンプレートは「Blazor Webアプリ」を選択します。
任意のプロジェクト名を入力します。今回はBlazorWebAppとしました。
ここまで入力すると、次のようにテンプレートのプロジェクトが作成されます。
2.2.3 プロジェクトの実行
2.2.3.1 ホットリロード
プログラムを実行しながらコードを編集し、そのコード変更を実行中のアプリに即時反映できる「ホットリロード」という仕組みがあります。プロジェクトファイルがあるフォルダーに移動し、ターミナルで以下のコマンドを実行すると、ブラウザーが立ち上がります。
ホットリロードの開始
$ dotnet watch
Home.razorの英語のメッセージをコピーして、ふたつに増やしてみましょう。
リスト2.1: Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.Welcome to your new app.すると、実行を停止しなくても、変更内容が画面に反映されることが確認できました。
ちなみに、コードを変更すると以下のようなログが出力されます。
ホットリロードのログ
dotnet watch File changed: ./Components/Pages/Home.razor.
dotnet watch Hot reload of changes succeeded.
ちょっとした変更をするたびに何度も「立ち上げ→停止」を繰り返さなくてよいのでとても便利ですが、デバッグ実行ができません。
2.2.3.2 デバッグ実行
ステップ実行をしたい場合は、デバッグ実行が必要です。初回のみデバッグ実行の設定が必要で、Home.razorなど実際にデバッグできるファイルを開いた状態で、F5を押すとデバッガーの選択が表示されるので、C#を選びます。
起動構成もDefaultで問題ありません。
dotnet watchのときと同様にブラウザーが立ち上がりました。Counterのメニューを開いて、Click meのボタンを押してみます。
Counter.razorの処理にブレークポイントを置くと、ブレークポイントで止まることが確認できます。Macでのプロジェクト作成はこれで完了です。
2.2.4 補足：初期テンプレートから変更したい場合
C# Dev KitからBlazor Web Appのプロジェクトを作成すると、執筆日時点では細かい指定ができず、すべて初期値が設定されたテンプレートが選択され、プロジェクトが作成されます。初期テンプレートから変更したい場合は、図2.21のオプションをコマンド実行時に指定してください。テンプレートオプションの表示には、次のコマンドを実行します。
テンプレートオプションの表示
$ dotnet new blazor --help
