JavaScript入門：Null（意図的な「空」）とは
Nullは「意図的に値がない」ことを表す特別な値です。未設定やエラーではなく、「今は値を持たせない」とはっきり示したいときに使います。
概念と使いどころ
- 意味: 「ここには値がない」と明示するためのマーク。
- よく使う場面:
- 選択未済: 選択肢がまだ選ばれていない
- 取得失敗／未接続: リソースがまだない、接続前
- 初期状態: これから値が入るが、今は空にしておきたい
let selectedUser = null; // まだ誰も選ばれていない
// 後で選ばれたら代入
selectedUser = { id: 1, name: "Taro" };
undefined との違い
- undefined: 「まだ値が設定されていない」自然発生の未定義（宣言だけ、存在しないプロパティなど）
- null: 開発者が「空」を意図して代入した状態
let a; // undefined（未設定）
let b = null; // null（意図的に空）
const user = { name: "Hanako" };
console.log(user.age); // undefined（プロパティが存在しない）
- 使い分けの指針:
- フィールドが「現在は空」を表したい → null
- 値がまだ来ていない、存在しない結果 → undefined
基本動作と性質
- 比較と型:
console.log(null == undefined); // true（ゆるい等価）
console.log(null === undefined); // false（型が違う）
console.log(typeof null); // "object"（歴史的仕様）
- 真偽値変換（falsy）:
console.log(Boolean(null)); // false
if (!null) { console.log("null は偽扱い"); }
- 算術演算での扱い（注意）：
console.log(null + 1); // 1（null は 0 に変換されることがある）
console.log(null * 2); // 0
意図しない自動変換が起きるので、計算前に null チェックを入れるのが安全。
安全な参照とデフォルト値
- オプショナルチェーン（?.）: null/undefined なら途中で止まって undefined を返す
const user = null;
console.log(user?.profile?.age); // undefined（エラーにならない）
- null合体演算子（??）: 左が null/undefined のときだけ右側を使う
const nickname = null;
const nameToShow = nickname ?? "(未設定)";
console.log(nameToShow); // "(未設定)"
- 論理OR（||）との違い:
const count = 0;
console.log(count || 10); // 10（0はfalsy）
console.log(count ?? 10); // 0（0を有効値として扱う）
実用パターン
- 初期化で「空」を明示:
let currentItem = null; // まだ何も選んでいない
- 条件分岐のシンプル化:
if (currentItem === null) {
console.log("未選択です");
}
- 読み取り専用で安全にアクセス:
const config = null;
// 古い書き方（安全でない）
// console.log(config && config.timeout);
console.log(config?.timeout ?? 0); // 0（安全にデフォルト）
- リソースの解放（クリア）:
let timerId = setInterval(() => {}, 1000);
// 解除後に「もう使わない」を明示
clearInterval(timerId);
timerId = null;
よくあるつまずき
- typeof null が “object”
バグではなく歴史的仕様。型判定にはvalue === nullを使う。 - == を使った曖昧な比較
null == undefinedは true。厳密に判定したいなら=== nullを使う。 - 算術での自動変換
計算に入ると 0 扱いになることがある。必ず事前にvalue ?? デフォルトで数値にしてから計算すると安全。
ミニ練習
- 問1: 「ユーザーが未選択のとき ‘(未選択)’ を表示、選ばれていれば名前を表示」
const selected = null; // または { name: "Taro" }
const label = selected?.name ?? "(未選択)";
console.log(label);
- 問2: null と undefined の挙動を比較せよ
console.log(null == undefined); // true
console.log(null === undefined); // false
- 問3: 金額が null/undefined のときは 0 として計算し、合計を表示
let price = null;
let qty = undefined;
const total = (price ?? 0) * (qty ?? 0);
console.log(total); // 0
- 問4: config が null のときタイムアウトを 3000 にする
const config = null;
const timeout = config?.timeout ?? 3000;
console.log(timeout); // 3000
まとめ
- null は「意図的に値がない」ことを示すために使う。
- undefined は「未設定・存在しない」自然発生の結果。
- 安全な参照は
?.、デフォルト値は??を使う。 - 厳密な比較は
=== null。算術前に null を明確に扱う。
この考え方を身につけると、「値がある／ない」をコードで正しく表現でき、予期しないエラーや挙動を避けられます。