---
type: errors
language: javascript
slug: cannot-read-properties-of-undefined
title: "TypeError: Cannot read properties of undefined (reading 'x')"
title_tag: "Cannot read properties of undefined の原因と直し方"
summary: >
  undefined のプロパティを読もうとしたときに出ます。
  原因を多い順に並べ、それぞれ直したコードを載せています。スタックトレースのどこを見るかも書いています。
description: >
  undefined のプロパティを読もうとしたときに出ます。どこで undefined になったかの追い方と、オプショナルチェーンで隠すべきでない場面を、実行できる例で示します。
status: published
difficulty: 2
minutes: 9

versions:
  verified: "Node 22.22.3"
  since: null
  deprecated: null
  removed: null

sources:
  - title: "GetV — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-getv"
  - title: "Optional chaining (?.) — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining"
  - title: "TypeError: can't access property \"x\" of undefined — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_type"

terms: [undefined, プロパティ, オプショナルチェーン, スタックトレース]

links:
  related:
    - javascript/reference/array/filter
    - javascript/reference/array/find
    - javascript/errors/is-not-a-function
    - javascript/errors/unexpected-token
    - javascript/why/this-binding
    - javascript/errors/is-not-defined
    - javascript/learn/object/nested
    - javascript/why/typeof-null
    - javascript/errors/cannot-convert-undefined-or-null

content_updated_at: 2026-09-07
published_at: 2026-09-07
---

`undefined` の[key:プロパティを読もうとした]ときに出ます。
`x` の部分には、読もうとしたプロパティ名が入ります。

```js bad
const user = undefined;

console.log(user.name);
```
```output
TypeError: Cannot read properties of undefined (reading 'name')
```

**`user.name` が undefined なのではありません。`user` そのものが undefined です。**
ここを取り違えると、直す場所を間違えます。

## まずスタックトレースを見る

```
TypeError: Cannot read properties of undefined (reading 'name')
    at showName (file:///app/example.mjs:7:15)
    at file:///app/example.mjs:10:13
    at ModuleJob.run (node:internal/modules/esm/module_job:343:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:681:26)
```

見るのは[key:上から2行目]、つまり `at` で始まる最初の行です。
`example.mjs` の[num:7]行[num:15]文字目で起きた、と書いてあります。

| 行 | 見るか | 何が書いてあるか |
|---|---|---|
| 1行目 | [em:見る] | どのプロパティを読もうとしたか（`reading 'name'`） |
| 2行目 | [em:いちばん見る] | [key:自分のコードのどこで起きたか] |
| 3行目以降 | 見る | そこを呼んだのは誰か（呼び出しの道すじ） |
| `node:internal/` を含む行 | [bad:無視してよい] | 処理系の内部。原因はここにない |

`node_modules/` や `node:internal/` しか出ていないときは、
[key:その1つ下の自分のコードの行]まで下がって探します。

## 原因1: 探したものが見つからなかった（いちばん多い）

`find()` は[bad:見つからないと undefined を返します]。例外は投げません。

```js bad
const users = [{ id: 1, name: 'あかり' }];

const user = users.find(u => u.id === 2);

console.log(user.name);
```
```output
TypeError: Cannot read properties of undefined (reading 'name')
```

`id: 2` の人はいないので `user` は `undefined` です。

### 直しかた

**見つからなかったときにどうするかを、その場で決めます。**

```js run
const users = [{ id: 1, name: 'あかり' }];

const user = users.find(u => u.id === 2);

if (!user) {
  console.log('該当する利用者がいません');
} else {
  console.log(user.name);
}
```
```output
該当する利用者がいません
```

「あるなら読む、無いなら undefined でよい」なら[type:オプショナルチェーン]が短く書けます。

```js run
const users = [{ id: 1, name: 'あかり' }];

const user = users.find(u => u.id === 2);

console.log(user?.name);
console.log(user?.name ?? '（未登録）');
```
```output
undefined
（未登録）
```

`?.` は[key:左が null か undefined なら、そこで止まって undefined を返します]。
[bad:何でも `?.` を付ければよいわけではありません]。
「無いことが正常」な場所にだけ使ってください。**本来あるはずのものが無いなら、それは不具合です。**

## 原因2: 途中の階層が無い

深いところを一気に辿ると、どこで切れたか分からなくなります。

```js bad
const res = { data: {} };

console.log(res.data.user.name);
```
```output
TypeError: Cannot read properties of undefined (reading 'name')
```

`res.data` はあります。無いのは `res.data.user` です。
エラー文の `reading 'name'` は[key:読もうとしたもの]なので、
[bad:その1つ手前]が undefined だと分かります。

### 直しかた

```js run
const res = { data: {} };

console.log(res.data?.user?.name ?? '(なし)');
```
```output
(なし)
```

どこで切れたかを調べたいときは、手前から順に出します。

```js run
const res = { data: {} };

console.log(res);
console.log(res.data);
console.log(res.data.user);
```
```output
{ data: {} }
{}
undefined
```

## 原因3: 関数が何も返していない

`return` を書き忘れると、その関数は `undefined` を返します。[key:エラーにはなりません]。

```js bad
function makeUser(name) {
  const user = { name };
}

const user = makeUser('あかり');

console.log(user.name);
```
```output
TypeError: Cannot read properties of undefined (reading 'name')
```

### 直しかた

```js run
function makeUser(name) {
  return { name };
}

console.log(makeUser('あかり').name);
```
```output
あかり
```

アロー関数で `{}` を書いたときも同じです。`n => { n * 2 }` は `undefined` を返します。

## 原因4: 待つ前に触った

`await` を書き忘れると、まだ結果ではなく [type:Promise] が入っています。
`Promise` に `name` は無いので `undefined` になり、その先で落ちます。

```js bad
async function fetchUser() {
  return { profile: { name: 'あかり' } };
}

const user = fetchUser();

console.log(user.profile.name);
```
```output
TypeError: Cannot read properties of undefined (reading 'name')
```

`user` は `Promise` です。`user.profile` が `undefined` になり、その `.name` で落ちます。

### 直しかた

```js run
async function fetchUser() {
  return { profile: { name: 'あかり' } };
}

const user = await fetchUser();

console.log(user.profile.name);
```
```output
あかり
```

[dim:このページの実行環境では、コードの一番外側でも await が書けます。]

## 似ているエラーとの違い

### null のとき

`null` だと[key:文言が変わります]。**別の原因**なので読み分けてください。

```js bad
const el = null;

console.log(el.value);
```
```output
TypeError: Cannot read properties of null (reading 'value')
```

`null` は「無いことが分かっている」印です。ブラウザで
`document.querySelector()` が見つけられなかったときは `null` が返ります。

| 文言 | 中身 | 典型的な原因 |
|---|---|---|
| `... of undefined` | まだ入っていない / 返ってこなかった | `find()` が空振り、`return` 忘れ、`await` 忘れ |
| `... of null` | [key:無いと分かっている] | `querySelector()` が見つけられなかった |

### 関数ではないとき

プロパティは読めたが、それが関数ではなかった場合は別のエラーです。

```js bad
const user = { name: 'あかり' };

console.log(user.getName());
```
```output
TypeError: user.getName is not a function
```

こちらは
[TypeError: x is not a function](/ja/javascript/errors/is-not-a-function/) にまとめてあります。

### 処理系によって文言が違う

同じ原因でも、書いてある文が違います。**検索するときは自分の環境の文言で調べてください。**

| 処理系 | 文言 |
|---|---|
| Node / Chrome（V8） | `Cannot read properties of undefined (reading 'name')` |
| Chrome（古い版） | `Cannot read property 'name' of undefined` |
| Firefox（SpiderMonkey） | `user is undefined` |
| Safari（JavaScriptCore） | `undefined is not an object (evaluating 'user.name')` |

[dim:このページの実行結果は Node 22.22.3 のものです。]

## 起きにくくするには

- **見つからないことがある関数を覚える。** `find()` / `at()` / `pop()` /
  `Map.get()` / `querySelector()` は、空振りすると `undefined` か `null` を返します
- **一気に辿らない。** `a.b.c.d` と書く前に、`a.b` が何かを確かめる
- **`?.` を保険として撒かない。** 無いことが正常な場所にだけ使う。
  そうしないと[bad:不具合が静かに先へ進みます]

配列から目的の要素を取り出すときの `find()` と `filter()` の違いは
[filter()](/ja/javascript/reference/array/filter/) にまとめてあります。