// Net planet-es V2

サーバーサイドで動作するBlazorサーバーApp が  .NET Core3.0 でサポートされたので、試しに動かしてみました。本当に試しに動かしてみただけですが。別の記事で、ブラウザー内で動作するWebAssembly版のBlazorクライアントアプリも動かしてみようと思います。今回使用した環境の概要は次の通りです。

• Visual Studio 2019 Community Version 16.4.3
• .NET Core 3.1 SDK インストール済み
• ワークロードで、ASP.NET と Web開発(ASP.NET and web development) を選択してVisual Studioをインストール済み

これから記載する、Blazorサーバーアプリを動かすには、記事作成時点で最新のVisual Studio 2019を使用している場合は、特に追加の必要なしで動作させることができるははずです。動作しない場合は、次のページの内容をチェックしてください。

ASP.NET Core Blazorの概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

1. プロジェクト作成する

Visua Studioを起動して、プロジェクトを作成するウィザードを開始します。検索ボックスから 'blazor' というキーワードで検索するか、 Project Typeのドロップダウンから Web を選択して絞り込みます。 Blazor Appが一覧に表示されたら選択して、 Next をクリックします。

次に、プロジェクト名や、作成するフォルダーを適当に指定して、 Create をクリックします。

作成するBlazorアプリのテンプレートを選びます。Blazor Server App を選択して、Create をクリックします。

ビルドして、エラーが発生しないことを確認します。

2. 早速動かしてみる

F5キーをタイプして、デバッグ実行します。うまくいけば、ブラウザーが起動して、サンプルアプリを動作させることができるはずです。

Chromeなどの開発者ツールを使用して、 WS (WebSocket)で絞り込んで、WebSocketが使われていることが分かります。サーバーサイドで動作するBlazorアプリの場合は、ページ遷移やボタンクリックなどのイベントが発生したタイミングで、WebSocketを使用して通信をしているはずです(私の理解では)。なのでいったんページが表示されると、Networkの通信が起きない(ページなどで参照されているリソースをダウンロードする処理を除いて) ように見えます。すごい。

Visual Studioでブレークポイントを設定すれば、ちゃんとデバッグできます。

Blazorの解説に関しては、Blazorのページで体系的に学習できるようになっています。一通りざっとみれば、サンプルアプリの内容をほぼ理解できるのではないでしょうか。

ASP.NET Core Blazor の概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

例えば、上記 Counter.razor コンポーネントのページでは、 @page ディレクティブでページのURLのパターンを登録しています。@onclick でイベントハンドラとの関連付けをしています。 @code ディレクティブで、変数やメソッドの定義をしています。@codeはちょうど、クラスを定義しているのと同じ感覚で理解しています。 @code の中で定義している変数が、クラスのメンバ変数、メソッドがクラスのインスタンスメソッドです。

Blazorを使用すると、Javascriptをあまり使用せずにC#の開発者がものすごく簡単にSPAを作成できるようになります。