JavaScriptで開発をしていると、undefinedという値に何度も出会いますよね。たとえば、「この変数なんでundefinedになってるの？」「このif文、なんか意図通りに動かないな…」といった経験はありませんか？undefinedは単なる「値がないことを示すもの」と思われがちですが、実はnullや空文字、0といった他の「値がないように見えるもの」と混同しやすく、判定方法を誤ると予期しないバグにつながる要注意な存在です。
特にAPIレスポンスを扱う場面や、フォーム入力のバリデーション、配列・オブジェクトのネストされたプロパティにアクセスするケースなど、日々のフロントエンド・バックエンド開発において、undefinedの扱いがコードの安全性・保守性を大きく左右します。
この記事では、「undefinedの正しい意味や使われ方」から「正確な判定方法」「よくあるバグの原因と防止テクニック」まで、初学者でも理解しやすく、実務ですぐ使えるように解説していきます。VueやReactなどのフレームワークを使っている方にも役立つ内容を盛り込んでいますので、ぜひ最後までご覧ください。
JavaScriptのundefinedとは？その意味と発生パターン
undefinedが返る3つの代表的なケース
JavaScriptのundefinedは、「値が未定義」であることを示すプリミティブな値です。これは、変数が存在しているものの、まだ値が割り当てられていない状態を意味します。主に、以下の3つのケースでundefinedが返されます。
変数を宣言したものの、初期化していない場合JavaScript letやvarを使って変数を宣言した直後は、明示的に値を代入しない限り、その変数の値はundefinedになります。
let name; console.log(name); // undefinedオブジェクトの存在しないプロパティにアクセスした場合JavaScript オブジェクトに存在しないプロパティにアクセスしようとすると、エラーにはならずにundefinedが返されます。
const user = { id: 1 }; console.log(user.name); // undefined関数の戻り値がない場合JavaScript 関数がreturn文を持たない場合や、return文の後に値を指定していない場合、その関数の実行結果はundefinedになります。
function sayHello() { console.log("Hello");
}
const result = sayHello();
console.log(result); // undefined
null・空文字・0との違いを明確に理解する
undefinedと混同しやすい値にnull、空文字 ""、数値の0、そしてfalseがあります。これらはすべて「値がない」や「偽」というニュアンスで捉えられがちですが、それぞれ明確な違いがあります。
| 値 | 意味 | if文での評価 |
|---|---|---|
undefined | 値が未定義。変数は存在するが値が代入されていない状態。 | 偽 |
null | 意図的に「空」や「無」を代入した値。 | 偽 |
"" (空文字) | 文字列としての長さが0の状態。 | 偽 |
0 | 数値としてのゼロ。 | 偽 |
false | 論理値としての偽。 | 偽 |
ポイントは、nullが「開発者が意図的に空であることを示した値」であるのに対し、undefinedは「値がまだ割り当てられていない状態」であるという点です。
undefinedを意図的に使うケースとdeleteの違い
undefinedは、意図的に変数やプロパティに代入することもできます。これは、変数の値をリセットしたい場合や、プロパティを「存在しない」状態に戻したい場合に利用されることがあります。
let data = "some data";
data = undefined; // 意図的にundefinedを代入
console.log(data); // undefined
ただし、オブジェクトのプロパティを削除したい場合は、undefinedを代入するよりもdelete演算子を使うのが一般的です。
undefinedを代入：プロパティは存在し続けますが、その値がundefinedになります。delete演算子：プロパティ自体がオブジェクトから完全に削除されます。
const user = { name: 'Alice', age: 25 };
// undefinedを代入した場合
user.name = undefined;
console.log('name' in user); // true（プロパティは存在する）
// deleteした場合
delete user.age;
console.log('age' in user); // false（プロパティが削除される）
安全で読みやすいundefined判定とバグ防止テクニック
TypeErrorを防ぐ配列要素やネストオブジェクトの安全なundefinedチェック術
JavaScriptで最もよく遭遇するエラーの一つが、TypeError: Cannot read properties of undefinedです。これは、obj.prop.subpropのようにネストされたプロパティにアクセスする際、途中のpropがundefinedだった場合に発生します。
従来のチェック方法（&&演算子）
const user = {};
// 冗長で読みにくい
const city = user && user.address && user.address.city;
console.log(city); // undefined
モダンなチェック方法（?. オプショナルチェイニング）
ES2020で導入されたオプショナルチェイニング (?.) を使うと、この問題を簡潔かつ安全に解決できます。チェーンの途中のプロパティがnullまたはundefinedの場合、そこで評価が停止し、undefinedを返します。
const user = {};
// 簡潔で安全
const city = user?.address?.city;
console.log(city); // undefined
nullとundefinedをまとめて判定するユーティリティ関数の作成例
undefinedとnullはどちらも「値がない」という状況でよく使われるため、これらをまとめてチェックしたいケースが多々あります。
if (value === undefined || value === null)という冗長な条件式を避けるために、isNilのようなユーティリティ関数を作成すると便利です。
/**
* 値がundefinedまたはnullであるかを判定する関数
* @param {any} value
* @returns {boolean}
*/
const isNil = (value) => value === undefined || value === null;
const data1 = null;
const data2 = undefined;
const data3 = 0;
console.log(isNil(data1)); // true
console.log(isNil(data2)); // true
console.log(isNil(data3)); // false
この関数を使うことで、コードの可読性が向上し、保守しやすくなります。
undefinedの意図的な代入とdelete演算子の違い、truthy/falsy挙動の体系的理解
ここでは、||演算子と??演算子を使ったデフォルト値の設定に焦点を当てます。
||(論理OR演算子): 左辺がfalsyな値（undefined,null,"",0,false）の場合に右辺の値を返します。??(Nullish coalescing operator): 左辺が**undefinedまたはnull*の場合のみ、右辺の値を返します。
この違いが重要になるのは、デフォルト値として0や空文字を扱いたい場合です。
let count = 0;
let name = "";
// || の場合
const defaultCount1 = count || 10; // countがfalsyなので10になる
const defaultName1 = name || "Guest"; // nameがfalsyなので"Guest"になる
console.log(defaultCount1); // 10
console.log(defaultName1); // "Guest"
// ?? の場合
const defaultCount2 = count ?? 10; // countは0なので0になる
const defaultName2 = name ?? "Guest"; // nameは空文字なので""になる
console.log(defaultCount2); // 0
console.log(defaultName2); // ""
||は広範囲にデフォルト値を適用できる反面、0や空文字といった有効な値を上書きしてしまう可能性があります。一方、??はundefinedとnullだけを厳密にチェックするため、より安全にデフォルト値を設定できます。
シチュエーション別！undefinedを考慮した安全なコードの書き方
APIレスポンスやフォーム入力値を安全に扱う方法
APIからのレスポンスは、データのキーが存在しなかったり、nullが含まれていたりすることがよくあります。同様に、フォーム入力も未入力の場合に空文字になることがあります。
- APIレスポンス：プロパティの有無を
??や?.で安全にチェックします。 - フォーム入力：空文字を許容するかどうかでバリデーションを分けます。
// APIレスポンスの例
const apiResponse = { user: { name: 'Bob' } };
const userName = apiResponse?.user?.name ?? '名無し'; // プロパティが存在しない場合も安全
console.log(userName); // Bob
// フォーム入力の例
const input = ''; // フォームからの入力は空文字になることが多い
if (input === '' || input === undefined) {
// 入力がない場合の処理
}
配列やオブジェクトのプロパティを安全にチェックする方法
配列の存在しないインデックスにアクセスするとundefinedが返ります。
const fruits = ['apple', 'banana'];
console.log(fruits[2]); // undefined
オブジェクトに特定のプロパティが存在するかどうかをチェックするには、Object.prototype.hasOwnProperty.call()を使うのが安全です。
const user = { name: 'Charlie' };
console.log(Object.prototype.hasOwnProperty.call(user, 'name')); // true
console.log(Object.prototype.hasOwnProperty.call(user, 'age')); // false
in演算子も使えますが、プロトタイプチェーンを辿ってしまうため、hasOwnPropertyの方が意図しないチェックを防げます。
Vue.jsやReactなどフレームワークでのundefined対策
Vue.jsやReactといったフレームワークでは、コンポーネントのPropsがundefinedになることでテンプレートのレンダリングエラーにつながることがあります。
特に、ネストされたオブジェクトのプロパティをテンプレート内で参照する際は注意が必要です。
<div>
<p>{{ user.name }}</p>
<p>{{ user?.name }}</p>
</div>
このように、テンプレート内でオプショナルチェイニング ?. を使うことで、Propsがundefinedだった場合も安全に処理できます。
よくある質問（FAQ）
-
undefinedを0に変換するにはどうすればいいですか？
-
const value = data ?? 0;のようにNullish coalescing operator ??を使うのが最も現代的で安全な方法です。
-
undefinedをfalseとして扱いたい場合は？
-
if (value)のように、条件式に直接変数を置くのが最もシンプルです。undefinedはfalsyな値なので、自動的にfalseとして評価されます。
-
TypeScriptでのundefinedの扱いはどうなりますか？
-
TypeScriptでは、undefinedを型で厳密に管理できます。例えばlet name: string | undefined;のように型を明示することで、コンパイル時にundefinedになる可能性を警告してくれます。
まとめ
この記事では、JavaScriptにおけるundefinedの基本的な意味から、実用的な判定方法、そしてバグを未然に防ぐためのモダンなテクニックまでを網羅的に解説しました。
これらの知識を活かすことで、あなたは明日からより安全で保守性の高いJavaScriptコードを書くことができるようになるでしょう。undefinedを恐れず、自信を持ってプログラミングを楽しんでください。
