Blazor入門

本書は、C#プログラマを対象にして、データベースアクセス、Web API などを活用できるBlazor 技術を解説します。

Blazorは、事前にコンパイルされたバイナリーコードをWebブラウザで実行可能にするWebAssembly技術を活用して.NETの動作環境を実現したフレームワークです。いままでブラウザ上ではJavaScriptしか動作しなかったため、SPA（シングルページアプリケーション）や多様な動作はJavaScript で書くことが必須でした。しかし、ブラウザ上で動作するWebAssemblyのおかげで、JavaScript以外のプログラム言語（C++やRustなど）を使うことができるようになりました。Blazorは、ASP.NETで培われたRazorという記述（HTMLとC# のコードを同時に記述できる）を使います。このため、ASP.NET特有の技術をそのまま流用でき、サーバーサイドもクライアントサイドもC#で開発できるので、.NET 技術者にとっては開発生産性やメンテナンス性でメリットがあります。本書は、C#プログラマを対象にして、データベースアクセス、Web API 、ASP.NET MVC などを活用できるBlazor 技術を解説します。

はじめに

第1章 Blazorの仕組み
　1.1 シングルページアプリケーションの登場
　1.2 WebAssembly
　1.3 Blazorコンポーネント
第2章 開発環境
　2.1 Visual Studio
　　2.1.1　Visual Studio 2019の起動
　　2.1.2　新しいプロジェクトの作成
　　2.1.3　Blazor WebAssembly Appの場合
　　2.1.4　Blazorサーバーアプリの場合
　2.2 Visual Studio Code
　　2.2.1　Visual Studio Codeの起動
　2.3 dotnetコマンド
　　2.3.1　dotnet コマンドの実行
　　2.3.2　Windows Terminalの利用
　　2.3.3　Blazorプロジェクトの作成
　2.4 Windows Subsystem for Linux
　　2.4.1　Windows上のLinux 環境
　　2.4.2　.NET Core SDKの導入
　　2.4.3　Blazor プロジェクトの作成
　　2.4.4　Visual Studio Codeでの開発
　2.5 Linux
　　2.5.1　Tera Termで接続
　　2.5.2　WSL とLinux 環境の違い
　2.6 各種ブラウザ
　　2.6.1　ブラウザの違い
第3章 最初のBlazorアプリ
　3.1 Blazor プロジェクトの作成
　　3.1.1　再びVisual Studioの起動
　　3.1.2　BlazorHello プロジェクトを作成
　　3.1.3　Blazor プロジェクトの内容
　　3.1.4　Counter.razorの内容
　　3.1.5　NavMenu.razorの内容
　3.2 Blazor プロジェクトの実行
　　3.2.1　デバッグ実行
　　3.2.2　［Click me］をクリックする
　　3.2.3　Counter.razorの内容を再確認
　　3.2.4　デバッグの停止
　3.3 コードの変更
　　3.3.1　時刻を表示させる
　　3.3.2　現在時刻を更新する
　3.4 Linux での実行
　　3.4.1　WinSCPでファイル転送
　　3.4.2　Linux上でビルド
　　3.4.3　dotnet runの実行
　　3.4.4　Linux上のブラウザで表示
第4章 コンポーネント
　4.1 コンポーネントクラス
　　4.1.1　Blazorプロジェクトの作成
　　4.1.2　シンプルなコンポーネント
　　4.1.3　クラスを使う
　4.2 ルーティングとパラメーター
　　4.2.1　URLパラメーター
　　4.2.2　フォーム入力
　4.3 親子関係のコンポーネント
　　4.3.1　子コンポーネント
　　4.3.2　パラメーター付きのコンポーネント
　　4.3.3　リスト表示できるコンポーネント
　4.4 属性スプラッティングの指定
　　4.4.1　複数パラメーターをまとめる
第5章 データバインディング
　5.1 プロパティへバインド
　　5.1.1　シンプルなデータバインド
　　5.1.2　即時反映のバインド
　　5.1.3　スタイルにバインド
　　5.1.4　数値でスタイルをバインド
　　5.1.5　CSS へのバインド
　5.2 フォーム要素へのバインド
　　5.2.1　入力フォームの例
　　5.2.2　テキスト入力
　　5.2.3　数値入力
　　5.2.4　項目選択
　　5.2.5　項目選択でクラスを利用
　　5.2.6　チェックボックス
　　5.2.7　入力フォーム全体
　5.3 親子関係のデータバインド
　　5.3.1　親から子へのデータバインド
　　5.3.2　子から親へのデータバインド
　　5.3.3　子のイベントを親へ伝える
第6章 イベント処理
　6.1 ボタンのクリックイベント
　　6.1.1　イベントの種類
　　6.1.2 　クリックイベントの記述
　　6.1.3　クリックイベントの実行
　6.2 ラムダ式
　　6.2.1　ラムダ式の記述
　　6.2.2　ラムダ式の実行
　　6.2.3　ラムダ式で複文を使う
　6.3 コンポーネントのイベント
　　6.3.1　AddressItemクラス
　　6.3.2　部品コンポーネント
　　6.3.3　親コンポーネント
　6.4 キーイベント
　　6.4.1　inputタグのキーイベント
　　6.4.2　キーイベントの実行
　6.5 マウスイベント
　　6.5.1　SVGのマウスイベント
　　6.5.2　マウスイベントの実行
第7章 Razor記法
　7.1 暗黙的なRazor記述
　　7.1.1　一般的な変数の表示
　　7.1.2　いろいろな変数の表示
　　7.1.3　変数表示を書式化する
　7.2 明示的なRazor記述
　　7.2.1　コードブロックで記述
　7.3 制御構造の記述
　　7.3.1　条件文（if、else、switch）
　　7.3.2　繰り返し文（for、foreach）
　7.4 コメント
　　7.4.1　コメントの記述方法
　　7.4.2　実行時のコメント
　7.5 名前空間
　　7.5.1　usingディレクティブの利用
第8章 フォームと検証
　8.1 フォームの活用
　　8.1.1　EditFormコンポーネントの基本構造
　　8.1.2 　InputTextコンポーネント
　　8.1.3　InputSelectコンポーネント
　　8.1.4　InputNumberコンポーネント
　　8.1.5　その他の入力コンポーネント
　　8.1.6　各入力コンポーネントの活用
　　8.1.7　EditFormコンポーネットの動作
　8.2 検証のサポート
　　8.2.1　アノテーションの活用
　　8.2.2　アノテーションの設定
　　8.2.3　検証機能の動作
　　8.2.4　その他のアノテーション
　8.3 ［登録］ボタン時の検証
　　8.3.1　カスタム検証クラス
　　8.3.2　カスタム検証の利用
　　8.3.3　カスタム検証の動作
　8.4 ［登録］ボタンの有効制御
　　8.4.1　EditContext属性の活用
　　8.4.2　［登録］ボタンの動作確認
第9章 データベースアクセス
　9.1 Blazor サーバーアプリの違い
　　9.1.1　2 つのBlazorアプリを比較
　　9.1.2　クライアントサイドのBlazorアプリ
　　9.1.3　サーバーサイドのBlazorアプリ
　　9.1.4　サーバーとの通信
　9.2 SQL Serverの利用
　　9.2.1　データベースの作成
　　9.2.2　テーブルの作成
　　9.2.3　初期データの挿入
　9.3 Modelクラスの作成
　　9.3.1　Entity Framework Coreの導入
　　9.3.2　dotnet efコマンドの利用
　　9.3.3　生成したデータコンテキストファイルの確認
　　9.3.4　生成したEntityクラスの確認
　9.4 テーブルから読み込み
　　9.4.1　一覧表示
　　9.4.2　一覧表示の実行
　　9.4.3　LINQの利用
　9.5 テーブルに書き出す
　　9.5.1　リストを選択
　　9.5.2　リストの選択を実行
　　9.5.3　テキストボックスの配置
　　9.5.4　データ更新の実行
　　9.5.5　Blazorによるデータベースの利用
　9.6 MySQLの利用
　　9.6.1　MySQLへアクセスするための準備
　　9.6.2　データコンテキストの書き替え
　　9.6.3　Entityクラスの再利用
　　9.6.4　MySQL Workbench
　　9.6.5　dotnetコマンドで実行
　9.7 依存性注入を有効にする
　　9.7.1　接続文字列を外部から取り込む
　　9.7.2　ファクトリーパターンの利用
　　9.7.3　データコンテキストの修正
　　9.7.4　Setupクラスの修正
　　9.7.5　appsettings.jsonに接続文字列を追加
　　9.7.6　Blazorページの接続部分を修正
　　9.7.7　プログラムの実行
第10章 Web APIの活用
　10.1 ASP.NET Core WebでWeb API
　　10.1.1　Blazorアプリケーションの作成
　　10.1.2　ASP.NET Core Webアプリの作成
　10.2 APS.NET Core Webでデータアクセス
　　10.2.1　NuGetパッケージの管理
　　10.2.2　dotnet efコマンドの実行
　　10.2.3　コントローラークラスの作成
　　10.2.4　接続文字列をappsettings.jsonから取得
　　10.2.5　Web APIの呼び出しチェック
　10.3 CORSの設定
　　10.3.1　Microsoft.AspNetCore.Mvc.Corsの利用
　　10.3.2　CORS の追加
　10.4 BlazorからGETメソッド呼び出し
　　10.4.1　一覧を表示
　　10.4.2　一覧表示を実行
　10.5 BlazorからPOSTメソッド呼び出し
　　10.5.1　新規作成と更新
　　10.5.2　更新の実行
　　10.5.3　削除処理
　　10.5.4　削除の実行
第11章 SVGの活用
　11.1 SVGとの連携
　　11.1.1　SVGの活用
　　11.1.2　ライフゲーム
　　11.1.3　SVGで碁盤の目を表示
　11.2 SVGを変更
　　11.2.1　セルの色を変える
　　11.2.2　ランダムに色を変える
　　11.3 SVGのイベント処理
　　11.3.1　セルのクリックイベント
　　11.3.2　マウスクリックで反転する
　11.4 SVGでライフゲーム
　　11.4.1　［開始］ボタンと［停止］ボタン
　　11.4.2　セルのロジック
　　11.4.3　ライフゲームの実行
第12章 JavaScriptとの連携
　12.1 ダイアログの呼び出し
　　12.1.1　alertダイアログの表示
　　12.1.2　C#からalert関数の呼び出し
　　12.1.3　alert 関数の直接呼出し
　　12.1.4　confirmダイアログの表示
　　12.1.5　confirm関数の実行
　12.2 .NETからJavaScriptを呼び出す
　　12.2.1　idを渡してjQueryを使う
　　12.2.2　InvokeVoidAsyncメソッドで呼び出し
　　12.2.3　id渡しの実行
　　12.2.4　要素の参照を渡す
　　12.2.5　参照渡しで実行
　12.3 JavaScriptから.NETを呼び出す
　　12.3.1　DotNet.invokeMethodの活用
　　12.3.2　JavaScript関数の呼び出し
　　12.3.3　JSInvokable属性の活用
　12.4 ChartJsの利用
　　12.4.1　ChartJs.Blazorパッケージ
　　12.4.2　ChartJsLineChartコンポーネント
　　12.4.3　データの作成
　12.4.4　折れ線グラフの表示

付録A Blazorアプリの発行