Cannot read properties of undefined原因7つ

「Cannot read properties of undefined」とは、値が undefined のものに対して、プロパティ（.name や [0] など）を読み取ろうとしたときに出る JavaScript の TypeError です。 エラー文の末尾にある (reading 'xxx') の xxx が「読もうとしたプロパティ名」で、undefined になっているのは、その1つ手前（左側）の値です。ここを押さえるだけで、原因の場所をすばやく絞り込めます。

この記事では、原因を7つのパターンに分け、それぞれ「エラーが出るコード・コンソールの表示・直したコード」を対にして並べました。あわせて、?.（オプショナルチェーン）と ??（Null合体演算子）の使いどころ、null の場合や is not a function・is not defined との違い、ブラウザごとのメッセージの違いを表にまとめています。掲載したエラー文は、Chromium 141.0.7390.37（Playwright 1.56.0 経由）と Node.js 22.22.2 で実際に実行して取得したものです。Firefox と Safari では実行していないため、その2つは MDN のエラーリファレンスに載っている表記を引用しています。

原因7パターンの早見表

エラー文の読み方は次のとおりです。

Uncaught TypeError: Cannot read properties of undefined (reading 'city')
                                              ~~~~~~~~~           ~~~~
                                              手前の値が undefined   読もうとした名前

user.adress.city でこのエラーが出たなら、city の手前、つまり user.adress が undefined です。なお、Chrome のコンソールでは、捕まえられなかったエラーの先頭に Uncaught が、Promise の中で起きた場合は Uncaught (in promise) が付きます（この接頭辞は一般に知られた表示で、今回の自動実行ではメッセージ本体のみを取得しています）。

原因1：プロパティ名のタイプミス

存在しないプロパティを読むと、JavaScript はエラーにせず undefined を返します。その undefined に対して、さらにプロパティを読もうとした時点でエラーになります。

エラーになるコード

const user = { name: 'Sato', address: { city: 'Tokyo' } };
console.log(user.adress.city); // address の d が1つ足りない

TypeError: Cannot read properties of undefined (reading 'city')

直したコード

const user = { name: 'Sato', address: { city: 'Tokyo' } };
console.log(user.address.city);

Tokyo

見つけ方

(reading 'city') の手前にある user.adress を、そのまま console.log で出力します。undefined と表示されたら、次に console.log(user) で親のオブジェクトを確認し、正しいプロパティ名を探します。

console.log(user.adress); // undefined
console.log(user);        // { name: 'Sato', address: { city: 'Tokyo' } }

API のレスポンスで user_name（スネークケース）と userName（キャメルケース）を取り違える、というのも同じパターンです。

原因2：DOMの読み込み前に要素を取得している

HTML は上から順に読み込まれます。head の中に書いたスクリプトは、body の要素がまだ作られていない時点で実行されるため、要素を取得できません。

エラーになるコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script>
    const btn = document.getElementsByClassName('btn')[0];
    console.log(btn);
    btn.textContent = '送信';
  </script>
</head>
<body>
  <button class="btn">x</button>
</body>
</html>

undefined
TypeError: Cannot set properties of undefined (setting 'textContent')

getElementsByClassName は、見つからないとき空のコレクションを返します。その [0] は undefined です。値を代入しようとしたので、メッセージは Cannot set properties of undefined (setting 'textContent') になりました。読み取りなら Cannot read properties … になります。

同じコードを document.querySelector('.btn') で書くと、見つからないときの戻り値が null になり、メッセージも変わります。

null
TypeError: Cannot set properties of null (setting 'textContent')

直したコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const btn = document.getElementsByClassName('btn')[0];
      btn.textContent = '送信';
      console.log(btn.textContent);
    });
  </script>
</head>
<body>
  <button class="btn">x</button>
</body>
</html>

送信

直し方は3つあり、どれも「要素ができてから実行する」という考え方です。

読み込み順が正しくても、セレクタのつづり違いや、そのページに存在しない要素を共通のスクリプトで操作している場合は同じエラーになります。そのときは「要素があるときだけ処理する」形にします。

const sidebar = document.querySelector('.sidebar');
if (sidebar) {
  sidebar.classList.add('is-ready');
}

原因3：fetchの結果を待っていない

fetch() が返すのはデータではなく Promise（結果があとで届くことを表すオブジェクト） です。await を付けずに使うと、Promise そのもののプロパティを読むことになります。

エラーになるコード（その1：fetchにawaitがない）

const res = fetch('/api/user');
console.log(res);
console.log(res.data.name);

Promise
TypeError: Cannot read properties of undefined (reading 'name')

res は Promise で、data というプロパティを持ちません。res.data が undefined になり、その .name でエラーになりました。

エラーになるコード（その2：res.json()にawaitがない）

(async () => {
  const res = await fetch('/api/user');
  const data = res.json();       // await が抜けている
  console.log(data);
  console.log(data.name);
  console.log(data.name.length);
})();

Promise
undefined
TypeError: Cannot read properties of undefined (reading 'length')

res.json() も Promise を返します。data.name は undefined と表示されるだけで止まらず、次の .length で初めてエラーになるため、原因の行と止まる行がずれて見えます。

エラーになるコード（その3：thenの外で使う）

let user;
fetch('/api/user')
  .then((r) => r.json())
  .then((d) => { user = d; });
console.log(user.name); // この行は then の中身より先に実行される

TypeError: Cannot read properties of undefined (reading 'name')

直したコード

(async () => {
  const res = await fetch('/api/user');
  const data = await res.json();
  console.log(data.name.length);
})();

4

（/api/user は {"id":1,"name":"Sato"} を返すようにして確かめました。）fetch() と res.json() の両方に await を付ける、そしてデータを使う処理は await のあと（または then の中）に書く、の2点がポイントです。

原因4：配列の範囲外・見つからない要素

配列に存在しない位置を指定しても、エラーにはならず undefined が返ります。

エラーになるコード（その1：ループ条件）

const items = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i].name);
}

A
B
C
TypeError: Cannot read properties of undefined (reading 'name')

要素は3つ（位置は 0〜2）ですが、条件が <= なので items[3] まで読みにいっています。3件表示されたあとで止まるのが、このパターンの見分け方です。

エラーになるコード（その2：findで見つからない）

const items = [{ id: 1, name: 'A' }];
const hit = items.find((x) => x.id === 9);
console.log(hit);
console.log(hit.name);

undefined
TypeError: Cannot read properties of undefined (reading 'name')

find() は、条件に合う要素がないとき undefined を返します。空の配列に対する list[0].name も同じエラーになりました。

直したコード

const items = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];

// 1) 条件を < にする
for (let i = 0; i < items.length; i++) {
  console.log(items[i].name);
}

// 2) 位置を自分で数えない書き方にする
for (const item of items) {
  console.log(item.name);
}

// 3) 見つからない場合の分岐を書く
const hit = items.find((x) => x.name === 'Z');
if (hit) {
  console.log(hit.name);
} else {
  console.log('見つかりませんでした');
}

for...of や forEach を使うと、位置の数え間違いそのものがなくなります。

配列そのものが undefined の場合は、メッセージの reading の部分がメソッド名になります。

(reading 'map') と出たら、「map が無い」のではなく「map を呼ぼうとした配列が undefined」と読みます。

原因5：thisの取り違え

this は「どう呼び出したか」で中身が変わります。メソッドをオブジェクトから切り離して呼ぶと、this が undefined になります。

エラーになるコード（その1：メソッドを変数に入れて呼ぶ）

class Counter {
  constructor() { this.state = { count: 0 }; }
  show() { console.log(this.state.count); }
}
const c = new Counter();
const f = c.show;
f();

TypeError: Cannot read properties of undefined (reading 'state')

クラスの中は自動的に厳格モード（strict mode）になるため、切り離して呼ぶと this は undefined です。(reading 'state') と出ているので、state の手前の this が undefined だとわかります。イベントリスナーに c.show をそのまま渡したときも、同じ理由で this が変わります。

エラーになるコード（その2：コールバックにfunctionを使う）

const timer = {
  state: { sec: 3 },
  start() {
    setTimeout(function () {
      console.log(this.state.sec);
    }, 10);
  },
};
timer.start();

TypeError: Cannot read properties of undefined (reading 'sec')

こちらは (reading 'sec') です。厳格モードではない通常のスクリプトでは、function で書いたコールバックの this は window になります。window.state が undefined なので、1つ先の .sec でエラーになりました。

エラーになるコード（その3：mapの中のfunction）

'use strict';
const cart = {
  rate: { tax: 0.1 },
  prices: [100, 200],
  calc() {
    return this.prices.map(function (p) {
      return p * (1 + this.rate.tax);
    });
  },
};
cart.calc();

TypeError: Cannot read properties of undefined (reading 'rate')

直したコード

class Counter {
  constructor() { this.state = { count: 0 }; }
  show() { console.log(this.state.count); }
}
const c = new Counter();
const f = c.show.bind(c); // this を c に固定する
f();

const timer = {
  state: { sec: 3 },
  start() {
    setTimeout(() => {      // アロー関数は外側の this をそのまま使う
      console.log(this.state.sec);
    }, 10);
  },
};
timer.start();

0
3

原因6：APIレスポンスの欠損

サーバーから届くデータは、項目が省略されていたり、null が入っていたりすることがあります。「あるはず」と決めて深い階層まで読むと、その途中で止まります。

エラーになるコード

(async () => {
  const res = await fetch('/api/user'); // {"id":1,"name":"Sato"} が返る
  const user = await res.json();
  console.log(user.profile.avatar);
})();

TypeError: Cannot read properties of undefined (reading 'avatar')

レスポンスが {"id":2,"name":"Suzuki","profile":null} のように null を含む場合は、メッセージが of null に変わりました。

TypeError: Cannot read properties of null (reading 'avatar')

直したコード

(async () => {
  const res = await fetch('/api/user');
  const user = await res.json();
  console.log(user.profile?.avatar);
  console.log(user.profile?.avatar ?? 'default.png');
  console.log(user.tags?.[0]);
  console.log(user.greet?.());
})();

undefined
default.png
undefined
undefined

?. は、左側が null か undefined のときに、そこで読み取りをやめて undefined を返す演算子です。?? と組み合わせると、値が無いときの既定値まで1行で書けます。詳しい使い分けは次の章で扱います。

原因7：引数の渡し忘れ

引数を渡さずに関数を呼ぶと、その引数は undefined になります。

エラーになるコード

function showTitle(article) {
  return article.title.toUpperCase();
}
showTitle(); // 引数がない

TypeError: Cannot read properties of undefined (reading 'title')

引数を分割代入で受け取る形だと、メッセージが少し変わります。

function show({ title }) {
  return title;
}
show();

TypeError: Cannot destructure property 'title' of 'undefined' as it is undefined.

直したコード

function showTitle(article = {}) {
  return (article.title ?? '(無題)').toUpperCase();
}
console.log(showTitle());
console.log(showTitle({ title: 'hello' }));

function show({ title = '(無題)' } = {}) {
  return title;
}
console.log(show());

(無題)
HELLO
(無題)

デフォルト引数（article = {}）が働くのは、引数が undefined のときだけです。 null を渡した場合は既定値に置き換わらず、次のメッセージになりました。

Cannot read properties of null (reading 'title')

null が渡される可能性がある関数では、関数の先頭で if (article == null) return '(無題)'; のように早めに返す形が読みやすくなります。配列の map や forEach のコールバックで、引数の順番（値、位置、配列）を取り違えた場合も、このパターンに含まれます。

?.と??の使いどころ

?.（オプショナルチェーン）

?. は、そこから右の読み取りをまとめて打ち切ります。 o.a?.b.c.d は、o.a が undefined なら .b.c.d を一切評価せず undefined になりました。ただし、かっこで区切ると打ち切りの範囲が変わります。

const o = {};
o.a?.b.c.d;      // エラーにならない（undefined）
(o.a?.b).c;      // TypeError: Cannot read properties of undefined (reading 'c')

また、?. を付ける位置にも注意が必要です。o?.a.b は「o が無い場合」しか守らないため、o.a が undefined なら (reading 'b') のエラーになりました。undefined になり得る値のすぐ右に付けるのが正しい位置です。

??（Null合体演算子）と || の違い

?? は、左側が null か undefined のときだけ右側の値を使います。|| は、0 や空文字も「値がない」とみなします。

const cfg = { retry: 0, label: '' };
console.log(cfg.retry || 3, cfg.retry ?? 3);
console.log(cfg.label || '名称未設定', cfg.label ?? '名称未設定');
console.log(cfg.timeout ?? 1000);

3 0
名称未設定 （空文字）
1000

「0 回」「空欄」も正しい値として扱いたいときは ?? を選びます。

?.を使う場面・使わない場面

?. は便利ですが、どこにでも付けると「本来あるはずの値が無い」という不具合に気づきにくくなります。

なお、?. は「宣言されていない変数」には効きません。undeclared?.name は ReferenceError: undeclared is not defined になりました。

似たエラーとの違い早見表

どれも「値が期待と違う」ときのエラーですが、メッセージの形で原因の種類を見分けられます。 右端のメッセージは、すべて今回 Chromium 141 で取得したものです。

undefinedとnullの違い

u == null は undefined と null の両方で true になることを確かめました。両方まとめて判定したいときに使える書き方です。

is not a functionになる場合

Cannot read properties … は「手前が undefined」、is not a function は「手前はあるが、呼ぼうとしたものが関数ではない」という違いです。

is not definedになる場合

is not defined は、変数名そのものがどこにも宣言されていないときの ReferenceError です。「変数はあるが中身が undefined」の場合とは別のエラーです。

変数名のタイプミス、スクリプトの読み込み順（ライブラリより先に自分のコードが動いている）、スコープの外から参照している、の3つが主な原因です。

ブラウザごとのメッセージの違い

同じエラーでも、ブラウザ（JavaScript エンジン）によって文面が異なります。検索するときは、自分のブラウザの文面で調べると情報にたどり着きやすくなります。

• V8 の列のうち、1行目は今回 Chromium 141 と Node.js 22.22.2 で実際に取得した文面です（どちらも同じ文面でした）。
• Firefox と Safari の列、および2〜3行目の表記は、MDN のエラーリファレンス（「TypeError: "x" is (not) "y"」「TypeError: "x" is not a function」「ReferenceError: "x" is not defined」の各ページ）の Message 欄に載っている表記です。今回この3ページを開いて確認しましたが、Firefox と Safari での実行は行っていません（未実行）。ブラウザのバージョンによって文面が変わることがあります。
• Edge は Chrome と同じ V8 を使うため同じ文面になるとされていますが、Edge での実行は行っていません（未実行）。

以前の Chrome では Cannot read property 'x' of undefined という文面でした。この形で検索して見つかった情報も、内容は同じエラーについてのものです（この旧表記は一般に知られたもので、今回は実行していません）。

原因を見つける手順

エラーが出たら、次の順に確認すると短い時間で原因にたどり着けます。

flowchart TD
  A[エラー文を読む] --> B["reading 'xxx' の xxx を確認"]
  B --> C[コンソールの行番号をクリックして該当行へ]
  C --> D[xxx の手前の値を console.log で出力]
  D --> E{undefined の理由は}
  E -->|つづり違い| F[原因1]
  E -->|要素がまだ無い| G[原因2]
  E -->|Promise が出力された| H[原因3]
  E -->|配列の位置| I[原因4]
  E -->|this が undefined| J[原因5]
  E -->|データに項目が無い| K[原因6]
  E -->|引数が無い| L[原因7]

スタックトレースを読む

エラーには「どの関数から呼ばれて、どの行で止まったか」の記録（スタックトレース）が付いています。

function a() { const user = {}; return user.profile.name; }
function bfn() { return a(); }
try { bfn(); } catch (e) { console.log(e.stack); }

TypeError: Cannot read properties of undefined (reading 'name')
    at a (http://t.test/:3:50)
    at bfn (http://t.test/:3:81)
    at http://t.test/:3:92

いちばん上の行が、実際に止まった場所です。:3:50 は「3行目の50文字目」を表します。上から順に、自分が書いたファイルの行を探していきます（URL は検証用のものです）。

確認用チェックリスト

• [ ] (reading 'xxx') の手前の値を console.log で出力したか
• [ ] 出力が Promise になっていないか（await の付け忘れ）
• [ ] 出力が null なら、要素の取得（セレクタ・読み込み順）を確認したか
• [ ] ループの条件は < になっているか
• [ ] コールバックの中で this を使っていないか
• [ ] API のレスポンスを開発者ツールの Network タブで確認したか
• [ ] 関数の呼び出し側で、引数を渡しているか

よくある質問

Q. 「Cannot read properties of undefined (reading 'map')」は、mapが使えないという意味ですか？ A. いいえ。「map を呼ぼうとした手前の値が undefined」という意味です。data.items.map(…) なら data.items が undefined です。データがまだ届いていない（原因3）か、項目名が違う（原因1・6）ことが多いので、console.log(data) で中身を確認してください。初期値を空の配列にしておく、data.items?.map(…) ?? [] と書く、といった方法で対処できます。

Q. とりあえず全部に ?. を付ければ解決しますか？ A. エラーは出なくなりますが、原因がそのまま残ることがあります。省略可能な項目や、ページによって存在しない要素には ?. が向いています。必ず存在するはずの値には付けず、エラーで気づけるようにしておくのがおすすめです。

Q. 「of undefined」と「of null」で対処は変わりますか？ A. 調べる場所が変わります。null は querySelector() や getElementById() で要素が見つからなかったとき、または JSON に null が入っていたときに多く、undefined は存在しないプロパティ・配列の範囲外・引数の渡し忘れで多く出ます。?. はどちらにも効きますが、デフォルト引数は undefined のときだけ働きます。

Q. try...catchで囲めばよいですか？ A. 外部から届くデータの解析など、止まると困る処理を守る用途には向いています。ただ、このエラーの多くはコードの見直しで直せるものです。まずは7つのパターンのどれに当たるかを確認し、原因そのものを直すのが近道です。

まとめ

• 「Cannot read properties of undefined (reading 'x')」は、x の手前の値が undefined という意味
• 原因は7パターン：タイプミス、DOM 読み込み前、fetch の待ち忘れ、配列の範囲外、this の取り違え、API レスポンスの欠損、引数の渡し忘れ
• 手前の値を console.log で出力するのが最初の一手。Promise と出たら await、null と出たら要素の取得を確認する
• ?. は「無くてもよい値」に使い、?? で既定値を決める。0 や空文字を残したいときは || ではなく ??
• of null は要素が見つからないとき、is not a function は呼んだものが関数でないとき、is not defined は変数が宣言されていないとき
• ブラウザによって文面が違うので、Firefox や Safari の表記も知っておくと調べやすい

株式会社RJCでは、JavaScriptのエラーの読み方や原因の調べ方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。