先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでよくnullとundefinedという言葉を見かけますが、これってどう違うんですか？」

先生

「いい質問ですね。nullもundefinedも『値がない』ことを表しますが、意味や使われ方に違いがあります。」

生徒

「具体的にどんな違いがあるんでしょう？」

先生

「では、順番にわかりやすく説明していきますね！」

1. nullとは？

nullは「わざと値がないことを示す特別な値」です。つまり、変数に「ここには何もないよ」と自分で明示的に設定するときに使います。よくある場面としては、フォームの入力を一度リセットしたいときや、検索結果が見つからなかったことを「空っぽ」として表したいときです。

例えるなら、「箱は用意したけれど、中身は入れないと決めた」というイメージです。プログラミング未経験の方は、自分の意思で空にするのがnullと覚えると混乱しにくくなります。


let emptyBox = null;  // わざと何も入れていない状態
console.log(emptyBox); // null と表示される

さらに、次のように「あとで値を入れる予定だけど、今は空にしておく」という使い方もよくあります。最初にnullを入れておくと、「未設定ではなく、空だと決めている」ことが伝わりやすくなります。


let userName = null; // まだ名前は入れないと決めている
if (userName === null) {
  console.log("名前はまだ登録されていません");
}

このように、nullは「値がない」ことをはっきり示したいときに役立つ値です。自分で代入しているかどうかを意識すると、理解がスムーズになります。

2. undefinedとは？

undefinedは「値がまだ設定されていない状態」を表します。変数を宣言したけど、値を代入していないときや、存在しないプロパティを参照したときにJavaScriptが自動的に付ける特別な値です。自分で「空にした」と決めたわけではなく、まだ準備ができていないというニュアンスに近いです。

例えるなら、「箱はあるけど、中身はまだ入っていないよ」という感じです。初心者の方は、代入していないならundefinedと覚えると分かりやすいでしょう。


let box;
console.log(box);  // undefined と表示される（値が設定されていない）

let obj = {};
console.log(obj.name); // undefined（存在しないプロパティ）

もう一つよくあるのが、関数で受け取るはずの引数が渡されなかったケースです。「引数が省略された」というだけでエラーではなく、まずundefinedとして扱われます。


function greet(name) {
  console.log(name); // 渡されなければundefined
}

greet(); // undefined

つまり、undefinedは「まだ値が決まっていない」「参照したけど見つからなかった」ことを表します。コードを読むときは、「ここで本当に値が入るはずだったのか？」を確認するクセをつけると、原因が追いやすくなります。

3. nullとundefinedの違いまとめ

ここでは、nullとundefinedの違いを一度整理しておきましょう。どちらも「値がない」ように見えますが、現場ではこの違いを意識しておくと、条件分岐やエラーの原因が見つけやすくなります。特に「自分で空にしたのか」「まだ入っていないのか」を区別できると、コードの読み間違いが減ります。

ポイント	null	undefined
意味	値が「わざと」空であることを示す	値が「まだ設定されていない」ことを示す
使い方	開発者が意図的に代入する	変数宣言時や存在しないプロパティをアクセスしたときに自動で付く
型（データの種類）	object型（JavaScriptの仕様上）	undefined型（独自の型）
例	`let a = null;`	`let b;` または `console.log(obj.notExist);`

たとえば、次のサンプルのように「未入力」なのか「リセットした」なのかで、表示したいメッセージが変わることがあります。こうした場面で違いを理解していると、扱いがスムーズです。


let nickname;        // まだ決めていない（undefined）
let email = null;    // あえて空にした（null）

if (nickname === undefined) {
  console.log("ニックネームは未入力です");
}

if (email === null) {
  console.log("メールアドレスは空に設定されています");
}

4. nullとundefinedを使った具体例

変数の値がまだ決まっていないときはundefinedが入っていますが、後から「値がない」とはっきり伝えたい場合はnullを代入します。


let userName;
console.log(userName);  // undefined（まだ値がない）

userName = null;        // 意図的に値がないことを示す
console.log(userName);  // null

このように、nullは「意図的に空にしたいとき」、undefinedは「値がまだ設定されていないとき」に使い分けます。

5. nullとundefinedの比較

JavaScriptではnullとundefinedは似ていますが、比較すると違いがわかります。


console.log(null == undefined);  // true （値だけ比較）
console.log(null === undefined); // false（型も比較）

==は値だけ比較し、nullとundefinedは等しいと判定しますが、===は型も比較するため異なるものとして扱います。

6. 使い方のポイントと注意点

通常は変数を宣言しただけのときはundefinedが入ることを理解する。
「値がないことをはっきり示したい」場合はnullを使う。
比較は基本的に===を使い、型の違いに注意する。
関数の引数や戻り値でnullやundefinedが使われることがあるので理解しておくと便利。

7. 最後にポイント整理

ここまで見てきたように、JavaScriptのnullとundefinedは、どちらも「値がない」状態を表しますが、その意味合いは大きく異なります。undefinedは「まだ何も決まっていない自然な状態」、nullは「ここには何も入れないと決めた意図的な状態」と考えると理解しやすくなります。

プログラミング未経験の方は、最初はこの違いが少し難しく感じるかもしれません。しかし、「自分で代入したかどうか」を基準に考えるだけで、使い分けはぐっと楽になります。自分が何も設定していなければundefined、自分で空にしたならnull、という考え方です。

次の簡単な例を見ると、その違いがよりはっきりします。


// まだ値を決めていない状態
let score;
console.log(score); // undefined

// 値が存在しないことを明示したい場合
score = null;
console.log(score); // null

このように、同じ「空」に見えても意味が違うため、条件分岐やエラー対策を行う際に大きな差が出ます。特に実際の開発では、nullとundefinedを正しく理解しているだけで、バグの原因を見つけやすくなり、読みやすいコードを書くことにつながります。

今回学んだポイントを意識しながらコードを書くことで、JavaScriptの基本的な考え方が自然と身につきます。まずは「どちらの意味で値がないのか」を考える習慣をつけていきましょう。

まとめ

nullとundefinedの違いを振り返ろう

この記事では、JavaScriptにおけるnullとundefinedの違いについて、初心者の方でも混乱しにくいように順を追って解説してきました。どちらも「値がない」状態を表すため、最初のうちは同じもののように感じがちですが、実際には意味や使われ方がはっきりと分かれています。この違いを理解しているかどうかで、JavaScriptのコードの読みやすさやバグの起こりやすさが大きく変わってきます。

undefinedは、「まだ値が決まっていない」「何も設定されていない」状態を表します。変数を宣言しただけで代入をしていない場合や、存在しないプロパティを参照したときに自動的に入る値です。つまり、開発者が意識しなくても、JavaScriptの仕組みとして自然に発生するのがundefinedだと言えます。

一方でnullは、「ここには値がない」と開発者自身が意図的に示すための値です。使われ方としては、「一度値は入っていたが、もう不要になった」「あえて空であることを明示したい」といった場面が多くなります。どちらも空を表すように見えますが、「自然に空になっている状態」と「意図して空にした状態」という考え方を持つと、違いが理解しやすくなります。

実務でも役立つ考え方

JavaScriptでプログラムを書くとき、nullとundefinedの違いを意識していないと、思わぬエラーや条件分岐のミスにつながることがあります。たとえば、値がまだ設定されていないのか、それとも意図的に空なのかを区別できていないと、画面表示が崩れたり、処理が途中で止まったりする原因になります。

そのため、変数や関数の戻り値を設計するときには、「この場合はundefinedなのか、それともnullを返すべきなのか」を考える習慣をつけることが大切です。特に初心者のうちは、なんとなく使い分けるのではなく、「これはまだ未設定だからundefined」「これは空であることを示したいからnull」と言葉で説明できる状態を目指しましょう。

まとめとしてのサンプルプログラム


// ユーザー名は最初は未設定
let userName;
console.log(userName); // undefined（まだ値が入っていない）

// ユーザー情報を削除したため、意図的に空にする
userName = null;
console.log(userName); // null（わざと空にした）

この例のように、最初はundefinedで「未設定」を表し、後からnullを代入することで「意図的に値がない状態」を表現できます。短いコードでも、この違いを理解しているかどうかで、コードの意味がはっきり変わってくることが分かります。