この記事でわかること3つ
-
なぜ「undefined」が出るのか、その根本的な原因
-
JavaScriptでundefinedが出る原因10選と解決方法
-
再発を防ぐためのデバッグ思考と習慣
JavaScriptのundefinedとは何か？仕組みと出現パターンを解説
JavaScriptにおける「undefined」は、文字通り「定義されていない」状態を表す特殊な値です。これは言語仕様に組み込まれており、以下のような状況で自動的に出現します。
◆補足：「undefined」と「null」の違いは？
-
undefined：JavaScriptエンジンによって自動的に与えられる「未定義」状態
-
null：開発者が明示的に「空」を示すために代入する値
よくある「undefined」が返る場面
-
値が代入されていない変数
-
存在しないプロパティへのアクセス
-
引数が不足している関数の呼び出し
-
return がない関数の戻り値
-
配列の空要素やインデックス外アクセス
// 未定義の変数を出力する例
let a;
console.log(a); // → undefined
// 存在しないプロパティを参照
let obj = {};
console.log(obj.value); // → undefined
// 引数が不足している関数
function greet(name) {
console.log(`Hello, ${name}`);
}
greet(); // → Hello, undefinedJavaScriptでundefinedが出る原因は？10の実例と解決策
1. undefinedになる原因：変数を宣言したが値を代入していない
// 未初期化の変数を出力する例
let name;
console.log(name); // → undefined-
対策：変数は常に初期化する
2. undefinedになる原因：存在しないオブジェクトプロパティへのアクセス
// 存在しないプロパティを参照した例
const user = { id: 1 };
console.log(user.name); // → undefined-
対策：optional chainingやin演算子で存在確認
3. undefinedになる原因：関数の引数を渡し忘れる
// 引数を渡し忘れてundefinedになる例
function greet(name) {
console.log(`Hello, ${name}`);
}
greet(); // → Hello, undefined-
対策：デフォルト引数を設定する
function greet(name = "ゲスト") {
console.log(`Hello, ${name}`);
}4. undefinedになる原因：配列の空要素や未定義インデックスにアクセス
// 空配列にアクセスしてundefinedになる例
const items = [];
console.log(items[0]); // → undefined-
対策：要素存在チェックや Array.at() を使う
5. undefinedになる原因：return文がない関数
// returnがなくundefinedを返す例
function calc() {
let sum = 1 + 2;
}
console.log(calc()); // → undefined-
対策：明示的に return を書く
6. undefinedになる原因：非同期処理の結果を待たずに参照する
// fetch直後に変数を参照してundefinedになる例
let data;
fetch("/api/user")
.then(res => res.json())
.then(json => data = json);
console.log(data); // → undefined-
対策：async/await を使う
7. undefinedになる原因：this の参照ミス
// 通常関数でthisが変わる例
const obj = {
name: "Tanaka",
show() {
setTimeout(function () {
console.log(this.name); // → undefined
}, 1000);
}
};
obj.show();-
対策：アロー関数で this を固定する
8. undefinedになる原因：undefinedなオブジェクトで分割代入
// undefinedに対して分割代入するとTypeError
const user = undefined;
const { name } = user; // → TypeError-
対策：デフォルト値を設定する
const { name = "no name" } = user || {};9. undefinedになる原因：DOM要素の取得に失敗
// 存在しないDOM要素を取得しようとした例
const el = document.querySelector(".not-exist");
console.log(el.innerText); // → Cannot read properties of null-
対策：nullチェックを行う
10. undefinedになる原因：undefinedを変数名に使ってしまう
// グローバルなundefinedを上書きしてしまう例
var undefined = "上書き";
console.log(undefined); // → "上書き"-
対策：予約語は変数名に使わない
11. 再発防止のためのデバッグ習慣と学び直しポイント
◆ console.logだけに頼らないデバッグの考え方
-
typeof や === を使った明示的なチェック
-
Optional chaining（?.）や nullish coalescing（??）の活用
-
「なぜこの値は未定義なのか」をフローで理解する
// undefinedチェックの例
if (typeof data === "undefined") {
console.log("dataは未定義です");
}
// fallbackつきアクセスの例
const username = user?.name ?? "ゲスト";◆ 終わりに
undefinedは、JavaScriptを使うすべての開発者が必ず向き合うテーマです。だからこそ、構造的な理解とパターンベースの対処法を身につければ、同じトラブルにもう悩まされることはありません。
「またundefinedが出た…」と思ったときは、この記事を再訪してみてください。
【外部リンク】
MDN Web Docs: Destructuring assignment
【内部リンク】
JavaScriptの配列・JSON・map・Map：データ操作術
【JavaScript入門】filter関数の基本と実践的な使い方をサンプル付きで解説！
JavaScriptでよく発生するエラー「ReferenceError」「SyntaxError」などの原因と対策を具体例付きで解説
JavaScriptのAjax完全入門｜fetchの使い方・CORSエラーの対処・非同期通信の基本を解説
非同期処理の基本を理解｜setTimeout・Promise・async/awaitの違いと使い方
JavaScript中級者へのステップアップ｜実務で使えるテクニック10選
【初心者必見】JavaScriptでコードが書けない本当の理由と“順序設計”のすすめ
