BlazorでのWebアプリケーション開発手法１【C#】B04_計測値を表示する

前回までの作業で、サイドバーに「計測」メニューと専用のアイコンが表示されるようになった。今回からは、この計測画面（MeasurePage.razor）に実際の項目を表示していく。まずは変数を使わず、計測値・計測日時・計測場所を固定値のまま画面に表示してみる。

PageTitleを設定する

MeasurePage.razorを開き、最初にPageTitleを追加する。PageTitleはブラウザのタブに表示されるタイトルを指定するコンポーネントで、これが記述されていない状態では、タブにはページのタイトルではなくアドレス（URL）がそのまま表示されてしまう。

図1　PageTitle未設定時はタブにアドレスが表示される

そこで<PageTitle>計測</PageTitle>という行を追加する。

図2　PageTitleに「計測」を追記する

保存して実行すると、サイドバーの「計測」メニューを開いたときにブラウザのタブに「計測」と表示されるようになる。

図3　タブに「計測」というタイトルが反映された

pタグで文字を表示する

続いて、画面に文字を表示していく。文字を表示したいだけであれば、HTMLのpタグ（段落タグ）が使える。まずは案内文として「計測値を表示します」という文字列を<h3>計測画面</h3>の下に追加する。

図4　pタグで「計測値を表示します」を追記する

実行すると、見出し「計測画面」の下に「計測値を表示します」という文字が表示される。文字を表示するだけであれば、このようにpタグに直接書くだけでよい。

図5　実行結果。案内文が画面に表示される

計測値・計測日時・計測場所を固定値で表示する

同じ要領で、計測値・計測日時・計測場所も1行ずつpタグで追加していく。まずは計測値を「計測値：12.34 m/s」という固定の文字列で追加する。

図6　計測値を固定値（12.34 m/s）で追記する

同様に、計測日時を「計測日時：2024/12/12 12:34:56」という固定の文字列で追加する。

図7　計測日時を固定値で追記する

最後に、計測場所を「計測場所：神戸」という固定の文字列で追加する。

図8　計測場所を固定値（神戸）で追記する

ここまで追加すると、MeasurePage.razorの内容は次のようになる。

@page "/measure"
 
<PageTitle>計測</PageTitle>
 
<h3>計測画面</h3>
 
<p>計測値を表示します</p>
<p>計測値：12.34 m/s</p>
<p>計測日時：2024/12/12 12:34:56</p>
<p>計測場所：神戸</p>
 
@code {
 
}

実行すると、計測画面に「計測値を表示します」という案内文に続けて、計測値・計測日時・計測場所がそれぞれ固定値で表示される。

図9　最終的な実行結果。計測値・計測日時・計測場所が表示される

まとめ

文字を画面に表示するだけであれば、このようにpタグに直接書き込むだけで実現できる。ただし、今回はすべて固定値（ハードコーディング）のままである。次回以降は、この計測値・計測日時・計測場所の部分を変数に置き換えたり、リアルタイムの値を表示したりする形に発展させていく。