Reactでユーザーエージェントを取得する方法

Reactでユーザーエージェントを取得する方法

Reactでユーザーエージェントを取得するには、navigator.userAgentを使用できます。
以下に、TypeScriptを使用したReactの例を示します。

import React, { useState, useEffect } from 'react';

const UserAgentComponent: React.FC = () => {
  const [userAgent, setUserAgent] = useState<string>('');

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setUserAgent(navigator.userAgent);
    } else {
      console.error('ユーザーエージェントを取得できません。
');
    }
  }, []);

  return (
    <div>
      <h1>ユーザーエージェント情報</h1>
      <p>{userAgent}</p>
    </div>
  );
};

export default UserAgentComponent;

このコードでは、useEffectフックを使用してコンポーネントのマウント時にユーザーエージェントを取得し、useStateフックを使用してその値を保存しています。
条件付きでwindowオブジェクトが存在するか確認し、存在しない場合はコンソールにエラーメッセージを表示します。