120. Title Management（ページタイトルの自動更新：ブラウザの「名前」を常に合わせる）

原理：画面の中身と「看板」を一致させる

見出しは変わったのに、タブの名前がそのまま？

HTMXで画面の一部（メインコンテンツ）を書き換えて、URLも変わった（112.）とします。しかし、ブラウザの「タブ」に表示されている名前や、履歴一覧に載る名前が「前のページ」のままだったらどうでしょう？ユーザーは「今どこのページを見ているのか」を一瞬で見失ってしまいます。

「タイトル管理（Title Management）」とは、HTMLの部分更新に合わせて、ブラウザの <title> タグ（タブの名前）を自動的に、かつ最新の状態に更新することです。

実践：タブの名前に命を吹き込む

1. サーバーからのレスポンスに `<title>` を含める

HTMXの非常に賢い機能の一つに、「送られてきたHTMLの中に <title> タグを見つけたら、それを自動的にブラウザのタブに反映する」というものがあります。

<!-- 
  サーバーが返す部分的なHTMLの断片
-->
<title>商品詳細: かっこいいスニーカー</title>

<div id="main-content">
    <h1>かっこいいスニーカー</h1>
    <p>このページの中身と一緒に、タブの名前も変わります！</p>
</div>

2. グローバルなタイトル更新（hx-on の活用）

サーバーがHTMLを返せない場合や、特定のルールでタイトルを合体させたい（例：「商品名 | 自社サイト」）場合は、JavaScriptで割り込むこともできます。

<body hx-on:htmx:after-swap="document.title = event.detail.xhr.getResponseHeader('X-Page-Title') || document.title">

3. ステップ・バイ・ステップ解説

タイトル案を練る: 「何のページか」が一目でわかる短い言葉を考えます。
HTMLへの埋め込み: サーバー側で、返すHTMLの最初（または最後）に <title>新しい名前</title> を書き込みます。
ブラウザで確認: ボタンを押して画面が変わった瞬間、タブの名前が「シュッ」と変わることを確認します。

比較：手動の `document.title` vs HTMXの自動解析

手動 (Vanilla JS)

方法: 通信が終わるたびに document.title = "..." と書く必要がある。ミスが起きやすく管理が大変。

HTMXの自動解析

方法: サーバーが返すHTMLにタグを入れるだけ。
利点: HTML（文書）として自然な形で管理でき、プログラム側を修正しなくても「新しいHTMLファイル」を作る感覚でタイトルも変更できる。

まとめ：初心者のための「看板」の重要性

ページタイトルは、あなたのサイトの外側（タブや履歴、お気に入り）における「顔」です。

SEOへの影響: ページごとに適切なタイトルがついていることは、検索エンジン（Googleなど）にとっても非常に評価しやすいポイントになります。
履歴の見やすさ: ブラウザの履歴ボタンを長押ししたとき、同じタイトルのページが並んでいるよりも、中身のわかる名前が並んでいるほうが、ユーザーは圧倒的に戻りやすくなります。
小さなこだわり: 中身だけでなく、タイトルまでしっかり管理されている。この「細部へのこだわり」が、サイト全体の信頼感に繋がります。

中身と名前を、一つに。タイトル管理という最後の仕上げを通じて、ブラウザのタブから履歴の隅々に至るまで、完璧にデザインされたプロフェッショナルな Web アプリを完成させてください。第6章の後半戦も、この調子で進んでいきましょう！