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

今回のコースは「Blazor（ブレイザー）」というコースです。BlazorはC#を使ってWebアプリケーションを作ることができるフレームワークです。

通常、Web開発というとJavaScriptの知識などが必要になりますが、Blazorでは基本的にC#の知識でこういったWebページを作って公開することができます。

図1　Blazorコースの紹介画面

Razor構文

実際にはRazor構文と言って、C#とHTMLを組み合わせた書き方でこういった画面を作っていきます。HTMLの部分と純粋なC#のコードを、データバインドと言って関連付けて値を表示したり、値を取得したりすることができます。そういった書き方をRazor構文と言い、基本的にはその書き方を解説していきます。

図2　Razor構文の紹介

図3　Razorファイルの例（@page・@using・@rendermode とHTMLマークアップ）

図4　HTMLマークアップ部分（黄枠内）

なので、C#の知識に加えてHTMLの知識が必要になりますが、画面を作るのはどうしてもHTMLになるのでHTMLの知識が必要です。それは今回のコースでは必要な分は全てレクチャーしますので、HTMLの知識が一切ないという方でも、C#の基本的な文法の知識があればOKです。

C#の文法の知識に加えてHTMLも覚える必要がありますが、それはWPFでXAMLを覚えないといけないという感覚と一緒で、UIの作成はHTML、内部的なコードはC#を使うというイメージです。

図5　「UIの作成はHTML、内部コードはC#」

Blazorの3つの作り方

Blazorの作り方は大きく3種類あります。「Blazor Server」「Blazor WebAssembly」、そしてそのハイブリッド版である「Blazor Server + Blazor WebAssembly」です。

図6　Visual Studioの新規プロジェクト作成画面（Interactive render mode の選択肢）

「Server」はC#コードがサーバーサイドで動作するというものです。「WebAssembly」はクライアントサイドで動作し、ブラウザ側にダウンロードされてそこでC#コードが実行されるという作りになっているため、WebAssemblyを選ぶとデータベースなどへの直接アクセスができません。そういう意味では少し難しくなります。

図7　「Blazor WebAssembly：クライアントサイドで動作」

図8　「Blazor WebAssembly：DBアクセスは直接は不可」

一方Serverを選べば、サーバーサイドでC#コードが動作するのでデータベースへのアクセスが簡単にでき、いわばクライアントとサーバーの関係でデータベースにアクセスしていた時と同じ知識量・感覚でクラウドのデータベースなどを使うことができます。そのため、エンタープライズのアーキテクチャーや企業アプリを作っている方にとっては、このBlazor Serverという選択肢が一番簡単で導入しやすく、一番よいのではないかと思います。

図9　「Blazor Server：直接DBアクセス可能」

今回の講座は全てこのBlazor Serverを使って作成しています。

図10　「本講座はBlazor Serverを使用」

この講座で最終的にはAzureと繋いでデータアクセスするところまではやりたいのですが、このコースではそこまでは扱っていません。ボリュームの関係で、次のBlazorのコースでAzureにアップして通信するところまでいきたいと思っています。

図11　「本コースではAzureとの接続はなし」

本コースの内容

今回はBlazorのプロジェクトを作って、HTMLとC#コードを両方書くRazor構文のレクチャーをメインにしています。それに加えて、ページの表示、画面遷移、パラメーターを渡す方法、一覧表示、非同期でデータを取れるまで待機する方法、各種入力コントロールの書き方、イベントの拾い方など、基本的な必ず必要になるであろう内容を解説しています。

図12　「コース内容：Blazorプロジェクトの作成」

図13　一覧表示のデモ画面

図14　イベントの拾い方のデモ画面

それだけでも今回4時間ほどになってしまったので、一旦ここでリリースし、次のBlazorのコースでAzureに接続したりEntity Frameworkを使って簡単にDBアクセスしたりといったあたりをやりたいと思います。

今回はこういった内容になっていますので、「C#はできるけどWeb開発はやったことがない」という方や、「Webの知識はないけどWeb開発をしてみたい」という方には非常に楽しい内容になっていると思うので、ぜひ受講してみてください。