導入
Webサイトを訪れた際、複数のタブを開いていると、どのタブが何の内容だったか分からなくなった経験はありませんか？『Document.title』は、ブラウザのタブやブックマークに表示されるタイトルをJavaScriptから動的に変更できるAPIです。これを活用することで、ユーザーがサイトから離れていても「通知」や「状態の変化」を直感的に伝え、離脱率の低下やエンゲージメント向上に貢献できます。
基礎知識
『Document.title』は、HTMLドキュメントの ＜title＞ 要素の内容を取得・設定するためのプロパティです。通常、HTMLの初期値は静的な文字列ですが、JavaScriptで値を代入することで、ページを再読み込みすることなく即座にタブの表示を更新できます。これはSPA（シングルページアプリケーション）のルーティング制御や、非同期処理の完了通知において非常に重要な役割を果たします。
実装/解決策
実装は非常にシンプルで、window.document.title に対して新しい文字列を代入するだけです。
最も効果的な使い方は、「ユーザーが今、何をしているか」を伝えることです。例えば、メッセージが届いた時に「(1) 新着メッセージ – サイト名」のように先頭に文字を付け加えたり、処理中に「読み込み中…」と表示したりすることで、ユーザーに視覚的なフィードバックを与えます。
サンプルプログラム
以下のコードは、ボタンを押すとタブのタイトルが「未読通知」モードに切り替わる、現場でもよく使われる実装パターンです。
＜button id=”notifyBtn”＞通知を表示する＜/button＞
＜script＞
const btn = document.getElementById(‘notifyBtn’);
const originalTitle = document.title; // 元のタイトルを保存しておく
btn.addEventListener(‘click’, () =＞ {
// タイトルを動的に変更する
document.title = ‘(1) 新着メッセージがあります！’;
// 3秒後に元のタイトルに戻す（ユーザー体験の配慮）
setTimeout(() =＞ {
document.title = originalTitle;
}, 3000);
});
＜/script＞
応用・注意点
現場での開発において注意すべき点は、「ユーザーの混乱を避けること」です。あまりに頻繁にタイトルを書き換えると、ユーザーがタブを見失ったり、不快感を与えたりする可能性があります。
また、以下のポイントも意識しましょう。
・重要な情報を先頭に配置する：タブの幅が狭い場合、後ろの方は省略されます。一番伝えたい情報をタイトルの冒頭に置くのが鉄則です。
・SEOへの配慮：JavaScriptによる動的な変更は、クローラーが読み取らない場合があるため、ページの初期表示タイトルは必ずHTMLの ＜title＞ タグで正しく設定してください。
・状態の復旧：通知が終わったら、必ず元のタイトルに戻す処理を入れることで、ユーザーに「未読が残っている」という誤解を与えないようにしましょう。