Blazor入門
書籍情報
発売日 : 2020年12月11日
著者／編集 : 増田 智明
出版社 : 日経BP
発行形態 : 単行本
書籍説明
内容紹介
Ｂｌａｚｏｒの仕組みから、ＡＳＰ．ＮＥＴ ＭＶＣやデータベースとの関連方法までを解説。
目次
はじめに
第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アプリの発行
第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アプリの発行
著者情報
増田 智明
増田, 智明
