Reactでドキュメントタイトルを設定する3つの方法：useEffect Hook、React Helmet、その他

2024-04-02

Reactでドキュメントタイトルを設定する方法

document.title を直接操作する

これは最も簡単な方法ですが、コンポーネント間の状態管理が煩雑になる可能性があります。

// コンポーネント内でタイトルを設定
const MyComponent = () => {
  useEffect(() => {
    document.title = 'My Page';
  }, []);

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};

useTitle Hookは、タイトルの設定と状態管理を簡潔に記述できます。

// useTitle Hookを作成
const useTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

// コンポーネント内でuseTitle Hookを使用
const MyComponent = () => {
  const useTitle = (title) => {
    useEffect(() => {
      document.title = title;
    }, [title]);
  };

  useTitle('My Page');

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};

React Helmetは、ドキュメントタイトルだけでなく、metaタグやlinkタグなどの様々な要素を管理できるライブラリです。

// React Helmetをインストール
npm install react-helmet

// コンポーネント内でReact Helmetを使用
const MyComponent = () => {
  return (
    <div>
      <Helmet>
        <title>My Page</title>
      </Helmet>
      <h1>My Page</h1>
    </div>
  );
};

これらの方法のいずれを使用しても、Reactでドキュメントタイトルを簡単に設定することができます。

補足

上記の例では、タイトルを文字列として直接設定していますが、変数や関数の値を動的に設定することも可能です。
アンマウント時に元のタイトルに戻したい場合は、useEffect Hookのクリーンアップ関数内でdocument.titleを元に戻すように記述する必要があります。

document.title を直接操作する

// コンポーネント内でタイトルを設定
const MyComponent = () => {
  useEffect(() => {
    document.title = 'My Page';
  }, []);

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};

useTitle Hookを使う

// useTitle Hookを作成
const useTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

// コンポーネント内でuseTitle Hookを使用
const MyComponent = () => {
  useTitle('My Page');

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};

React Helmetを使う

// React Helmetをインストール
npm install react-helmet

// コンポーネント内でReact Helmetを使用
const MyComponent = () => {
  return (
    <div>
      <Helmet>
        <title>My Page</title>
      </Helmet>
      <h1>My Page</h1>
    </div>
  );
};

ドキュメントタイトルを設定するその他の方法

これは document.title を直接操作する方法とほぼ同じですが、window オブジェクト経由でアクセスします。

// コンポーネント内でタイトルを設定
const MyComponent = () => {
  useEffect(() => {
    window.document.title = 'My Page';
  }, []);

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};

document.head.getElementsByTagName('title')[0] を操作する

この方法は、document.head 要素から title 要素を取得して、その内容を変更します。

// コンポーネント内でタイトルを設定
const MyComponent = () => {
  useEffect(() => {
    const titleElement = document.head.getElementsByTagName('title')[0];
    titleElement.textContent = 'My Page';
  }, []);

  return (
    <div>
      <h1>My Page</h1>
    </div>
  );
};