大復活C#学習＿Blazorはじめの一歩（1）
とりあえず@教科書の通りにはじめの一歩を進める。
寄り道して初心者向けの他の参考書はないか捜してみたが、web上の断片はあるもののまとまったチュートリアルや入門用書籍を見つけることができなかった。Maicrosoft Docsは難解で使えなかった。まだこのBlazorがかなりの新参者で一般的でないことを示しているのだろう。
前途は洋々というより難航するかもしれない予感（実は、すでに次に進む「クラスを使う」でエラーになって動けず、もう一度最初からやり直しているのが実情だ）。
手順は、
（1）新しいプロジェクトを作る（ここではBlazorBmiとした）
（2）ソリューションエクスプローラーの「Pages」を右クリックして、新しいBlazorコンポーネントを追加する。「Pages」フォルダーを右クリックして、コンテキストメニューの「追加」から「Razorコンポーネント」を選び、「BmiSimple.razor」名の新たなコンポーネントを作成する。
（3）「Pages」の「BmiSimple.razor」に「シンプルな表示」のコードを書き込む。
（4）サイドメニューの「シンプルな表示」項目を追加するために、「Shared」フォルダー内の「NavMenu.razor」を開き、一覧部分の<li>を改修して、「シンプルな表示」を追加する。
ーーーーーPages/BmiSimple.razorーーーーーーーーーーー
@page "/simple"
<h3>シンプルは表示</h3>
<table class="table">
<tr>
<td>名前</td>
<td>@name</td>
</tr>
<tr>
<td>身長</td>
<td>@height</td>
</tr>
<tr>
<td>体重</td>
<td>@weight</td>
</tr>
</table>
<div style="font-size: @fontSize">
計算結果は @bmi.ToString("00.00") です。
</div>
@code {
private string name = "月下野青羊";
private const double height = 171.0;
private const double weight = 74.4;
private double bmi = weight / （（height / 100.0) * (height / 100.0））;
private string fontSize = "32px";
}
ーーーーーーーーーーーーーーーーーーーーーーーー
ーーShared/NavMenu.razorの改修・追加部分ーーーー
<li class= "nav-item px-3">
<NavLink class = "nav-link" href ="simple">
<span class="oi oi-list-rich" aria-hidden="true">
</span>シンプルな表示
</NavLink>
</li>
ーーーーーーーーーーーーーーーーーーーーーーーー
大復活C#学習＿事始めの解体もどき
はじめの一歩で立ち上げたBlazorApp1の構造と中身を見てみる。
ソリューションエクスプローラーには上から
・Connected Survices
・Properties
・wwwroot
・依存関係
・Pages
・Shared
・_Imports.razor
・App.razor
・C# Program.cs
と並ぶ。
それぞれのファイルやフォルダーにはさらにその下に深い階層があり、さまざまなファイルが並んでいる。
ためしに「依存関係」の項目を開けてみると多数の複雑なファイルが並ぶので、深掘りはパス。
いまの時点ではそれどれの役割は不明だが、おいおい理解することにしてあまりこだわりすぎないように心がけて先に進む。
テンプレートSPAで表示されたサブメニューの「Fetch Data」をクリックすると、どこかの気象情報の一覧表が表示されて、このデータはwwwrootの下の「sample-data」のフォルダーに入っていることが分かる。
フォルダーは「Pages」と「Shared」のふたつ。
サブメニューのBalzorApp1でテンプレートを改変したCounterの中身は、Pagesフォルダーにあり、コードは以下・・・、
ーーーーー
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<p>現在時刻:@now</p>
<button class="btn btn-primary" @onclick="dispDate">時刻を更新
</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
private DateTime now = DateTime.Now;
private void dispDate()
{
now = DateTime.Now;
}
}
ーーーーー
HTMLのフレームワークのなかの＠マークがついた記述がC#のコマンド領域で、C#のクラスやメソッドに関連付けされた部分のようだ。
大復活C#学習＿Blazor事始め
当分の間、このブログでは、「Blazor入門．ブラウザで動作するC#を使ったシングルページアプリケーションの開発（増田智明 著、2020年12月14日発行、日経BP、本体2800円）」を「＠教科書」と呼び、学習のよりどころとする。
＠教科書どおりにBlazorのはじめの一歩を踏み出す。
当面はLinuxなどに色気をださず、Visual Studio 2019を用いて、クライアントサイドの「Blazor WebAssembly App」でプロジェクトを作成することにする。サーバーサイドの「Blazorサーバーアプリ」と動作はほとんだ変わらないが、できる範囲が異なっていているようだ。
「Blazorサーバーアプリ」は、サーバーであるASP.NET Coreと連携して動作するアプリで、サーバーサイドにあるdonetと連携するため、サーバーとの常時通信が発生し、データベースを扱うときに大きな違いがでるらしい。挫折せずに学習が進んだら、試してみることにして、当面はクライアントサイドのみで動作する「Blazor WebAssembly App」でプログラミングの基本を習得することを目指す。
コードは＠教科書どおりなので、著作権のこともあるから、コードは支障のない範囲でブログに載せることにして学習を進めてゆくことにする。
あらかじめ準備されているテンプレートを立ち上げると、サイドメニューがついた画面が表示される。
サイドメニューには上から「プロイジェクト名（ここでは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
－－－－ ーーーー
・・・ 今朝はここまで。
大復活C#学習＿HTML5&CSSの復習
HTML＆CSSを復習して、すごく久し振りにホームページを作った（アップロードはしていない）。
20年以上前とずいぶんと変化している。
いまのHTML＆CSSはモバイル環境にも適応していて、昔とは全く違う。
ホームページ作りは、これはこれで楽しい作業だ。
最終目的はモバイルアプリの製作なので、遊んでばかりはいられないけれど、もう少しだけ、浦島太郎の気分で復習して現在のHTML＆CSSの使い勝手を確かめたい。
それにしても今は昔と違ってずいぶんと質の高い教科書があることに感動した。
今は無料のブログサイトがあまたあるので、わざわざ自分のホームページを作らなくてもいくらでも情報発信できるから、あえてHTMLを学習する必要は少ないけれど、もしこれからシングルページアプリケーションの開発を志す人がHTML＆CSSを学習するなら入門書には良書があっていい環境だろう。
数日でその全容が理解できる環境はうらやましいと思う。今はそんな時代になったのだとつくづく感心してしまう。
テキストエディタはatom(https://atom.io)を使ってみた。まだ２日目なのでよくわからないことが多いが、使い勝手はすばらしい。
大復活C#学習＿Blazorで沼から這い上がる
デスクトップアプリは幼稚ながらも作れるようになったので、次はスマートフォンやタブレットなどのモバイルデバイスのアプリを作りたいとあちこち首を突っ込んでいるうちに沼にはまった。
なにをどうすればよいのかまったく分からなくなってしまったのだ。
とりあえず ASP.NET Webフォーム入門を読んでみた。複雑で手強い。大冊500ページを読み通す気力が維持できるかどうか自信がなくなる。
意を決して Xamarinの入門書もめくってみるが、どうもしっくり来ない。構造が複雑で、またまったく新たな言語を学習するような雰囲気だ。新たな文法を覚えるくらいならば、思い切って Javaを学習する方が馴染みやすい気がする。C# でなければならない理由はないのだから。
次に、 .NET5 で主流となる気配の Blazor入門も齧ってみた。藁をもすがる心境とはこのことかもしれない。沼に溺れて沈んでしまいそうな状況で、なりふり構わずの選択だった（「Blazor入門．ブラウザで動作するC#を使ったシングルページアプリケーションの開発」、増田智明 著、2020年12月14日発行、日経BP、本体2800円）。
シングルページアプリケーションという言葉を初めて知った。自分が求めているアプリはちょっとした計算や検索に用いることの出来る自分用の「あったらいいな」のアプリである。
読み初めては驚いた。HTMLにC# が埋め込まれている。
まさかの、まったく予想外の展開に目が点になる。正直言って、「そうくるか…、」と言うのが本音に近い。
htmlで職場のホームページを作っていたのは今からもう20数年前になる。詳細は覚えていないが、htmlには親しみが持てるし、構造が簡単でそれほど苦労せずに使っていた記憶が蘇る。当時はcssを意識せずに書いていたように思う。もう使うこともないだろうからと、当時の教科書はすでに孫のカンクンにあげてしまったので手元にはないけれど、これならできるかもしれないと感じた。
すでに時代が変わり htmlは2014年に現在のHTML5に標準化されている。どうやらcssも進化して機能が高まり使いやすくなっているようだ。
マイクロソフトが. NET5以降のバージョンアップでwebアプリの製作にBlazor を主軸に用いるとの情報も理解できるような気がする。
Blazor は視認性が高く、理解がしやすい。これならばC# との共存に違和感を感じにくい気がする。
ようやく今後の方向性を見つけることができた。今後はBlazor を軸に学習することに決めた。
とりあえず昔とった杵柄というわけにはいかないので、HTML5 とcssを復習することにした。
さっそく本屋に行って、評判の良い教科書を新たに買ってきた（「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、Mana著、2019年3月28日発行、SBCreative、本体2260円）。
ほんのしばらくだけ襟を正してHTMLの勉強をすることにしたのである。
大復活C#学習＿立ち止まってGUIについて考える
電車に乗っていて中吊りのポスターが気になった。
キャプションは「型にハナるな。沼にハマれ。」とある。なんのことだろう。
片隅にマイクロソフト社のマークがついていたから、宣伝であることは分かるが何を宣伝しているか理解できなかった。
家に帰って調べてみるとMS社のパソコンSurfaceProの宣伝だとわかった。新しく大学に入る若者向けたパソコンの宣伝だ。
よく写真を見ると手にパソコンを持っているので納得した。
新大学生に向け、夢中になる物を見つけ、新生活を自由で豊かにすごせと告げていると理解した。
以前持っていた自分のSurfaceProは4年で画面が黄色く変色して訳の分からない模様が出現するようになったので孫のカンくんにおもちゃとして払い下げたのでもう手元にはない。その後にLenovnoの格安ノートを購入したがこれは外れ。安かろう悪かろうの典型だった。
専門学校の講義に不可欠なので現在は持ち運び便利なFujitsuの軽量パソコンを使っている。これまで使った個人のパソコンは10台以上になる。
始まりは20代後半のシャープのPC-1500との出会い、2台目は初のデスクトップMZ－2000だった。その後にNEC98Laptop、MacNote、dynabook、MacAir（これは現役）、Let’ｓNote（これも現役）、Surface2、iPadmini2（現役）などなどだ。職場ではデスクトップのNECを使っていた。古くは8インチのフロッピーディスクが外付けの時代だ。
学んだ言語も記念にここに書いておこう。
初めて感激したのはハドソンのHuBasicだった。グラフィックの座標が左下に（0，0）が設定できて感動したのを覚えている。BASICで解析した多変量解析は学術誌に掲載された。なつかしい思い出だ。
その後、HTML/CSSで職場紹介のホームページを造り、JavaScriptで簡単なアニメをつくったり公開して喜んでいた。VBAは職場の業務整理に応用した。DataBaseではDbaseⅡに始まりDbaseⅣを使った。個人ではファイルメーカーを事例記録に使い統計ソフトのRも少し囓った。DOS/VもMacOSも仕事で使った経験がある。
C言語の習得が喉に刺さったトゲのようで40歳過ぎたあたりで学習した。使うことが目的ではなくてなんども挫折したリベンジ目的の学習だった。
現在のC#の前はPyton、その前がSwiftだった。
行き着く先のC#の基礎学習はひととおり済んだ。
すべてを覚えるのは年齢的にもう無理なので、そう言えばあそこに書いてあったと思い出せればよいことにして、CUIによる学習はひと段落だ。
コンパイラ型言語とインタープリター型言語、静的型言語と動的型言語の善し悪しも少しは理解できた。
C#を学んだおかげでオブジェクト指向や継承とカプセル化、ポリモーフィズムをはじめ新たな言語世界を体験できた。
さていよいよGUIを用いたプログラム学習に進む。ここで考え込んでしまったのである。
そもそもこのブログの立ち上げはタブレットでアプリを動かすための備忘録として書き出したのが始まりだった。
いつしか道がそれてPythonではopenCVによる画像認識へ向かい、C#ではC言語への先祖帰りとなったが、行き着く先はきっと自分のパソコンで使用するデスクトップアプリケーションの製作から、さらにスマートフォンやタブレットで動くアプリを作ることだろうと気がついた。
C#の学習は学習のための学習だったけれど、突き詰めれば学習の目的はボケぼけ防止を建前としたアプリ開発とその公開だといまさらながらに気がついたのである。
究極はAndroidかiOSかでモバイル・アプリを動かすことにある。
簡単なGUIアプリはすぐに作れた。遷移やグラフィックのもっと高度なものを作りたくて、インターネットを調べてみるとC#のGUIの変遷がすさまじい。開発から20年足らずのC#であるが、GUIはWindosFormに始まり、.NET Framework、.NET Core、.NET 5へと移り変わり、落ち着かない。
C#のGUIの最新教科書を探すがちょうどよいものがみつからない。なぜだろうと訝しくなる。webアプリケーションは比較的新しい教科書があるのだが、手頃な教則本が見つからないのだ。
C#のGUIは、FormからWPF(WindowsPresentationFoundation)、UWP(UniversalWindowsPlatform)と繋がり、XML（ザムル）、Xamarin（ザマリン）がこれに参入して混沌状態と言ってよいように感じる。すでにFormと.NET Frameworkは開発が終了しているし、.NET CORE3は.NET 5への移行が始まっている。
これからC#のGUIを学ぼうとするといったい何をどうすればいいのか途方に暮れてしまう心境に陥った。別の意味で「沼にはまった」感じがする。
C#でなければならない理由はなにか、とそもそも論に立ち返り考える。
AndroidはGoogleのAndroidStudioかJavaの発展形のKotlinがメジャーな開発言語で、iOSはこのブログの題名でもあるSwiftがメジャーだ。
ゲームならC#とUnityが大本命だが、いまのところゲーム作りには興味がない。
GUIを離れて、プロの世界ではどの言語が主流なのかを調べると、あらたなプログラマーの募集ではC言語（++も＃もないオリジナル）が第1位、第2位がJavaで、人工知能を使いたい研究職や開発業者ではPythonが主流だと書いてある。
Googleの新しい言語「Go」はまだ姿が見えない。
少なくともC#は個人用のデスクトップアプリを除くスマートフォンやタブレットのアプリ開発ではマイナーな位置づけなのであることを初めて知った。
さてこれからの学習をどうするか迷っているのである。
入門書も少ないXamarinに挑戦するか、まだ未体験のJavaに矛先を換えてみるか、この「沼」からどうやって這い上がるか、悩むのである。
大復活C#学習＿Formで暦変換のプロジェクトを作る
.NET Framework フォームを用いて干支を調べるプロジェクトを作成してみた。CUIで作ったものを元にして作成してみたが、まだすっきりできない。
例外処理をボタン下にwhile(true)メソッドで書くと無限ループになって動かなくなるので、try,catchと、if elseにしてみた。幼稚なプログラムだが、目的は達成できた。オーバーライドやオーバーロードを使ってもう少しスマートに書くことを目指したい。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Globalization;
//koyomiEto_224
//produced by yasui_swift 2021/2/24
namespace koyomiEto_224
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
public string genGo;
public string nenYear;
public string getuMonth;
public string nichiDay;
//十干十二支の配列を作る
public string eraEtoSi = new string[12] {
"子（ね）",
"丑（うし）",
"寅（とら)",
"卯（う）",
"辰（たつ）",
"巳（み）",
"午（うま）",
"未（ひつじ）",
"申（さる）",
"酉（とり）",
"戌（いぬ）",
"亥（い）"
};
public string eraEtoJikkan = new string[10]{
"庚（かのえ）",
"辛（かのと）",
"壬（みずのえ）",
"癸（みすのと）",
"甲（きのえ）",
"乙（きのと）",
"丙（ひのえ）",
"丁（ひのと）",
"戊（つちのえ）",
"己（つちのと）"
};
private void warekiAgeClicked_Click(object sender, EventArgs e)
{
//DateTimeを使う
CultureInfo culture = new CultureInfo("ja-JP", true);
culture.DateTimeFormat.Calendar = new JapaneseCalendar();
DateTime today = DateTime.Today; //今日の日付
//例外処理をtry,catchで行う
try
{
genGo = comboBox1.Text; //元号
nenYear = textBox1.Text; //年
getuMonth = textBox2.Text; //月
nichiDay = textBox3.Text; //日
string nenGappi = genGo + nenYear + "/" + getuMonth + "/" + nichiDay;
DateTime finalDate = DateTime.Parse(nenGappi, culture.DateTimeFormat);
//誕生日の日付から年齢を計算する
int ageOld = today.Year - finalDate.Year;//満年齢の計算
if (finalDate > today.AddYears(-ageOld)) //年齢の修正
{
ageOld--;
}
textBox4.Text = finalDate.ToString("yyyy年M月dd日");//変換後の西暦
textBox6.Text = ("満 " + ageOld.ToString()); //年齢
int year = finalDate.Year;//干支の計算
int i = year % 10;
int j = (year + 8) % 12;
string etoJikkan = eraEtoJikkan[i];
string etoSi = eraEtoSi[j];
textBox5.Text = (etoJikkan + etoSi);
}
catch
{
MessageBox.Show(" ⇒ 入力に誤りがあります");
return;
}
}
private void seirekiAgeClicked_Click(object sender, EventArgs e)
{
//日付の入力と計算.西暦から
var ci = new CultureInfo("ja-JP");
ci.DateTimeFormat.Calendar = new JapaneseCalendar();
string strTime;
DateTime dateTime;
strTime = textBox7.Text; // 様式はyyyy/MM/dd or yyyy,MM,ddどちらも可
if (DateTime.TryParse(strTime, out dateTime))
{
string warekiDate = dateTime.ToString("ggyy年MM月dd日", ci);
textBox8.Text = warekiDate;
}
else //例外処理をif,elseで行う
{
textBox8.Text =( "変換できません！");
}
}
private void button1_Click(object sender, EventArgs e)
{
//日付の入力と計算.西暦から
string strTime;
DateTime dateTime;
var ci = new CultureInfo("ja-JP");
ci.DateTimeFormat.Calendar = new JapaneseCalendar();
strTime = textBox7.Text; // 様式はyyyy/MM/dd or yyyy,MM,ddどちらも可
if (DateTime.TryParse(strTime, out dateTime))
{
string warekiDate = dateTime.ToString("ggyy年MM月dd日", ci);
textBox8.Text = warekiDate;
}
else
{
textBox8.Text = ("変換できません");
}
}
private void Form1_Load(object sender, EventArgs e)
{ }
}
}
