BlazorでのWebアプリケーション開発手法２【C#】A01_はじめに

本コースは、C#とBlazorを使ってWebアプリケーションを作成する講座の第2弾です。第1弾ではBlazorの基本的な使い方を扱いましたが、本コース（第2弾）では、より実践的な画面を作り込むためのテーマを中心に解説していきます。

図1　本コースで作成するサンプル画面（メッセージ表示・入力検証・各種入力コンポーネントなどを含む）

具体的には、以下のようなテーマを扱います。

・メッセージ表示：画面上にメッセージを表示する方法。

・入力検証：保存操作を行った際に、入力内容にNGがあれば該当項目を赤枠で囲み、OKであれば緑色で示す、といった検証結果の表示方法。また、NGとなった項目のすぐ下にエラーメッセージを表示する方法についても解説します。

・入力コンポーネント：HTML標準のフォーム部品ではなく、Blazorが提供する入力コンポーネント（数値入力・日付入力など）の使い方。

・依存性注入（DI）：ViewModelを画面から分離し、DIを使って注入する方法。また、自作のメッセージサービスをDIで注入する方法についても扱います。DIを使うことでテストがしやすくなるといった利点があります。

・ライフサイクル：値をブラウザ単位で保持し続けるのか、画面遷移のたびに破棄するのか、といった値のライフサイクルの管理方法。

・Azureへの公開：MicrosoftのクラウドサービスであるAzureを使って、作成したアプリケーションをインターネット上に公開する方法。公開後は、インターネットに接続できる端末であればどこからでもアプリにアクセスできるようになります。

・データベースとの連携：Azure上のデータベースと連携させることで、どこからでもデータの登録・参照ができるアプリケーションを作る方法。

図2　Azureでの公開（Microsoft Azureのポータル画面）

図3　Visual Studioの「発行」機能を使ってAzure App Serviceへアプリを公開する画面

図4　スマートフォンから公開先のURL（azurewebsites.net）にアクセスする様子

図5　スマートフォンから公開されたアプリにアクセスし、正しく表示できていることを確認

このように、第1弾と第2弾の両方を通して学習することで、Blazorを使ったアプリケーションの作成から、Azureへの公開までを一通り経験できる構成になっています。

図6　前提条件：第1弾を観ていること

なお、本コースを受講するにあたっての前提条件として、第1弾のコースを先に視聴しておくことが挙げられます。第1弾をまだご覧になっていない方は、先に第1弾を視聴してから本コース（第2弾）に進んでください。

また、本コースはC#の知識があれば受講できるように構成されており、HTMLの知識がなくても問題ありません。Web開発に挑戦してみたいという方は、ぜひ受講してみてください。

図7　エンディング（コースタイトル）

BlazorでのWebアプリケーション開発手法２【C#】

■非公開コース「C#14新機能」プレゼント：
非公開コース「C#14新機能」（80分）をご覧になりたい方は
こちらからURLとパスワードを発行していますので、ご覧になってみてください。
非公開コース「C#14新機能」を観る

A01_はじめに
B01_メッセージを出すレイアウトの作成
B02_pタグを使ったメッセージ表示
B03_ポップアップメッセージを表示する方法
B04_問い合わせメッセージを表示する方法
B05_ユーザーの入力を受けるメッセージ
B06_インラインJavaScript非推奨
B07_Javascriptを分離してアクセスする方法
B08_MessageServiceを作成する
B09_自作Serviceの依存性注入をする方法
C01_EditFormを使った入力検証
C02_ValidationSummary
C03_ValidationMessage
C04_入力コンポーネント_InputText
C05_InputNumber
C06_未入力を許容する方法
C07_InputNumberで対応している型
C08_InputDate
C09_InputSelect
C10_入力コンポーネント_InputCheckbox
C11_InputRadioとInputRadioGroup
C12_InputTextArea
C13_InputFile
C14_ファイルの上限を設定する
C15_フォーカスをあてる方法_標準編_ElementReference
C16_フォーカスをあてる方法_Razorコンポーネント編
D01_StringLength
D02_RegularExpression_正規表現
D03_EmailAddress
D04_Compare
D05_ViewModelに分ける方法
D06_依存性注入を利用したViewModelの生成
D07_CustomValidation1
D08_CustomValidation2
D09_プロパティレベルのCustomValidation
D10_ValidationContext
D11_処理をViewModelに移す書き方
D12_ViewModelに移せないロジック
D14_ShouldRender
D15_ViewModelに書かないほうがいいもの
D16_エラー箇所にフォーカスを当てる方法
E01_Azureにデプロイするための事前作業
E02_Azureにアップするアプリの作成
E03_Azureへの公開準備
E04_Azureへの公開
E05_データベースの作成
E06_データベースのデータを取得する
E07_データベースの値を画面に表示する
E08_Azureのデータベースを作成する
E09_Azureのデータベースにポータルサイトからログインする
E10_AzureのDBにテーブルを作成する
E11_BlazorアプリからAzureDBに接続する
E12_SQLデータベース料金の注意
E13_AzureSQLデータベースの無料オファーを受ける
F01_依存性注入のライフサイクル
F02_クラウドでのAddSingletonの動き