ウェブ開発において、クライアントサイドのスクリプトでページの情報を取得する必要がある場面は数多くあります。本記事では、JavaScriptを使用して現在のページのタイトルを取得する方法に焦点を当てます。シンプルな方法から少し発展的なものまで、さまざまなアプローチを紹介します。
document.titleプロパティを使用する
最も基本的な方法は、document.titleプロパティを使用することです。このプロパティは現在のページのタイトルを提供します。
var pageTitle = document.title; console.log(pageTitle);
この単純なコードで、簡潔にして即座にタイトルを取得できます。
getElementsByTagNameメソッドを活用する
次に、getElementsByTagNameメソッドを使用して<title>要素を取得し、その後innerTextプロパティを使用してテキストを抽出します。
var pageTitle = document.getElementsByTagName("title")[0].innerText;
console.log(pageTitle);
この方法は、タイトルが<title>要素内にある場合に有用です。
jQueryを使用する
jQueryを使うと、より簡潔なコードで同じ結果を得ることができます。
var pageTitle = $("title").text();
console.log(pageTitle);
jQueryを導入している場合、この方法は手軽で読みやすいです。
特に制約がない場合は、jQueryを導入することも検討してみてください。
よくある質問（FAQ）
Q. JavaScriptでページタイトルを取得するには？
A. document.titleで取得できます。変更するにもdocument.title = “新しいタイトル”と代入するだけです。SPAで動的にタイトルを変更する際によく使われます。
Q. ページのメタデータ（description等）をJavaScriptで取得するには？
A. document.querySelector(“meta[name=description]”).contentで取得できます。OGPタグなら”meta[property=og:description]”で取得してください。
Q. ブラウザのタブに表示されているFaviconをJavaScriptで変更するには？
A. link[rel=”icon”]要素のhrefを変更します。例：document.querySelector(“link[rel=icon]”).href = “/new-favicon.ico”。動的なNotification表示などに活用できます。
まとめ
いずれの方法も、ページのタイトルを効果的に取得するための手段として活用できます。プロジェクトの要件や好みに合わせて最適な方法を選び、スクリプトを実装してみてください。これらのテクニックを使えば、ウェブ開発のさまざまな場面で便利に活用できるでしょう。