【JavaScript】ページのタイトルを取得する方法｜document.title・meta情報取得・タブ通知・MutationObserver活用まで解説

// 現在のページタイトルを取得する最標準的な方法
const title = document.title;
console.log(title); // 例: "トップページ | codingls"

// <title> 要素を DOM として取得
const title = document.querySelector('title').textContent;
console.log(title);

// 旧来の書き方（IE時代の名残）
const title = document.getElementsByTagName('title')[0].innerText;
console.log(title);

// HTML: <title>  コーディング  ライフスタイル  </title>
console.log(document.title);
// → "コーディング  ライフスタイル"（先頭・末尾の空白は除去、内部空白は保持）

// HTML: <title>codingls &amp; WebDev</title>
console.log(document.title);
// → "codingls & WebDev"（HTMLエンティティは解決済みの状態で返る）

// <title> が存在しない場合
console.log(document.title); // → ""（空文字列。エラーにならない）

/**
 * ページの主要なメタ情報をオブジェクトで返す
 */
function getPageMeta() {
  const getMeta = (selector) => {
    const el = document.querySelector(selector);
    return el ? (el.getAttribute('content') ?? '') : '';
  };

  return {
    title:       document.title,
    ogTitle:     getMeta('meta[property="og:title"]'),
    ogDesc:      getMeta('meta[property="og:description"]'),
    ogImage:     getMeta('meta[property="og:image"]'),
    description: getMeta('meta[name="description"]'),
    keywords:    getMeta('meta[name="keywords"]'),
    twitterCard: getMeta('meta[name="twitter:card"]'),
  };
}

// 使用例
const meta = getPageMeta();
console.log(meta.title);       // ページタイトル
console.log(meta.ogTitle);     // OGPタイトル（SNSシェア用）
console.log(meta.description); // metaディスクリプション

function sendPageView() {
  const meta = getPageMeta();
  gtag('event', 'page_view', {
    page_title:    meta.title,
    page_location: location.href,
    content_group: meta.keywords,
  });
}

class TabNotifier {
  #originalTitle = document.title;
  #timerId = null;

  /**
   * タイトルを点滅させて通知する
   * @param {string} message  通知メッセージ（例: "(3件) 新着メッセージ"）
   * @param {number} interval ミリ秒（デフォルト 1000）
   */
  blink(message, interval = 1000) {
    this.stop(); // すでに点滅中なら一旦止める

    this.#timerId = setInterval(() => {
      document.title =
        document.title === this.#originalTitle
          ? message
          : this.#originalTitle;
    }, interval);
  }

  /** 点滅を止めてタイトルを元に戻す */
  stop() {
    if (this.#timerId !== null) {
      clearInterval(this.#timerId);
      this.#timerId = null;
    }
    document.title = this.#originalTitle;
  }

  /** 元のタイトルを更新（SPA でページ遷移後など） */
  updateBase(title) {
    this.#originalTitle = title;
    document.title = title;
  }
}

// 使用例
const notifier = new TabNotifier();

// 未読メッセージが届いたとき
function onNewMessage(count) {
  if (document.visibilityState === 'hidden') {
    notifier.blink(`(${count}件) 新着メッセージ`);
  }
}

// ユーザーがタブに戻ったら通知を止める
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    notifier.stop();
  }
});

function watchTitle(callback) {
  const titleEl = document.querySelector('title');
  if (!titleEl) return null;

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'childList' || mutation.type === 'characterData') {
        callback(document.title);
      }
    }
  });

  observer.observe(titleEl, {
    childList: true,      // テキストノードの追加・削除を検知
    characterData: true,  // テキスト内容の変化を検知
    subtree: true,        // 子孫ノードも対象
  });

  return observer; // 停止するときは observer.disconnect()
}

// 使用例
const titleObserver = watchTitle((newTitle) => {
  console.log('タイトルが変わりました:', newTitle);
  // ページビューを再送信するなどの処理
});

// 監視を止めるとき
// titleObserver.disconnect();

function watchTitleOnce(callback) {
  const observer = watchTitle((newTitle) => {
    callback(newTitle);
    observer?.disconnect();
  });
  return observer;
}

// ページパスとタイトルのマッピング
const routeTitles = {
  '/':         'トップページ | codingls',
  '/about':    'このサイトについて | codingls',
  '/articles': '記事一覧 | codingls',
};

function navigate(path, state = {}) {
  history.pushState(state, '', path);
  // ※ pushState の第2引数（title）はほぼ全ブラウザで無視されるため
  //   document.title に直接代入する
  document.title = routeTitles[path] ?? 'codingls';
}

// ブラウザの「戻る / 進む」ボタン
window.addEventListener('popstate', () => {
  document.title = routeTitles[location.pathname] ?? 'codingls';
});

// data-spa 属性付きリンクをSPAナビゲーションとして処理
document.addEventListener('click', (e) => {
  const link = e.target.closest('a[data-spa]');
  if (!link) return;
  e.preventDefault();
  navigate(link.pathname);
});

async function copyPageTitle() {
  try {
    await navigator.clipboard.writeText(document.title);
    console.log('コピーしました:', document.title);
  } catch {
    // フォールバック（Clipboard API 非対応ブラウザ）
    const input = document.createElement('input');
    input.value = document.title;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
  }
}

// <button onclick="copyPageTitle()">タイトルをコピー</button>

/**
 * "記事名 | カテゴリ | サイト名" 形式のタイトルをオブジェクト化
 */
function parsePageTitle(separator = '|') {
  const parts = document.title.split(separator).map((s) => s.trim());
  return {
    article:  parts[0] ?? '',
    category: parts[1] ?? '',
    site:     parts[2] ?? '',
    all:      parts,
  };
}

const { article, site } = parsePageTitle();
console.log(article); // "【JavaScript】ページのタイトルを取得する方法..."
console.log(site);    // "codingls"