Reactでオブジェクトが表示できない｜JSONの扱い方

みなさん、こんなエラーに遭遇したことありませんか？

「Objects are not valid as a React child」「Reactでオブジェクトを表示したいのに、エラーが出る」「APIから取得したデータが画面に表示されない」

このエラーはReact初心者がよく遭遇する問題の一つです。でも、理由が分かればとても簡単に解決できるんです。

この記事では、Reactでオブジェクトが表示できない理由と、正しい表示方法を詳しく解説します。 APIから取得したデータを表示する際の注意点も含めて、実践的な対処法をお伝えしますね。

読み終わる頃には、オブジェクト表示のエラーに悩まされることがなくなるはずです！

どうしてReactでオブジェクトが表示できないの？

Reactでオブジェクトを直接表示しようとするとエラーが発生します。これはReactの仕様によるものなんです。

エラーが発生する具体例

以下のコードを見てください。

// ❌ エラーが発生するコード
function App() {
  const user = { name: "田中太郎", age: 25 };
  return <div>{user}</div>; // Objects are not valid as a React child
}

このコードを実行すると「Objects are not valid as a React child」エラーが発生します。

なぜこうなるのでしょうか？実は、Reactには表示できるデータの種類に制限があるんです。

エラーの原因

Reactは以下のような値しか直接表示できません。

文字列（string）
数値（number）
真偽値（boolean）
null
undefined

オブジェクトや配列は直接表示できません。これがエラーの根本的な原因です。

つまり、{user}という書き方は、オブジェクト全体をそのまま表示しようとしているため、Reactが「これは表示できません」と言っているんですね。

正しいオブジェクト表示方法

オブジェクトを適切に表示するには、いくつかの方法があります。

個別のプロパティを表示する

最も基本的な方法は、オブジェクトの個別のプロパティを表示することです。

// ✅ 正しい方法
function App() {
  const user = { name: "田中太郎", age: 25 };
  return (
    <div>
      <p>名前: {user.name}</p>
      <p>年齢: {user.age}歳</p>
    </div>
  );
}

この方法の仕組みを説明しますね。

user.nameは文字列の「田中太郎」を返します。 user.ageは数値の25を返します。

文字列や数値はReactが表示できるデータ型なので、問題なく表示されます。オブジェクト全体ではなく、その中の個別の値にアクセスするのがポイントです。

JSON.stringify()を使用する

デバッグ目的なら、JSON.stringify()を使ってオブジェクトを文字列に変換できます。

// ✅ デバッグ用の方法
function App() {
  const user = { name: "田中太郎", age: 25 };
  return <div>{JSON.stringify(user)}</div>;
}

JSON.stringify(user)は、オブジェクトを文字列に変換します。上記の例では、{"name":"田中太郎","age":25}という文字列になります。

文字列になったので、Reactは問題なく表示できます。ただし、この方法は見た目が良くないので、本番環境では使わないことをおすすめします。

開発中にデータの中身を確認したい時には便利ですね。

Object.entries()で動的表示

オブジェクトの内容を動的に表示したい場合は、Object.entries()が便利です。

// ✅ 動的表示の方法
function App() {
  const user = { name: "田中太郎", age: 25, city: "東京" };
  
  return (
    <div>
      {Object.entries(user).map(([key, value]) => (
        <p key={key}>{key}: {value}</p>
      ))}
    </div>
  );
}

Object.entries()の仕組みを詳しく説明しますね。

Object.entries(user)は、オブジェクトを配列に変換します。具体的には、[["name", "田中太郎"], ["age", 25], ["city", "東京"]]という形になります。

.map()で各ペアを処理して、<p>要素を作成しています。 [key, value]の分割代入で、キーと値を取り出しています。

この方法なら、オブジェクトのプロパティが変わっても自動的に対応できます。とても便利ですね。

APIデータの適切な表示方法

実際の開発では、APIから取得したデータを表示することが多いです。

基本的なAPIデータ表示

以下のようなJSONデータを表示する場合を考えてみましょう。

// ✅ API データの表示例
function UserProfile() {
  const userData = {
    id: 1,
    name: "田中太郎",
    email: "tanaka@example.com",
    profile: {
      age: 25,
      city: "東京",
      hobby: "プログラミング"
    }
  };
  
  return (
    <div>
      <h2>{userData.name}</h2>
      <p>メール: {userData.email}</p>
      <p>年齢: {userData.profile.age}歳</p>
      <p>住所: {userData.profile.city}</p>
      <p>趣味: {userData.profile.hobby}</p>
    </div>
  );
}

この例では、ネストしたオブジェクトを扱っています。

userData.profileもオブジェクトですが、userData.profile.ageのように最終的には文字列や数値にアクセスしています。

ネストしたオブジェクトでも、個別のプロパティを指定すれば表示できます。ドット記法を使って、深い階層にもアクセスできるんです。

配列を含むオブジェクト

オブジェクトに配列が含まれている場合の表示方法も確認しましょう。

// ✅ 配列を含むオブジェクトの表示
function SkillsList() {
  const developer = {
    name: "山田花子",
    skills: ["React", "JavaScript", "TypeScript", "Node.js"]
  };
  
  return (
    <div>
      <h2>{developer.name}のスキル</h2>
      <ul>
        {developer.skills.map((skill, index) => (
          <li key={index}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}

配列の処理方法を説明しますね。

developer.skillsは配列です。配列もオブジェクトと同様に、直接表示はできません。

そこで、.map()メソッドを使って、各要素を個別に表示しています。 skillは文字列なので、{skill}として問題なく表示できます。

key={index}は、Reactが効率的にレンダリングするために必要です。配列をマップする時は、必ずkeyを指定しましょう。

便利なユーティリティ関数

オブジェクトの表示を簡単にするユーティリティ関数を作ることもできます。

カスタム表示コンポーネント

// ✅ 再利用可能なコンポーネント
function ObjectDisplay({ obj, title }) {
  return (
    <div>
      <h3>{title}</h3>
      <ul>
        {Object.entries(obj).map(([key, value]) => (
          <li key={key}>
            <strong>{key}:</strong> {typeof value === 'object' ? JSON.stringify(value) : value}
          </li>
        ))}
      </ul>
    </div>
  );
}

// 使用例
function App() {
  const user = { name: "佐藤次郎", age: 30, city: "大阪" };
  return <ObjectDisplay obj={user} title="ユーザー情報" />;
}

このコンポーネントの仕組みを詳しく説明しますね。

ObjectDisplayは再利用可能なコンポーネントです。どんなオブジェクトでも、見やすく表示できます。

typeof value === 'object'で、値がオブジェクトかどうかをチェックしています。オブジェクトの場合はJSON.stringify()で文字列に変換し、そうでなければそのまま表示します。

これで、ネストしたオブジェクトがあっても安全に表示できます。一度作れば、様々な場所で使い回せて便利ですね。

よくある間違いと対処法

Reactでオブジェクトを扱う際のよくある間違いを確認しましょう。

間違い1：条件付きレンダリングでのエラー

// ❌ 間違ったコード
function UserInfo({ user }) {
  return <div>{user && user}</div>; // エラー発生
}

// ✅ 正しいコード
function UserInfo({ user }) {
  return <div>{user && user.name}</div>; // プロパティを指定
}

この間違いについて説明しますね。

user && userでは、userが存在する場合にオブジェクト全体を表示しようとしています。これはオブジェクトの直接表示なので、エラーになります。

user && user.nameでは、userが存在する場合に名前を表示しています。 user.nameは文字列なので、問題なく表示できます。

条件付きレンダリングでも、オブジェクト自体ではなくプロパティを表示しましょう。

間違い2：APIレスポンスの直接表示

// ❌ 間違ったコード
function ApiData() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return <div>{data}</div>; // エラー発生
}

// ✅ 正しいコード
function ApiData() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return <div>{data && data.message}</div>; // プロパティを指定
}

APIデータの扱い方を説明しますね。

APIから取得したデータは、通常オブジェクト形式です。 {data}のように直接表示しようとすると、エラーになります。

{data && data.message}では、まずdataが存在するかチェックして、存在する場合にmessageプロパティを表示しています。

APIから取得したデータも、必要なプロパティを指定して表示しましょう。エラーを防ぐために、存在チェックも忘れずに。

エラーの見つけ方とデバッグ

オブジェクト表示エラーを素早く見つけるコツをお伝えします。

エラーメッセージの読み方

「Objects are not valid as a React child」エラーが出たら、以下を確認してください。

JSX内で{}を使っている箇所
変数がオブジェクトになっていないか
プロパティへのアクセスが正しいか

エラーが起きたら、まずは{}で囲まれている部分を確認しましょう。そこでオブジェクト全体を表示しようとしていないかチェックしてください。

console.logでの確認

// ✅ デバッグ用コード
function DebugComponent({ data }) {
  console.log("データの型:", typeof data);
  console.log("データの中身:", data);
  
  return (
    <div>
      {/* データの内容を確認してから表示 */}
      {typeof data === 'object' ? JSON.stringify(data) : data}
    </div>
  );
}

デバッグのコツを説明しますね。

console.logで、データの型と内容を確認します。 typeof dataで型を、dataで中身を確認できます。

typeof data === 'object'で、オブジェクトかどうかをチェックしています。オブジェクトの場合はJSON.stringify()で文字列に変換して表示し、そうでなければそのまま表示します。

このように、データの型と内容を確認してから表示方法を決めましょう。エラーの原因が特定しやすくなります。

まとめ：オブジェクト表示をマスターしよう

Reactでオブジェクトを表示する際の重要なポイントをまとめます。

覚えておきたいポイント

オブジェクトは直接表示できません
個別のプロパティを指定して表示しましょう
APIデータも同じルールが適用されます
JSON.stringify()はデバッグ目的で使用しましょう

これらの方法を理解すれば、Reactでオブジェクトを適切に表示できるようになります。

実践的なアドバイス

エラーが出た時は、以下の順番で確認してみてください。

エラーメッセージを確認: 「Objects are not valid as a React child」かどうか
JSXの{}内をチェック: オブジェクトを直接表示していないか
console.logでデータ確認: どんなデータが入っているか
適切なプロパティにアクセス: 個別の値を表示する

今日から使える知識

オブジェクトのプロパティはobj.propertyでアクセス
配列はarray.map()で個別要素を処理
デバッグにはJSON.stringify()が便利
条件付きレンダリングでも個別プロパティを指定

エラーが出た時は、まずオブジェクトを直接表示していないか確認してみてください。きっと、すぐに解決できるはずです。

ぜひ実際のプロジェクトでこれらの方法を試してみてくださいね！

Reactでオブジェクトが表示できない｜JSONの扱い方

どうしてReactでオブジェクトが表示できないの？

エラーが発生する具体例

エラーの原因

正しいオブジェクト表示方法

個別のプロパティを表示する

JSON.stringify()を使用する

Object.entries()で動的表示

APIデータの適切な表示方法

基本的なAPIデータ表示

配列を含むオブジェクト

便利なユーティリティ関数

カスタム表示コンポーネント

よくある間違いと対処法

間違い1：条件付きレンダリングでのエラー

間違い2：APIレスポンスの直接表示

エラーの見つけ方とデバッグ

エラーメッセージの読み方

console.logでの確認

まとめ：オブジェクト表示をマスターしよう

覚えておきたいポイント

実践的なアドバイス

今日から使える知識

関連記事

Untitled

Untitled

Untitled