top of page
2024年09月06日
おはようございます。
・・・
前回からの続き、行きましょう。
プログラムを起動させて、「Hello, world」が表示されたら「Weather」ボタンを押してください。
前回と同じ場所にブレークポイントを張ってあれば「@if (forecasts == null)」の次の行で一時停止しているはず。
ここで、「続行」ボタンを押してください。
「forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");」
上記の文で一時停止していると思います。
この段階では、まだ上記文は実行されていません。
もう一度「続行」ボタンを押してください。
実行が次の行に移りました。
まだ、画面は更新されていません。
もう一度「続行」ボタン押下。
ここ段階では「protected override async Task OnInitializedAsync()」関数を終了しています。
いよいよ画面描画に移ります。
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
上記「else」の次の行で停止しています。
「else」とは「それ以外」と言う意味です。
「@」の右の文の内容が変わったのです。
つまり、上記にある条件文「if (forecasts == null)」以外、この段階では「forecasts」に情報（気象情報）が入っています。
ですから「if (forecasts == null)」ではありません。
「それ以外」と言うことになります。
ですので、「else」以降の文に「分岐」したんです。
・・・
この段階では、画面はまだ昔の「Loading」のままとなっています。
もう一度「続行」を押す。
「@foreach (var forecast in forecasts)」に移りました。
「@」以降の内容が変わったのです。
「foreach (var forecast in forecasts)」とは、
「foreach」（それぞれに）、「forecast in forecasts」（forecastsの中のforecast）、、、
なんのこっちゃ。。。
「forecasts」は配列です。
この配列を「forecast」として「それぞれ」分解する。
つまり、配列を一つ一つ配列ではない状態に分解する。
配列は、以前確認した通り「0～4」までの5つの内容により構成されています。
クラスが5つあるわけです。
この5つのクラスを一つ一つのクラスに分解し、その担当クラス（0～4の5つのクラスの中の一つ）を「forecast」として一時的の登録する。
いま、めちゃくちゃ難しいお話をしています。
この概念を文章だけで示すことは非常に難しい。
実際に実験してみましょう。
ここで、34行目の「}」部分にブレークポイントを張ってください。
そして「続行」ボタンを押す。
34行目で止まります。
「forecast」の中には、Jsonで書かれた5つに分かれた内容のうちの一番最初の部分が入っています。
もう一度「続行」ボタンを押す。
「forecast」の中には2番目の内容が入っている。
5回「続行」を押すと、画面が更新されるはずです。
表示では、5つの気象情報が表示されています。
・・・
先ほどの「@foreach (var forecast in forecasts)」の次の行を見てみましょう。
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
これは何かと。。。
「<tr>」「<td>」
これは「HTML表記」と言うモノです。
これに関しては、あとで解説致します。
問題の「@forecast.Date.ToShortDateString()」ですね。。。
「forecast」の中の「Date」を表示せよ。その際「ToShortDateString」で表示しろ。
「ToShortDateString」これ、、、どういう意味でしょうか。
実は、今の段階の「Date」は文字（情報）の状態ではありません。
日付（情報）なんです。
ですから、これを文字（情報）にしなければ、文字として表示できません。
通常は、文字（情報）以外も、表示する際には自動で文字に変換してくれます。
しかし、日付には色々な表し方がある。
今日であれば「2025/09/06」とか、「2025年9月6日」とか。。。
ですので、表示するフォーマットを指定する必要があります。
「ToShortDateString」（短い日付の文字列へ変換）と言う意味があります。
難しいですよ。
この辺りは、AIとよく相談しながら進めてみて下さい。
次の文は数値と文字情報ですが、、、
数値は自動で文字情報に変換してくれます。
もちろん、ご自分の好みの表記方法を指定することも可能。
数値といっても、色んな表記方法があります。
整数で表記とか、小数点5桁まで表示とか、、、
・・・
ここまでで、一通り簡単に全体像を説明いたしました。
次はいよいよ、本物の気象庁さんの情報を表示させるのですが。
ここで時間となりました。
また、後でお会いいたしましょう。
では、また！
簡単なヒントを言えば、今回の気象庁さんの情報は配列ではないので、
「@foreach (var forecast in forecasts)」は不要です。
また、全て文字情報として記録しています。
さて、皆さん、、、ご自分で改造できますか？
結構難しいですよ。
AIと相談しながら、挑戦してみて下さい。
宜しくお願い致します！！
bottom of page