大復活C#学習_Blazor事始め

f:id:yasui_swift:20210414033351p:plain

はじめの一歩

当分の間、このブログでは、「Blazor入門.ブラウザで動作するC#を使ったシングルページアプリケーションの開発(増田智明 著、2020年12月14日発行、日経BP、本体2800円)」を「@教科書」と呼び、学習のよりどころとする。

@教科書どおりにBlazorのはじめの一歩を踏み出す。

当面はLinuxなどに色気をださず、Visual Studio 2019を用いて、クライアントサイドの「Blazor WebAssembly App」でプロジェクトを作成することにする。サーバーサイドの「Blazorサーバーアプリ」と動作はほとんだ変わらないが、できる範囲が異なっていているようだ。

「Blazorサーバーアプリ」は、サーバーであるASP.NET Coreと連携して動作するアプリで、サーバーサイドにあるdonetと連携するため、サーバーとの常時通信が発生し、データベースを扱うときに大きな違いがでるらしい。挫折せずに学習が進んだら、試してみることにして、当面はクライアントサイドのみで動作する「Blazor WebAssembly App」でプログラミングの基本を習得することを目指す。

コードは@教科書どおりなので、著作権のこともあるから、コードは支障のない範囲でブログに載せることにして学習を進めてゆくことにする。

あらかじめ準備されているテンプレートを立ち上げると、サイドメニューがついた画面が表示される。

f:id:yasui_swift:20210414041906p:plain

Pagesフォルダー内

f:id:yasui_swift:20210414041954p:plain

Sharedフォルダー

サイドメニューには上から「プロイジェクト名(ここではBlazorApp1)」、「Home」、「Counter」、「Fretch data」の3項目が表示される。このうち「Counter」に手を加えて最初の一歩を踏み出す(結果が最上部の画面)。

実行(「IIS Express」をクリック)すると、ソルーションエクスプローラーの「Pages」フォルダー内の「Counter.razor」に記載されているコードに従ってメインのページにプロジェクトの結果が表示される。

サイドメニューは同じく「Shared」フォルダーの「NavMenu.razor」によって表示されている。メニューの追加や変更はこのファイルを書き換えて行う。

当面の学習はこの両者を使って行うことになる。

Blazorを使うにはHTMLの知識が不可欠で、これが出来ないと先に進めない。でも数日HTMLを学習するれば、入門には事足りるようだ。しかし、最低限のHTMLの辞典は必要かもしれない(まだ準備していない)。

急ぐ旅でもないので、ゆっくりとひとことずつをかみしめて進めることにする。

今回はじめて知った言葉に「ハンバーガーメニュー」がある。

「NavMenu.razor」についての@教科書の解説のはじめの行に書いてあった言葉だが、ここですでに「・・・??」となる。

調べると

これはスマートフォンの上端によく表示されている三本線のマークのことで、ここをクリックするとメニューが表示される部分をさす。このチュートリアルではサイドメニューとして表示さているので三本線マークは表示されない。この最初の一歩では「BlazorApp1」と表示されてる部分は、以下のようになっている。

<div class="top-row pl-4 navbar navbar-dark">
  <a class="navbar-brand" href="">BlazorApp1</a>
  <button class="navbar-toggler" @onclick="ToggleNavMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
</div>

中身はclassの名前付けのみの<div>で、メニューの冒頭に「BlazorApp1」と表示させている。この行に続く行もみてみると、ほとんどが表示に関するHTMLが記載されている。これなら挫折せず、なんとかなるかもしれない(あくまでも予感です。

ちなみに、Pagesホルダーのindex.razorを開けてもみると<Home>の表示内容が書かれている。ホームページと同じように、ページの最初はindnex.razorではじめるようだ。

ーーーー**----

@page "/"

  <h1>Hello, world!</h1>

  Welcome to your ne

----  ーーーー

・・・ 今朝はここまで。