Amazon

2020年10月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

最近のトラックバック

無料ブログはココログ

« mecab-ipadic-NEologdの最新の辞書ファイルを作成する(debian 10) | トップページ | Postgres(PostgreSQL)をDockerでインストールしてみる »

2020年6月 8日 (月)

Blazor WebAssemblyを動かしてみる(.NET Core v3.1 + VisualStudio2019)

今回は.NET Coreの目玉機能?のBlazor(WebAssembly版)を試してみたいと思います。





Blazorは果たして流行るのか? 正直これはなんとも言えないのですが、.NET開発者にとってはなかなか魅力的な技術 ではないかと考えています。

  ・C#でブラウザ側の部品を作る事ができる
  ・作った部品はRazor構文で従来の拡張の様に使える
  ・WebAssemblyで高速動作

これは上手に利用すると、C#+HTML+CSSだけでWebアプリケーションが作れてしまう事になります。これはもしかしたら凄いことなのでは? 私が苦手なJavaScriptを使用しなくても良いと言う事で、これは試して見ない訳にはいきません。

今回は以下の作業を実施します。また、IDEとしてはVisualStudioを使用してやってみます。

  ・Blazorテンプレートのインストール
  ・Blzaorプロジェクトの作成
  ・Hello Blazor Pageの作成
  ・Blazorコンポーネントの作成


以上です。早速始めましょう!


・Blazorテンプレートのインストール

今回も公式サイトに従います。

公式サイト

    ASP.NET Core Blazor の概要

v3.2.0とあります。rcがとれているので正式版でしょうか。

以下のステップになります。

1. Visual Studio 2019をインストールする
  これは割愛します。 インストール時に.NET Coreの開発もセットアップして下さい。
  
2. Blazor WebAssembly プレビュー テンプレートをインストールします
  こちらのサイトを参考に最新版を選択して下さい。
    Microsoft.AspNetCore.Components.WebAssembly.Templates

  今回は最新版である以下をインストールします。コマンドプロンプトで以下のコマンドを実行します。

  


以下の様になるはずです。




3. VisualStudio2019で新規プロジェクトの作成時にBlazorを選択する。

.NET Core開発を選択してあれば新規プロジェクトの際にメニューに表示されているはずです。

Blazor20200216_02

さあ、これで準備は整いました。早速作成して見ましょう。


・Blazorプロジェクトの作成

準備ができたので、早速作成してみる事にします。ます、VisualStudio2019で新しいプロジェクトの作成からBlazorアプリを 選択します。

Blazor20200216_03

プロジェクトが作成されたら、いきなりF5キーを押して実行してみましょう。以下の様な画面が表示されたら動作しているでしょう。

Blazor20200216_04

Counterのページ(ソースコード)を見てみましょう。

Blazor20200216_05

下記の様なコードが生成されています。




なるほど…ボタンを押されると、IncrementCount()メソッドが実行されて、それがCurrent countに表示される…って これはなかなか衝撃的なコードですね。何がすごいってJavaScriptではなくc#で実行しているのが凄い。もう少し試して見ます。


さらっとコピーして、Counter2を作成してみます。まず、最初にNavMenu.razorに以下の様に/counter2を追加します。



続いて、/Pages/Counter.razor ファイルをコピーして Counter2.razor を作成して、以下の様に修正します。



実行結果は以下の通りです。

Blazor20200216_06

これはなかなかインパクトが強い…。当たり前の様にc#のプロパティが利用できています。では、お仕事でありがちな 画面を調子に乗って作成してみます。 Calc.razorファイルを作成して以下の様に書きます。(NavMenu.razorも書き換えます)



実行結果は以下の通り、単価・数量を変更する都度合計金額が変わります。この簡単さは本当に凄い! 使い慣れたc#でここまで Webの画面が作れてしまいます。また、さりげなく動いている@bind属性によるバインドが非常に強力です。JavaScriptより ずっと楽に記述できます。

Blazor20200216_07

・Blzorコンポーネントの作成

最後に部品(Component)化して見ましょう。こちらもサクッと出来てしまいます! TotalFee.razor ファイルを作成して 以下の様に記述します。



そして、 Calc2.razor クラスを作成して以下の様に記述します。



これで、実行結果は以下の様になります。

Blazor20200216_08

なんと、こんなに簡単にコンポーネント化ができてしまいます…。調子に乗って以下の様なコンポーネントも作成してみました。



使い方は以下で完了。



実行したイメージが以下の通りです。

Blazor20200216_09

これは凄い、こんな高度な画面がまさか触った初日から楽々作れるとは思いませんでした。それぐらい自由にc#の知識が 生かせます! c#使いにとってはもの凄く開発効率の高いフレームワークと言えるのではないでしょうか。




如何でしたでしょうか。これは、ASP.NET Webformで無しえなかった? .NETだけでWebアプリケーションを構築する フレームワークへの今時な再挑戦なのでしょう。そして、非常に独自色の強かったASP.NET Webformよりもより汎用性が 高く、非常に使い易いフレームワークとなっているのでは無いでしょうか。また、WebAssemblyと言う標準的な仕様に 沿っているのも良いですね。本当に完成が待ち遠しいです。そして、ActiveX・Silverlightの様になりませんように…。





さて、最近はすっかりコードを書く機会が減ってサンデープログラマー以下の状況ですが、やっぱり時々コードを自分で 書いていないと駄目だな…と思う今日この頃です。それに、やっぱりどんな簡単なものであっても自分でやって見るのは楽しいですよね。 そして、個人的にはJavaScriptが嫌いで仕方がなかったので、c#でカバーできるこの技術はちょっとテンションが上がります! 私でもWebでSPAを作ることができるかもしれません!










« mecab-ipadic-NEologdの最新の辞書ファイルを作成する(debian 10) | トップページ | Postgres(PostgreSQL)をDockerでインストールしてみる »

C#」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« mecab-ipadic-NEologdの最新の辞書ファイルを作成する(debian 10) | トップページ | Postgres(PostgreSQL)をDockerでインストールしてみる »