JavaScriptのundefinedをやさしく理解する
「変数を作ったのに、思った値が入ってない…」そんなときによく出てくるのが「undefined」。これはエラーじゃなくて「まだ値がないよ」という合図。ここを掴むと、バグの原因がグッと見えるようになります。
undefinedとは何か
- 意味: 「値が設定されていない」状態を表す特別な値。
- よく出る場面:
- 宣言しただけで代入していない変数
- 存在しないプロパティにアクセスしたとき
- 何も返していない関数の戻り値
- 引数を渡さなかった関数パラメータ
let a; // 宣言だけ
console.log(a); // → undefined
const obj = {};
console.log(obj.name); // → undefined（nameプロパティは未定義）
function f() {}
console.log(f()); // → undefined（戻り値なし）
function g(x) { return x; }
console.log(g()); // → undefined（引数渡してない）
undefinedのチェック方法
1. 直接比較（厳密比較）
let value;
if (value === undefined) {
console.log('値がまだない（undefined）');
}
- ポイント:
===は型も値も両方一致するときだけ真。初心者はまずこれでOK。
2. typeofで型を見る
let value;
if (typeof value === 'undefined') {
console.log('値がまだない（undefined）');
}
- ポイント: 変数が「宣言されていない」可能性があるときでもエラーにならず安全に判定できる。
よくある勘違いと落とし穴
- ‘undefined’（文字列）とは別物
'undefined'はただの文字。特別な値のundefinedとは一致しない。
let x;
console.log(x === 'undefined'); // → false
- nullとundefinedの違い
- undefined: 「まだ値を設定していない」null: 「意図的に“何もない”を入れた」
let a; // undefined（未設定）
let b = null; // null（意図して空）
- == と === の違い
==は暗黙の型変換が入るので誤判定の原因になりがち。基本は===を使う。
具体例で体感する
例1: フォーム入力の未入力チェック
function submitForm(name) {
if (name === undefined || name === '') {
console.log('名前を入力してください');
return;
}
console.log('送信しました:', name);
}
submitForm(); // → 「名前を入力してください」（引数なし→undefined）
submitForm(''); // → 「名前を入力してください」（空文字）
submitForm('田中'); // → 「送信しました: 田中」
- ポイント: 未渡し（undefined）と空文字（”）は別。両方ケアするのが丁寧。
例2: オプション引数にデフォルト値
function greet(name, message = 'こんにちは！') {
console.log(`${name}さん、${message}`);
}
greet('佐藤'); // → 「佐藤さん、こんにちは！」
greet('佐藤', undefined); // → 「佐藤さん、こんにちは！」（未設定扱い）
greet('佐藤', 'お元気ですか？'); // → 「佐藤さん、お元気ですか？」
- ポイント: デフォルト引数は「undefinedのときだけ」適用される。空文字やnullはそのまま使われる。
例3: 存在しないプロパティの安全アクセス
const user = { profile: { name: 'Yuki' } };
// ネストが深いときはオプショナルチェーンが便利
console.log(user.profile?.age); // → undefined（ageがない）
console.log(user.account?.id); // → undefined（accountがない）
- ポイント:
?.を使うと、途中がundefinedでもエラーにならずundefinedが返る。
例4: 配列から値が見つからないとき
const items = ['red', 'blue'];
const idx = items.indexOf('green'); // → -1（見つからない）
const found = items.find(x => x === 'green'); // → undefined（見つからない）
- ポイント: 「見つからない」は
indexOfなら -1、findなら undefined。使い分けを覚える。
実践的な判定パターン
- 未設定だけ弾きたい（undefinedのみ）
i
if (value === undefined) { /* ... */ }
- nullかundefinedのどちらかなら弾きたい
if (value == null) { /* ... */ } // ここだけは==を使うテクニック（null or undefined）
- 「値がある」かを広く判定（0やfalseは許可）
if (value !== undefined && value !== null) { /* ... */ }
- 「中身が空っぽ」を厳しめに判定（0やfalseも弾く）
if (!value) { /* ... */ } // 0, '', false, null, undefined すべて弾く
// 厳しすぎることがあるので要件に合わせて使う
ちょこっと練習問題
問1
「未設定（undefined）またはnullなら、’未入力’ と表示。0や空文字はそのまま表示」する関数を作ってください。
function show(value) {
// ここに書く
}
console.log(show(undefined)); // → '未入力'
console.log(show(null)); // → '未入力'
console.log(show('')); // → ''
console.log(show(0)); // → 0
console.log(show('OK')); // → 'OK'
例解答:
function show(value) {
if (value == null) return '未入力'; // null or undefined
return value;
}
問2
ユーザー設定オブジェクトの値が未設定ならデフォルトを使う関数を書いてください。
const defaultConfig = { theme: 'light', pageSize: 20 };
function applyConfig(userConfig) {
return {
theme: userConfig?.theme ?? defaultConfig.theme,
pageSize: userConfig?.pageSize ?? defaultConfig.pageSize,
};
}
console.log(applyConfig({})); // → { theme: 'light', pageSize: 20 }
console.log(applyConfig({ theme: 'dark' })); // → { theme: 'dark', pageSize: 20 }
- ポイント:
??（null合体演算子）は「左がnullまたはundefinedなら右を使う」。''や0はそのまま使う。
まとめの指針
- 未設定の合図: それがundefined。まずは
=== undefinedかtypeof === 'undefined'で判定。 - 意図的な空: nullは「わざと空」。要件に応じて使い分ける。
- 安全アクセス: ネストは
?.、既定値は??、未設定引数はデフォルト引数で守る。