ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
JavaScriptで値がundefinedかどうかを正しく判定するには、変数が宣言済みであることが確実なら x === undefined を、未宣言の可能性があるなら typeof x === "undefined" を使います。型変換を伴う == は undefined == null が true になるため、厳密な判定には === を選ぶのが原則です。
| この記事の要点 |
|---|
|
== と === の違い(undefined判定では === 推奨)
JavaScriptには等価比較の演算子が2種類あります。==(等価/緩い比較)は両辺の型が異なる場合に型変換を行ってから比較します。一方、===(厳密等価)は型変換を行わず、型と値の両方が一致したときだけ true を返します。
undefined の判定では、意図しない型変換を避けるために === を使うのが安全です。次の例を見てください。
|
let x; // 宣言のみ。値は undefined console.log(x === undefined); // true console.log(x == undefined); // true console.log(x == null); // true ← null とも一致してしまう console.log(x === null); // false ← undefined と null を区別 |
このように、=== を使えば undefined と null を明確に区別できます。「undefined だけを判定したい」のか「undefined または null のどちらでもよい」のかを意識して選びましょう。
undefined == null が true になる挙動
== による比較では、JavaScriptの仕様上 null と undefined は互いに等しいものとして扱われます。そのため、次のすべてが true になります。
|
console.log(undefined == null); // true console.log(null == undefined); // true console.log(undefined === null); // false |
この挙動を逆に利用して、「値が null または undefined のどちらかであること」を一度にチェックするイディオムもよく使われます。意図して使う分には便利な書き方です。
|
function isNullish(v) { return v == null; // v が null または undefined なら true } |
ただし、undefined だけを厳密に判定したい場面で == を使うと、null まで巻き込んでしまうため注意が必要です。
typeof x === "undefined" が安全な理由
typeof 演算子は、オペランドの型を表す文字列を返します。値が undefined のとき、typeof は文字列 "undefined" を返します。最大の特長は、未宣言(一度も var/let/const で定義されていない)の変数に対してもエラーを投げない点です。
|
// notDeclared はどこにも宣言されていない変数 console.log(typeof notDeclared === "undefined"); // true(エラーにならない)
console.log(notDeclared === undefined); // ReferenceError が発生 |
このように、notDeclared === undefined のように直接比較すると、変数自体が存在しないため ReferenceError になります。これに対し typeof notDeclared は安全に "undefined" を返すため、その変数が定義されているか分からない場合の判定に向いています。
なお、let/const で宣言された変数を「初期化前(TDZ=Temporal Dead Zone)」に typeof で参照した場合は、未宣言とは異なり ReferenceError になります。typeof が安全なのは「一度も宣言されていない名前」に対してであり、宣言済みだが初期化前の変数までエラーを防げるわけではない点に注意してください。
x === undefined との使い分け
では typeof x === "undefined" と x === undefined はどう使い分ければよいのでしょうか。判断基準はシンプルで、その変数(や引数・プロパティ)が確実に宣言済みかどうかです。
|
function greet(name) { // 引数 name は宣言済みなので === で十分 if (name === undefined) { name = "ゲスト"; } return "こんにちは、" + name + "さん"; } |
- 宣言済みが確実(関数の引数、宣言済みローカル変数、存在するオブジェクトのプロパティなど)→
x === undefinedが簡潔で読みやすい。 - 宣言されているか不明(グローバルに後から定義される値、ライブラリ由来の変数の有無チェックなど)→
typeof x === "undefined"が安全。
オブジェクトのプロパティについては、obj.prop === undefined は「存在しないプロパティ」も「値が undefined のプロパティ」も同じく true になります。両者を区別したい場合は "prop" in obj や Object.hasOwn(obj, "prop") を使います。
オプショナルチェーン ?. やNull合体演算子 ?? との関係
近年のJavaScriptでは、undefined(や null)を安全に扱うための演算子が追加されています。判定そのものを書かずに済ませられる場面も多くあります。
オプショナルチェーン ?. は、参照先が null または undefined のとき、エラーを出さずに評価結果を undefined にします。
|
const user = { profile: null }; console.log(user.profile?.name); // undefined(エラーにならない) |
Null合体演算子 ?? は、左辺が null または undefined のときだけ右辺(既定値)を返します。|| と異なり、0 や ""(空文字)や false を「値あり」として扱える点が重要です。
|
const count = 0; console.log(count ?? 10); // 0(0 は残る) console.log(count || 10); // 10(0 が falsy 扱いで消える)
const name = user.profile?.name ?? "名無し"; // 安全に取り出し+既定値 |
?. と ?? はいずれも null と undefined の両方を対象とします(=「Nullish」)。undefined だけを区別したい場合は、依然として === undefined による明示的な判定が必要です。
判定手法の比較表
| 手法 | undefined判定 | nullの扱い | 未宣言変数 | 主な用途 |
|---|---|---|---|---|
x === undefined |
○(厳密) | 区別する | ReferenceError | 宣言済みの値を厳密に判定 |
typeof x === "undefined" |
○ | 区別する | 安全(エラーなし) | 宣言の有無が不明な変数 |
x == undefined |
△ | nullも一致 | ReferenceError | null/undefinedをまとめて判定 |
x == null |
△ | nullも一致 | ReferenceError | Nullishの簡易判定イディオム |
x ?? 既定値 |
-(既定値補完) | nullも対象 | ReferenceError | 既定値の付与 |
落とし穴
| 注意したいポイント |
|---|
|
よくある質問(FAQ)
Q1. 結局、x === undefined と typeof x === "undefined" のどちらを使えばよいですか?
変数が宣言済みであることが確実なら x === undefined が簡潔で読みやすく、おすすめです。変数が宣言されているかどうか分からない(未宣言の可能性がある)場合は、エラーにならない typeof x === "undefined" を使ってください。
Q2. undefined と null をまとめて判定したいときは?
x == null と書くと、x が null または undefined のときに true になります。意図的に「Nullishかどうか」を判定する定番のイディオムです。値の取り出しと既定値の付与をまとめて行いたい場合は x ?? 既定値 が便利です。
Q3. if (x) だけで undefined を判定してはいけませんか?
if (x) は x が「falsyな値」のときに false になります。falsyには undefined や null のほか、0・""(空文字)・false・NaN も含まれます。そのため 0 や空文字を正当な値として扱いたい場合、if (x) では undefined と区別できません。undefined だけを判定したいなら、明示的に x === undefined を使ってください。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?