BlazorでのWebアプリケーション開発手法１【C#】B08_画面遷移_aタグ

ここからは、画面遷移の方法について見ていきます。これまで、作成した計測画面（MeasurePage.razor）を表示する方法として、アドレスバーへの直接入力と、サイドバーのメニューからのクリックという2つのやり方を紹介してきました。今回は、それらとは別の方法として、Home画面に配置したリンクをクリックして画面遷移させる方法を解説します。

最初に紹介する方法は、リンクを使ったやり方です。これは通常のWebページでもよく使われる、HTML標準のリンクの書き方で、aタグを使用します。aは英語の「Anchor（アンカー）」に由来し、「いかり」という意味を持ちますが、Webの世界ではリンク先の目印のような意味合いで使われています。

図1　Home画面の初期状態（Hello, world!）

まず、Home.razor（Homeページ）を開き、「Welcome to your new app.」の下の行にaタグを追加していきます。<a></a>と入力すると、開始タグと終了タグがセットで挿入されます。

図2　<a></a>タグを入力したところ

続けて、リンク先を指定するhref属性を追加します。href=””と入力すると、Visual Studioのインテリセンスによって、プロジェクト内のファイルやフォルダーの候補（app.css、favicon.png、libなど）が自動的に表示されます。

図3　href属性を入力するとファイル・フォルダーの候補が表示される

今回はプロジェクト内のファイルではなく、Blazorのページ（/measure）を指定したいので、候補は使わずにhref=”measure”と直接入力します。続けて、aタグの開始タグと終了タグの間に、画面に表示する文字列として「計測画面を開く」と入力します。この部分が実際にリンクとして画面に表示されるテキストになります。入力中はここでもインテリセンスの候補が表示されます。

図4　href=”measure”とリンク文字列を入力しているところ

コードの入力ができたら、一度実行して確認します。

<a href="measure">計測画面を開く</a>

図5　入力を終えて実行を開始したところ

しかし、実行してみると「Welcome to your new app.」の後ろにリンクの文字列がそのままくっついて表示されてしまい、少し見づらい状態になっています。

図6　リンクが本文にくっついて表示されている状態

そこで見た目を整えるために、Home.razorに戻って<br />タグを2つ追加し、改行を入れます。

Welcome to your new app.

<br />
<br />
<a href="measure">計測画面を開く</a>

図7　<br />タグを2つ追加したコード

再度実行すると、今度はリンクが本文と離れて、見やすい位置に表示されるようになりました。

図8　改行後、リンクが見やすい位置に表示された状態

この「計測画面を開く」リンクをクリックすると、以前作成した計測画面（/measure）に画面遷移し、正しく表示されることが確認できます。アドレスバーのURLも https://localhost:7246/measure に変わっています。

図9　リンクをクリックして計測画面に遷移した結果

最後に、完成したコードを振り返ります。href属性にはリンク先のURL（今回は”measure”）を指定し、aタグの開始タグと終了タグの間に書いた文字列（「計測画面を開く」）が、画面に表示されるリンクのテキストになります。

図10　完成したコードの確認（href属性とリンク文字列）

このように、aタグのhref属性にURLを指定し、タグに挟んだ文字列がリンクとして画面に表示される、というのがaタグを使った画面遷移の基本的な使い方です。