Null / Undefined
Null / Undefined
概要(サマリー)
Null(ヌル)と Undefined(アンディファインド)は、どちらもプログラミング(特に JavaScript など)において「値が存在しない状態」や「空(から)の状態」を表す特別な値である。
一見どちらも同じ「空っぽ」に見えるが、プログラミングの中では「意図的に空にしているのか(Null)」それとも「まだ準備ができていなくて空なのか(Undefined)」という決定的な違いがある。初心者が開発中に最も遭遇しやすいエラーの主因でもある。
詳細解説
「値がない」ことを表す2つの状態
プログラムの中で変数を作った際、まだ中身が決定していない、あるいは値を入れる必要がない場面がある。
このような「中身がない状態」をあえて明示的に定義するために、プログラミング言語では Null や Undefined というデータ型(値)を用意している。
Undefined(アンディファインド)とは何か
Undefinedは、文字通り「未定義(定義されていない)」という意味である。
- 発生する場面: 変数を作っただけで、まだ何も値を代入していないときに自動的に割り当てられる。
- イメージ: 「空の箱はあるけれど、中にはまだ何も入れていない(準備中)」という状態。
Null(ヌル)とは何か
Nullは、「何もない状態」を意図的に示すために使われる。
- 発生する場面: 開発者がプログラム内で「この変数は現在、意図的に空っぽである」と手動で指定するときに代入される。
- イメージ: 「箱の中身を意識的に空っぽ(ゼロではなく、空であること)にした」という状態。
初心者が最も遭遇するエラーの原因
プログラムを書いていると、以下のようなエラー画面を見ることが非常によくある。
- JavaScript:
TypeError: Cannot read properties of undefined (reading 'name') - JavaScript:
TypeError: Cannot read properties of null (reading 'length')
これらは、中身が Undefined や Null(すなわち何も入っていない空っぽの箱)であるのに対して、無理やりデータを取り出そうとしたり、命令を実行させようとしたりしたために発生する。文法ミスであるシンタックスエラーではなく、プログラムの実行中に起きるランタイムエラーである。
コード例
以下は、JavaScriptにおける Null と Undefined の挙動の違いと、エラーを安全に回避するためのコード例である。
値の有無と違いの確認
let user; // 変数を宣言しただけで値を代入しない
console.log(user); // 結果: undefined (自動的に割り当てられる)
let profile = null; // 意図的に「空」にする
console.log(profile); // 結果: null
エラーが発生する悪い例と、安全に回避する良い例
// 悪い例
let apiData = null; // サーバーからのデータがまだ取得できていない状態
console.log(apiData.title); // エラー発生! Cannot read properties of null
// 良い例(オプショナルチェーニング ?. の使用)
// データが存在するときだけ title を読み込み、なければ undefined を返してエラーを防ぐ
console.log(apiData?.title); // 結果: undefined (エラーにならず安全に実行できる)
// 良い例(Null合体演算子 ?? の使用)
// 値が null または undefined の場合に、デフォルト値(右側の値)を表示する
let displayTitle = apiData?.title ?? "タイトル未設定";
console.log(displayTitle); // 結果: "タイトル未設定"
このように、?.(オプショナルチェーニング)や ??(Null合体演算子)などの便利な構文を使うことで、NullやUndefinedに起因するクラッシュ(強制終了)を未然に防ぐことができる。
AIコーディングとの関係
AIにプログラムの修正やコード生成を依頼する際、この Null や Undefined のエラーに直面したときは、発生したエラーログと、該当するコードの周辺をそのままAIに投げることで、安全な記述方法へ即座に書き換えてもらえる。
AIにデバッグを相談する際は、以下のように質問するとよい。
JavaScriptで以下のエラーが発生しました。
apiData から値を取り出そうとしている部分で Null / Undefined の参照エラーが起きているようです。
データがまだ読み込まれていない状態(null)でもエラーでクラッシュしないように、オプショナルチェーニング等を使った安全なコードに書き換えてください。
[エラーログ]
TypeError: Cannot read properties of null (reading 'title')
[該当のコード]
const title = apiData.title;
AIは即座に const title = apiData?.title ?? "デフォルト"; のような安全なパターンを提示し、なぜエラーが起きたのかのメカニズムを解説してくれる。
よくある勘違い
null や undefined は数値の「0」や空文字「""」と同じ?
全く異なる。
0は「ゼロ」という数値データである。""は「文字数がゼロ」という文字列データである(どちらもデータ自体は存在する)。null/undefinedは、データそのものが「存在しない」という概念である。
JavaScriptでは、0 == null や "" == null はすべて false と判定される。
どちらを使ってもプログラムの動作は一緒?
意図的に「データがない」ことを表したい場合は、通常は null を使うのが分かりやすい。undefined はプログラムが自動的に出力する「未定義」の状態として扱い、開発者が手動で変数に undefined を代入するような書き方は、コードの混乱を招くため避けるのが一般的である。
他のプログラミング言語でも同じ呼び方をする?
言語によって呼び方や挙動が異なる。
JavaScriptのように「Null」と「Undefined」の2つが共存して区別されている言語はやや珍しく、JavaScript特有のクセとして理解しておく必要がある。
まとめ
- Undefinedは、変数が宣言されただけで値が割り当てられていない「未定義」状態を表す。
- Nullは、開発者が意図的に中身を「空(何もない)」に設定した状態を表す。
- 中身が空の変数に対してプロパティやメソッドを読み出そうとすると、画面がクラッシュする重大なエラーが発生する。
- JavaScriptでは、
?.(オプショナルチェーニング)などの記述を使うことで、これらのエラーを安全に回避できる。
情報ソース
より詳しくAIに聞いてみよう
- JavaScriptにおける「null」と「undefined」の違いを、初心者向けに図解や分かりやすいたとえ話で説明してください。
Cannot read properties of undefinedというエラーメッセージが出てプログラムが動きません。エラーの読み解き方と解決のステップを教えてください。- JavaScriptのオプショナルチェーニング(
?.)とNull合体演算子(??)の使い方と、これらを使ってコードを安全にする具体例を教えてください。 - Pythonの
Noneや Rubyのnilは、JavaScriptのnullやundefinedとどのように動作や意味が異なりますか? - AIに「Null参照エラーが起きにくい安全な関数」のコードを書いてもらうための、プロンプト(指示文)の書き方のコツを教えてください。