JavaScript のデータ型（３）、真偽型、Symbol型、null、undefindedを初心者向けに分かりやすく解説｜JavaScript入門講座（５）

目　次

JavaScript のデータ型（３）、真偽型、Symbol型、null、undefindedを初心者向けに分かりやすく解説｜JavaScript入門講座（５）のPodcast
はじめに
真偽型（Boolean）の本質と条件分岐
null：意図的な「オブジェクトの不在」
1. null の役割と実務における用途
2. 歴史的経緯による typeof の挙動
undefined：値が未定義である状態
1. undefined が発生するシナリオ
2. undefined と安全に向き合うための判定法
null と undefined の使い分けと相違点
1. 意味論的および技術的な比較
2. 緩い比較と厳密な比較
Symbol型：一意性が保証された識別子
型の安全性と最新の演算子
1. NULL合体演算子（??）によるデフォルト値の設定
2. オプショナルチェーン（?.）による安全なアクセス
結論と学習のアドバイス
参考資料

JavaScript のデータ型（３）、真偽型、Symbol型、null、undefindedを初心者向けに分かりやすく解説｜JavaScript入門講座（５）のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

JavaScriptというプログラミング言語において、データの性質を定義する「データ型」の理解は、堅牢でバグの少ないプログラムを構築するための基盤となります。これまでの講座では数値型（Number/BigInt）や文字列型（String）について学習してきましたが、本稿では論理的な判断を司る「真偽型（Boolean）」、一意の識別子を作成する「Symbol型」、そして値の不在を表現する「null」と「undefined」について、最新の仕様に基づき詳細に解説します。これらのデータ型は、一見すると単純なものに思えるかもしれません。しかし、JavaScript特有の型変換の挙動や、歴史的な背景に基づく仕様上の注意点など、プロフェッショナルな開発者であっても正確な理解が求められる深いトピックを含んでいます。本講座を通じて、これらの型の本質を捉え、実務に耐えうる知識を身につけていきましょう。

真偽型（Boolean）の本質と条件分岐

真偽型（Boolean）は、論理的な命題が「真」であるか「偽」であるかを表すためのデータ型です。この型が持つことのでける値は、true（真）と false（偽）の二種類のみに限定されています。JavaScriptのプログラムにおいて、この型は主に if 文や while ループといった制御構造における条件判定の基準として利用されます。

論理値の生成メカズム

日常的なコーディングにおいて、論理値は比較演算子や論理演算子を通じて自然に生成されます。たとえば、二つの数値を比較した際、その結果は必ず真偽型のいずれかとなります。

演算のカテゴリー	具体的な記述例	評価結果
比較演算（大なり）	10 > 5	true
厳密等価判定	10 === 10	true
論理否定	!true	false
配列判定関数	Array.isArray()	true

JavaScriptには、値のみを比較する「等価演算子（==）」と、型も含めて厳密に比較する「厳密等価演算子（===）」が存在しますが、意図しない型変換によるバグを防ぐため、常に後者の === を使用することが推奨されています。

真値（Truthy）と偽値（Falsy）の識別

JavaScriptの最も特徴的、かつ注意が必要な仕様の一つに、論理値が期待される文脈（条件式など）において、あらゆるデータ型が自動的に true または false に変換される「暗黙の型変換」があります。この変換において false と見なされる値を「偽値（Falsy）」、それ以外のすべての値を「真値（Truthy）」と呼びます。偽値として定義されているのは、以下の特定の値のみです。

false（論理値の偽）

0 および -0（数値のゼロ）

0n（BigIntのゼロ）

""（空文字列）

null（値の不在）

undefined（未定義）

NaN（非数）

ここで重要な洞察は、上記以外の値、たとえば空の配列 `` や空のオブジェクト {} は、中身が空であっても「真値」として扱われるという点です。この性質を理解していないと、オブジェクトの存在チェックを行う際に予期せぬ挙動を招く可能性があります。

明示的な型変換とラッパーオブジェクトの回避

ある値を明示的に論理型に変換したい場合、Boolean() 関数を使用するか、二重否定（!!）演算子を用いるのが一般的です。一方で、new Boolean() のようにコンストラクターとして呼び出すことは強く非推奨とされています。これによって生成されるのは論理型のプリミティブ値ではなく「Booleanオブジェクト」であり、たとえ内部に false という値を保持していても、オブジェクト自体は常に「真値」として評価されてしまうため、論理的な矛盾を引き起こす原因となります。

null：意図的な「オブジェクトの不在」

null 型は、ちょうど一つの値 null のみを持つプリミティブ型です。これは、プログラムの設計において「値が意図的に空であること」や「参照すべきオブジェクトが存在しないこと」を明示するために使用されます。

null の役割と実務における用途

null は、APIの設計やデータベース操作において、検索結果が「該当なし」であることを示すために頻繁に利用されます。たとえば、DOM（Document Object Model）操作において、指定したセレクターに一致する要素が見つからなかった場合、document.querySelector() は null を返します。これは「要素が見つからなかった」という状態をプログラムに対して明確に伝えるための戻り値です。

また、JavaScriptの継承メカニズムであるプロトタイプチェーンの終端には、必ず null が設定されています。これは、それ以上の親オブジェクトが存在しないことを示す言語仕様上の設計です。

歴史的経緯による typeof の挙動

初心者が最も戸惑う点の一つが、typeof 演算子による判定結果です。typeof null を実行すると、結果は "null" ではなく "object" と返されます。これは、JavaScriptの最初期の実装において、値を表現するビット列の型タグ部分が「0」であるものをオブジェクトとして扱っていた際、null もまたビット表現がすべて0であったために生じた仕様上のバグです。現在では、この挙動を修正すると既存の膨大なWebサイトが動作しなくなる懸念（後方互換性の維持）があるため、意図的にそのまま残されています。

したがって、ある値が本当に null であるかを確認するためには、typeof ではなく value === null という厳密等価演算子を用いる必要があります。

undefined：値が未定義である状態

undefined 型も、値として undefined のみを持ちます。null が開発者によって「意図的に」設定されるのに対し、undefined は「まだ値が割り当てられていない」という、より自然発生的な未定義状態を指します。

undefined が発生するシナリオ

JavaScriptエンジンは、以下のような状況で自動的に undefined を割り当てます。

1. 未初期化の変数: let や var で宣言されたが、初期値が代入されていない変数。

2. 存在しないプロパティ: オブジェクトに定義されていないプロパティにアクセスした場合。

3. 戻り値のない関数: return 文が存在しない、あるいは return; のように値を指定せずに戻った関数。

4. 不足している引数: 関数を呼び出す際、定義された引数の数に対して実際の引数が不足している場合、その変数には undefined が入ります。

undefined と安全に向き合うための判定法

undefined は、JavaScriptにおいてグローバルオブジェクトのプロパティとして定義されています。現代のブラウザ環境では、このプロパティは書き換え不可（non-writable）となっていますが、歴史的には変数名として使用できてしまった時期があり、注意が必要な識別子です。

安全に undefined かどうかを判定する手法を比較すると、以下のようになります。

手法	特徴と注意点
x === undefined	簡潔だが、変数 x 自体が宣言されていない場合に ReferenceError となるリスクがある。
typeof x === "undefined"	最も安全な方法。変数が未宣言であってもエラーにならず、"undefined" を返す。
void 0	常に undefined を生成する演算。古くからの慣習で、上書きの心配がないためミニファイ済みのコードなどで多用される。

null と undefined の使い分けと相違点

これら二つの型は、どちらも「値がない」ことを表現しますが、その背後にある意味合い（セマンティクス）は大きく異なります。現代的な開発において、これらの違いを正しく理解し、適切に使い分けることは、コードの意図を明確にする上で極めて重要です。

意味論的および技術的な比較

比較項目	undefined	null
根本的な意味	「未定義」であり、まだ何も設定されていない。	「空」であることを意図的に定義している。
発生の主体	JavaScriptエンジン（言語仕様としてのデフォルト）。	開発者（人間による明示的な操作）。
数値変換時の挙動	NaN になる（数値として計算不能）。	0 として扱われる（計算に組み込める）。
JSON化の影響	プロパティそのものが除外される。	値として null が保持される。
型判定（typeof）	"undefined"	"object"（歴史的経緯による）。

実務における指針としては、変数の初期状態や、まだ取得されていないオプションのデータには undefined を、明示的に「今は値が存在しない」という事実を記録したい場合には null を使用するのが一般的です。ただし、近年のTypeScriptなどを活用したプロジェクトでは、ルールを単純化するために可能な限り undefined に統一するという規約が採用されることもあります。

緩い比較と厳密な比較

null と undefined を比較する際、等価演算子（==）を用いると、これらは互いに「等しい」と見なされます（null == undefined は true）。これは、両者が共に「値がない」という共通の概念を持つためです。しかし、厳密等価演算子（===）を用いた場合は、型が異なるため false と判定されます。この挙動を利用して、value == null と記述することで、null と undefined の両方を一度にチェックするテクニックも存在します。

Symbol型：一意性が保証された識別子

Symbol（シンボル）型は、ECMAScript 2015（ES6）で導入された比較的新しいプリミティブ型です。その最大の特徴は、作成されるすべての値が「一意（ユニーク）」であり、絶対に他の値と重複しないことが保証されている点にあります。

シンボルの生成と基本的な性質

シンボルは Symbol() 関数を実行することで生成されます。このとき、オプションとして説明用の文字列（説明文）を渡すことができます。しかし、これはあくまで人間が識別するためのラベルに過ぎず、たとえ同じ説明文で作成されたシンボルであっても、それらは常に異なる一意の値として扱われます。

javascript

const sym1 = Symbol("myID");
const sym2 = Symbol("myID");
console.log(sym1 === sym2); // false（説明が同じでも別物）

また、シンボルはプリミティブ値であるため、new 演算子を用いてインスタンス化することはできません。もし new Symbol() と記述した場合、JavaScriptは TypeError を投げます。

なぜ Symbol が必要なのか：実務でのメリット

シンボルが導入された背景には、オブジェクトのプロパティ拡張における「衝突（コリジョン）」の回避という切実なニーズがありました。

プロパティ名の衝突回避: 大規模なプロジェクトやサードパーティ製のライブラリを使用している際、既存のオブジェクトに独自のプロパティを追加したい場合があります。文字列をキーにすると、将来的にそのオブジェクトに同じ名前のキーが追加された際に上書きしてしまうリスクがありますが、シンボルをキーにすれば、一意性が保証されているため衝突を完全に防ぐことができます。

隠蔽性の提供（弱いカプセル化）: シンボルをキーとしたプロパティは、通常の for...in ループや Object.keys()、JSON.stringify() などの列挙処理において無視されます。これを利用して、外部から直接触れられたくない内部的なメタデータや、プライベートに近いプロパティを実装することが可能です。

グローバルシンボルレジストリと Symbol.for()

通常、シンボルはローカルな一意の値を生成しますが、プログラム全体、あるいは異なるモジュール間で同じシンボルを共有したい場合があります。このようなケースでは「グローバルシンボルレジストリ」を利用します。

Symbol.for(key): 指定した文字列（キー）に対応するシンボルがレジストリに存在すればそれを返し、存在すれば新しく作成して登録します。これにより、同じキーを渡せば、どこからでも全く同じシンボルにアクセスできるようになります。

Symbol.keyFor(sym): グローバルレジストリに登録されているシンボルを受け取り、それに関連付けられたキー文字列を返します。

ウェルノウンシンボル（Well-known Symbols）

JavaScript言語そのものが内部的に利用している組み込みのシンボルも存在します。これらは「ウェルノウンシンボル」と呼ばれ、オブジェクトの標準的な振る舞いをカスタマイズするためのフック（プロトコル）として機能します。

Symbol.iterator: オブジェクトを for...of ループなどの反復処理に対応させるために使用されます。

Symbol.toPrimitive: オブジェクトを数値や文字列といったプリミティブ型に変換する際の挙動を定義するために使用されます。

Symbol.toStringTag: Object.prototype.toString.call(obj) を実行した際に返されるタグ文字列（例：[object Array] の後半部分）をカスタマイズします。

これらのシステムシンボルを適切に実装することで、自作のオブジェクトをJavaScriptの標準的な機能とシームレスに連携させることが可能になります。

型の安全性と最新の演算子

現代のJavaScript開発では、これらのデータ型をより安全かつ効率的に扱うための新しい構文が追加されています。特に null や undefined の扱いは、以前に比べて格段に簡潔になりました。

NULL合体演算子（??）によるデフォルト値の設定

NULL合体演算子（??）は、左辺が null または undefined のときのみ右辺の値を返し、それ以外の場合は左辺の値をそのまま返します。これまで多用されていた論理和演算子（||）との違いは、0 や空文字列 "" といった「偽値」の扱いにあります。

値の状態	value \	\
null	"デフォルト"	"デフォルト"
undefined	"デフォルト"	"デフォルト"
0	"デフォルト"	0（有効な数値として維持される）
""	"デフォルト"	""（有効な文字列として維持される）

この演算子の登場により、「設定が提供されていない場合のみデフォルト値を適用する」というロジックを、数値の 0 や空文字を壊すことなく正確に記述できるようになりました。

オプショナルチェーン（?.）による安全なアクセス

深く階層化されたオブジェクトのプロパティにアクセスする際、途中の値が null や undefined であると、通常のアクセス方法（.）では TypeError が発生してプログラムが停止してしまいます。オプショナルチェーン演算子（?.）を使用すると、途中の値が null または undefined であった時点で評価を中止し、エラーを投げずに undefined を返します。この二つの演算子を組み合わせることで、以下のような非常に堅牢で読みやすいコードを書くことができます。

javascript

// userオブジェクトが存在し、さらにaddressが存在する場合のみcityを取得する
// もし途中でnullやundefinedがあれば、最終的なデフォルト値として"Unknown"を代入する
const city = user?.address?.city?? "Unknown";

結論と学習のアドバイス

本稿で解説した真偽型、null、undefined、そしてSymbol型は、JavaScriptにおけるデータの最小単位でありながら、言語の柔軟性と厳密さを象徴する要素です。初心者のうちは、特に null と undefined の違いや、暗黙の型変換（Truthy/Falsy）の落とし穴に戸惑うかもしれません。しかし、これらを単なる記号としてではなく、「誰が、どのような意図でその状態を定義したのか」という観点で捉えることができれば、プログラミングにおける論理的思考は一段と深まります。Symbol型については、日常的な開発で自ら定義する機会は少ないかもしれませんが、ライブラリの内部構造や言語の拡張機能を理解する上で不可欠な知識です。これらの各データ型の特性を正しく理解し、最新の演算子を活用することで、予期せぬエラーに強い、洗練されたプログラムを記述できるようになるでしょう。今後も新しい仕様（ECMAScriptの更新）によって、これらのデータ型を扱うためのより便利な機能が追加されていくことが予想されますが、基礎となる各型の性質が変わることはありません。本講座で得た知識を土台として、より高度なJavaScriptの世界へと進んでいってください。

参考資料

1. Language overview - JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Language_overview

2. JavaScript data structures - JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures

3. Boolean - JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean

4. null - JavaScript | MDN, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/null

5. undefined - JavaScript | MDN, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined

6. JavaScriptのデータ型（3）真偽値、null、undefined, https://qiita.com/Miyate2/items/28352f370913d79a4580

7. JavaScriptのundefinedとnullの違いを解説, https://cad-kenkyujo.com/javascript-undefined/

8. C言語の視点から見るundefinedとnull, https://qiita.com/tadnakam/items/ffaef84ee89fe659ed15

9. Webデザイン・制作のためのJavaScriptデータ型入門, https://it-biz.online/web-design/type/

10. undefined vs. null | TypeScript入門『サバイバルTypeScript』, https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null

11. JavaScriptにおけるnullとundefinedの違いを徹底比較, https://www.rstone-jp.com/column/139885/

12. 0や空文字列とnull・undefinedの混同を避ける方法, https://blog.proglus.jp/4226/

13. nullは使わずundefinedに寄せるべき理由, https://zenn.dev/saki/articles/48425da2f1e8a0

14. JavaScriptのSymbol型：一意な識別子の活用法, https://paiza.jp/works/reference/article-js-symbol

15. Symbolの作成方法と基本的な特徴, https://qiita.com/takobuta_dev/items/05b1729fead71b67cb67

16. シンボル型 - 現代の JavaScript チュートリアル, https://ja.javascript.info/symbol

17. Symbol.for()によるグローバルシンボルの管理, https://nextribe.co.jp/posts/basic-of-symbol-js

18. Symbol - JavaScript | MDN (日本語), https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol

19. undefinedとnullの違いを一言で言えば？：実務での使い分け指針, https://qiita.com/CRUD5th/items/552ec403af6538fac2ce

20. 相違点を明確にする：undefinedとnullの意味合いの違い, https://zenn.dev/fujee/articles/a3eec3709fe7ac

21. NULL合体演算子?? - 現代の JavaScript チュートリアル, https://ja.javascript.info/nullish-coalescing-operator

22. JavaScriptのTruthyとFalsy：条件分岐の罠, https://qiita.com/CRUD5th/items/25eca81c2c24d91732a6

23. プログラミング初心者必見！JavaScriptデータ型完全ガイド, https://www.sejuku.net/blog/37130

24. JavaScriptのデータ型とデータ構造 (最新リファレンス), https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures

25. ECMAScript Language Specification, https://tc39.es/ecma262/

26. You Don't Know JS Yet: Get Started, Kyle Simpson, Leanpub