JS Cannot read properties of undefined の解決法

undefinedのプロパティにアクセスしたときのエラーです。オプショナルチェーンで安全に書けます。

🔍 どこがundefined？ 原因箇所チェッカー

JSONのデータとアクセスしたいパス（例: user.profile.name）を入力すると、パスのどこで undefined になるかを特定します。データは送信されません。

このエラーメッセージ

原因

• 値がundefinedのオブジェクトのプロパティを読もうとしている
• APIやDOMの取得結果がまだ無い
• 配列の存在しない要素にアクセスしている

❌ エラーになるコード

const user = {};
console.log(user.profile.name);

✅ 修正したコード

const user = {};
console.log(user.profile?.name);       // undefined（エラーにならない）
console.log(user.profile?.name ?? "名無し");

解決のポイント

途中の値がundefinedになり得るときはオプショナルチェーン?.を使います。user.profile?.nameならprofileが無くてもエラーにならずundefinedを返します。既定値は?? "名無し"で補えます。

メッセージの読み方

(reading 'name') の 'name' は、アクセスしようとしたプロパティ名です。つまりその手前の値が undefinedということ。user.profile.name でこの表示が出たなら、user.profile が undefined です。まずそこを疑います。

なお Cannot read property 'name' of undefined（単数形・reading 無し）は古いブラウザ／Node の表示で、原因と対処は同じです。

ケース別の直し方

1. 配列の find / map の結果

const found = users.find(u => u.id === 99); // 見つからないと undefined
console.log(found?.name ?? "該当なし");

2. fetch / API のレスポンス

const res = await fetch("/api/user");
const data = await res.json();
console.log(data.items?.[0]?.name);   // items がまだ無くても安全

3. Reactのprops・stateが初回undefined

// 取得前は user が undefined
if (!user) return <p>読み込み中…</p>;
return <p>{user.name}</p>;

4. 分割代入にデフォルト値を置く

const { name = "名無し" } = user ?? {};

原因の行を特定する手順

• エラー下のスタックトレース1行目のファイル名・行番号を開く。
• その行の . の左側を console.log して、どれが undefined か確認。
• その値がなぜ undefined になるか（未取得 / スペルミス / 配列が空）を遡る。

よくある質問