【5分で解決】JavaScript undefinedエラーの原因と対処法！初心者が陥る5つのパターン

こんにちは、とまだです。

JavaScriptを書いていて、突然「undefined」というエラーに遭遇して困ったことはありませんか？

私も初心者の頃、このundefinedに何度も悩まされました。 コンソールに「undefined」と表示されても、何が原因なのかさっぱりわからなくて。

実は、JavaScript学習者の約80%がundefinedエラーで一度は挫折を経験するそうです。

でも大丈夫。 今回は、undefinedが発生する5つの典型的なパターンと、その解決法をわかりやすくお伝えします。

この記事を読めば、もうundefinedは怖くありません。

そもそもJavaScriptのundefinedとは？郵便配達で例えてみる

undefinedを理解するには、「郵便配達」を想像してみてください。

あなたは郵便配達員です。 配達先の住所（変数名）は書いてあるのに、肝心の荷物（値）が入っていない。

これがまさにundefinedの状態なんです。

let myPackage;  // 住所は決まったけど、中身がない
console.log(myPackage); // undefined

つまり、「入れ物は用意したけど、中身を入れ忘れた」 状態。 それがundefinedです。

一方で、よく混同される「null」は、「意図的に空っぽにした」 状態。 郵便で言えば「配達済み」の空箱みたいなものですね。

なぜundefinedエラーは初心者を悩ませるのか

undefinedが厄介なのは、エラーメッセージが不親切 だからです。

たとえば、こんなエラーを見たことはありませんか？

Cannot read property 'name' of undefined

初心者の頃は「え？何が読めないの？」と混乱しますよね。

しかも、undefinedは様々な場面で発生します。 変数の宣言忘れ、関数の戻り値忘れ、オブジェクトのプロパティ参照ミス...

原因が多岐にわたるので、「どこでミスしたのか」を特定するのが難しい んです。

でも、パターンを知っていれば怖くありません。 次に、よくある5つのパターンを見ていきましょう。

パターン1：変数を宣言したけど値を入れ忘れた

最も基本的なundefinedのパターンです。

// NG例：値を入れ忘れている
let userName;
console.log(userName); // undefined

// OK例：初期値を設定する
let userName = "とまだ";
console.log(userName); // "とまだ"

解決法：必ず初期値を設定する習慣をつけましょう。

文字列なら空文字（""）、数値なら0、配列なら[]など。 初期値を入れておけば、後で困ることが減ります。

パターン2：関数が何も返していない

関数を作ったのに、return文を書き忘れるパターンです。

// NG例：returnを忘れている
function calculateTax(price) {
  const tax = price * 0.1;
  // returnがない！
}

const result = calculateTax(1000);
console.log(result); // undefined

// OK例：必ずreturnする
function calculateTax(price) {
  const tax = price * 0.1;
  return tax; // これ重要！
}

const result = calculateTax(1000);
console.log(result); // 100

解決法：関数には必ずreturn文を書く癖をつけましょう。

値を返す必要がない関数でも、明示的にreturn;と書いておくと意図が明確になります。

パターン3：オブジェクトの存在しないプロパティを参照した

これは本当によくあるミスです。 特にAPIから取得したデータを扱う時に発生しやすい。

// NG例：存在しないプロパティを参照
const user = {
  name: "とまだ",
  age: 30
};

console.log(user.email); // undefined（emailプロパティは存在しない）

// OK例：プロパティの存在を確認
if (user.email) {
  console.log(user.email);
} else {
  console.log("メールアドレスは登録されていません");
}

さらに厄介なのが、ネストしたオブジェクト の場合です。

// 危険な例
const data = {
  user: {
    profile: {
      name: "とまだ"
    }
  }
};

// もしuser.profileがundefinedだったら...
console.log(data.user.profile.email); // エラー！

解決法：オプショナルチェイニング（?.）を使いましょう。

// 安全な例
console.log(data.user?.profile?.email); // undefined（エラーにならない）

これなら途中でundefinedがあっても、エラーにならずundefinedが返ります。

パターン4：配列の範囲外にアクセスした

配列の要素数を超えてアクセスすると、undefinedになります。

// NG例：存在しないインデックス
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[3]); // undefined（3番目は存在しない）

// OK例：lengthで確認してからアクセス
if (fruits.length > 3) {
  console.log(fruits[3]);
} else {
  console.log("その要素は存在しません");
}

ループ処理でも要注意です。

// 危険な例
for (let i = 0; i <= fruits.length; i++) { // <= が間違い！
  console.log(fruits[i]); // 最後にundefined
}

// 正しい例
for (let i = 0; i < fruits.length; i++) { // < を使う
  console.log(fruits[i]);
}

解決法：配列を扱う時は、必ずlengthを確認しましょう。

パターン5：非同期処理の結果を待たずに使った

これは中級者でもハマりやすいパターンです。

// NG例：非同期処理を待たない
let userData;

fetch('/api/user')
  .then(response => response.json())
  .then(data => {
    userData = data;
  });

console.log(userData); // undefined（まだデータが来ていない）

// OK例：async/awaitで待つ
async function getUserData() {
  const response = await fetch('/api/user');
  const userData = await response.json();
  console.log(userData); // ちゃんとデータが入っている
}

getUserData();

解決法：非同期処理はasync/awaitで確実に待ちましょう。

Promiseのthen()も使えますが、async/awaitの方が直感的でわかりやすいです。

実践的なundefined対策テクニック3選

1. デフォルト値を活用する

関数の引数や分割代入で、デフォルト値を設定できます。

// 関数の引数にデフォルト値
function greet(name = "ゲスト") {
  console.log(`こんにちは、${name}さん！`);
}

greet(); // "こんにちは、ゲストさん！"

// 分割代入でデフォルト値
const { name = "名無し", age = 0 } = user;

2. Null合体演算子（??）を使う

undefinedやnullの時だけデフォルト値を使いたい場合に便利です。

const displayName = user.name ?? "匿名ユーザー";
const score = savedScore ?? 0;

3. 型チェックを習慣化する

値を使う前に、型をチェックする習慣をつけましょう。

// 安全なコード
if (typeof userName === 'string' && userName.length > 0) {
  console.log(`ようこそ、${userName}さん`);
}

// 配列かどうかチェック
if (Array.isArray(items) && items.length > 0) {
  items.forEach(item => console.log(item));
}

よくある質問：undefinedとnullの使い分けは？

初心者からよく聞かれる質問です。

undefined：システムが自動的に設定する「未定義」状態

• 変数を宣言したけど値を入れていない
• 関数が何も返さない
• オブジェクトの存在しないプロパティ

null：プログラマーが意図的に設定する「空」状態

• 「値がない」ことを明示したい時
• リセットしたい時
• APIから「データなし」を表現する時

// undefinedの例
let x; // 自動的にundefined

// nullの例
let y = null; // 意図的に空にした

実務では、「意図的に空にしたい時はnull、それ以外はundefined」 と覚えておけば大丈夫です。

まとめ：undefinedを恐れず、JavaScriptマスターへの道を歩もう

ここまで、JavaScript undefinedの5つのパターンと対処法をお伝えしてきました。

押さえておきたいポイント

1. 変数には必ず初期値を設定する
2. 関数には必ずreturn文を書く
3. オブジェクトはオプショナルチェイニング（?.）で安全にアクセス
4. 配列はlengthを確認してからアクセス
5. 非同期処理はasync/awaitで確実に待つ

これらを意識すれば、undefinedエラーの9割は防げます。

でも、エラーが出ても焦らないでください。 エラーメッセージをよく読んで、どのパターンに当てはまるか考えてみましょう。

私が運営するLearning Next Schoolでは、JavaScriptの基礎から実践まで、豊富な練習問題とともに学べます。

特に「エラー処理」のチャプターでは、undefinedを含む様々なエラーへの対処法を、実際のコードを書きながら身につけられます。

月額約2,000円で、JavaScriptだけでなくTypeScriptやReactなど、関連技術も学び放題。 エラーに強いエンジニアを目指すなら、ぜひチェックしてみてください。

JavaScriptのundefinedは、誰もが通る道です。 今日学んだことを活かして、一歩ずつ前進していきましょう！

あなたのJavaScript学習を、心から応援しています。