A10　PageTitle

今回は PageTitle コンポーネントについて解説します。PageTitle は、ブラウザのタブに表示されるページタイトルを設定するためのコンポーネントです。

対象となるのは Counter.razor です。4 行目を見ると、次のように記述されています。

@page "/counter"
@rendermode InteractiveServer
 
<PageTitle>Counter</PageTitle>
 
<h1>Counter</h1>
 
<p role="status">Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
    ...
}

この <PageTitle>Counter</PageTitle> の部分が、ブラウザのタブに表示される文字列を制御しています。実際にアプリを起動し、Home ページを表示している状態ではタブに「Home」と表示されています。

図1　Home ページを表示している状態。タブには「Home」と表示されている

左メニューから Counter をクリックして Counter ページへ遷移すると、タブの表示が「Counter」に変わります。これが Counter.razor の <PageTitle>Counter</PageTitle> によるものです。

図2　Counter ページへ遷移すると、タブの表示が「Counter」に変わる

この PageTitle の中身を実際に書き換えて、タブの表示が変わる様子を確認します。デバッグ実行中の Counter.razor の 4 行目、<PageTitle>Counter</PageTitle> の Counter の部分にカーソルを合わせます。

図3　Counter.razor の 4 行目。<PageTitle>Counter</PageTitle> の部分

ここを書き換えて、次のように AAA を追加します。

<PageTitle>CounterAAA</PageTitle>

図4　<PageTitle>CounterAAA</PageTitle> に書き換えたところ

保存したら、ツールバーのホット リロード（Alt + F10）ボタンを押します。ホット リロードを使うと、アプリを再起動しなくてもコードの変更をすぐに反映させることができます。

図5　ツールバーのホット リロード（Alt + F10）ボタン

ブラウザを確認すると、タブの表示が「CounterAAA」に変わっています。

図6　ホット リロード後、タブの表示が「CounterAAA」に変わった

同様に、今度は BBB に書き換えてみます。

<PageTitle>CounterBBB</PageTitle>

図7　<PageTitle>CounterBBB</PageTitle> に書き換えたところ

保存してホット リロードすると、タブの表示が「CounterBBB」に変わります。

図8　ホット リロード後、タブの表示が「CounterBBB」に変わった

さらに CCC に書き換えます。ファイルの保存時にホット リロードが実行されるよう設定しておけば、ホット リロードボタンを押さなくても、保存するだけでタブの表示に反映されます。

<PageTitle>CounterCCC</PageTitle>

図9　<PageTitle>CounterCCC</PageTitle> に書き換えて保存したところ

ボタンを押さずに保存しただけで、タブの表示が「CounterCCC」に変わっていることが確認できます。このように、ホット リロードを使うと再起動せずにコードの変更をすぐに反映できます。

図10　保存だけでタブの表示が「CounterCCC」に変わったことを確認

このように、Counter.razor の Counter という部分はお好きに変更していただいて構いません。PageTitle は、ブラウザのタブに表示されるページタイトルを設定するコンポーネントである、という内容でした。