JavaScript

undefinedってなに？JavaScriptの判定方法を完全マスター

JavaScriptのundefined判定で困ったことはありませんか？基本的な判定方法から実践的な使い方まで、安全で正確な判定方法を初心者向けに分かりやすく解説します。

Learning Next 運営
約 20 分で読めます
JavaScriptundefined判定初心者基礎知識

みなさん、JavaScriptを書いていてこんな経験はありませんか？

「変数がundefinedかどうか分からない」「undefinedの判定方法がたくさんあって混乱する」「なんでこんなエラーが出るの？」

こんな悩み、実はとてもよくあることなんです。 でも大丈夫です！この記事を読めば、undefinedの判定が完璧にできるようになります。

この記事では、JavaScriptでundefinedを判定する方法を初心者向けに分かりやすく解説します。 基本的な判定方法から実践的な活用まで、一緒に学んでいきましょう！

undefinedって何？まずは基本を理解しよう

簡単に言うと「まだ決まってない」状態

undefinedは、値が決まっていない状態を表すJavaScriptの特別な値です。

簡単に言うと、「変数は作ったけど、まだ中身を入れてない」という状態のことです。 例えば、箱は用意したけど何も入れていない、そんなイメージですね。

let message; // 変数を作っただけ
console.log(message); // undefined と表示される

この例では、messageという変数を作ったけど、値を入れていません。 そのため、JavaScriptは「undefined」と教えてくれるんです。

どんな時にundefinedになるの？

undefinedが出てくる場面を見てみましょう。

// 1. 変数を宣言しただけの場合
let name;
console.log(name); // undefined


// 2. 存在しないオブジェクトのプロパティ
let user = { age: 25 };
console.log(user.email); // undefined


// 3. 関数の引数が渡されなかった場合
function greet(name) {
    console.log(name); // undefined（引数なしで呼び出した場合）
}
greet();


// 4. 配列の存在しないインデックス
let numbers = [1, 2, 3];
console.log(numbers[10]); // undefined

これらの場面では、JavaScriptが「その値は見つからないよ」という意味でundefinedを返します。

基本的なundefined判定方法

=== を使った最も確実な方法

**厳密等価演算子（===）**を使う方法が、最も基本的で安全です。

let value;


if (value === undefined) {
    console.log("値はundefinedです");
} else {
    console.log("値は決まっています");
}

この方法なら、確実にundefinedだけを判定できます。 シンプルで分かりやすいので、迷ったらこれを使いましょう。

typeof を使った安全な方法

typeof演算子を使う方法もあります。

let value;


if (typeof value === 'undefined') {
    console.log("値はundefinedです");
} else {
    console.log("値は決まっています");
}

この方法の良いところは、変数が宣言されていなくてもエラーにならないことです。

どちらを使えばいいの？

2つの方法の違いを見てみましょう。

// 宣言済みの変数の場合
let declaredVar;
console.log(declaredVar === undefined); // true
console.log(typeof declaredVar === 'undefined'); // true


// 宣言されていない変数の場合
try {
    console.log(notDeclaredVar === undefined); // エラーになる！
} catch (e) {
    console.log("エラーが発生しました");
}


console.log(typeof notDeclaredVar === 'undefined'); // true（安全）

普通の場面では=== undefinedで十分です。 宣言されていない変数をチェックしたい時だけtypeofを使いましょう。

実践的なundefined判定の使い方

関数の引数をチェックしよう

関数で引数が渡されたかどうかをチェックする例です。

function greet(name) {
    if (name === undefined) {
        console.log("こんにちは、ゲストさん！");
    } else {
        console.log("こんにちは、" + name + "さん！");
    }
}


greet(); // こんにちは、ゲストさん！
greet("田中"); // こんにちは、田中さん！

この方法で、引数があるかないかで処理を変えることができます。 ユーザーフレンドリーな関数が作れますね。

オブジェクトのプロパティをチェックしよう

オブジェクトに必要なプロパティがあるかチェックする例です。

let user = {
    name: "田中",
    age: 25
};


if (user.email === undefined) {
    console.log("メールアドレスが設定されていません");
    user.email = "未設定"; // デフォルト値を設定
} else {
    console.log("メールアドレス: " + user.email);
}


console.log(user); // { name: "田中", age: 25, email: "未設定" }

プロパティがない場合にデフォルト値を設定することで、エラーを防げます。

配列の要素をチェックしよう

配列の要素がundefinedかどうかを確認する例です。

let fruits = ["りんご", "バナナ", , "みかん"]; // 3番目が空


for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === undefined) {
        console.log(`${i}番目の果物は設定されていません`);
    } else {
        console.log(`${i}番目の果物: ${fruits[i]}`);
    }
}

この方法で、配列の中の空の要素を見つけることができます。

nullとundefinedの違いを理解しよう

基本的な違い

nullとundefinedは似ているようで、実は違う意味を持ちます。

let undefinedVar; // 値を設定していない
let nullVar = null; // 意図的に「空」を設定


console.log(undefinedVar); // undefined
console.log(nullVar); // null


console.log(typeof undefinedVar); // "undefined"
console.log(typeof nullVar); // "object"（ちょっと変ですが、これが仕様です）

undefinedは「値が決まっていない」、nullは「意図的に空にした」という意味です。

両方をチェックする便利な方法

nullとundefinedの両方をチェックしたい場合の方法です。

function isEmpty(value) {
    return value === undefined || value === null;
}


// より簡潔な書き方
function isEmpty(value) {
    return value == null; // null と undefined の両方にマッチ
}


console.log(isEmpty(undefined)); // true
console.log(isEmpty(null)); // true
console.log(isEmpty(0)); // false
console.log(isEmpty("")); // false

==を使うと、nullとundefinedの両方を一度にチェックできます。 普段は===を使うべきですが、この場面では==が便利ですね。

安全なundefined処理のコツ

デフォルト値を上手に使おう

undefinedの場合にデフォルト値を設定する方法です。

// 基本的な方法
function processValue(value) {
    if (value === undefined) {
        value = "デフォルト値";
    }
    return value;
}


// ||演算子を使った簡潔な書き方
function processValue(value) {
    return value || "デフォルト値";
}


// ES6のデフォルト引数（最新の書き方）
function processValue(value = "デフォルト値") {
    return value;
}


console.log(processValue()); // "デフォルト値"
console.log(processValue("こんにちは")); // "こんにちは"

最新のJavaScriptなら、デフォルト引数が一番スッキリ書けます。

三項演算子でシンプルに判定

三項演算子を使った簡潔な判定方法です。

let user = {
    name: "田中"
};


// 三項演算子を使った判定
let email = user.email === undefined ? "未設定" : user.email;
console.log("メールアドレス: " + email);


// さらに簡潔な書き方
let email2 = user.email || "未設定";
console.log("メールアドレス: " + email2);

短く書けるので、慣れるととても便利です。

高度なundefined判定テクニック

深い階層のオブジェクトを安全にチェック

オブジェクトの中のオブジェクトを安全にチェックする方法です。

let user = {
    profile: {
        contact: {
            email: "user@example.com"
        }
    }
};


// 危険な方法（エラーになる可能性）
// console.log(user.profile.contact.phone); // エラーの可能性


// 安全な方法1: 段階的にチェック
function getSafeValue(obj, path) {
    const keys = path.split('.');
    let current = obj;
    
    for (let key of keys) {
        if (current === undefined || current === null) {
            return undefined;
        }
        current = current[key];
    }
    
    return current;
}


console.log(getSafeValue(user, 'profile.contact.email')); // user@example.com
console.log(getSafeValue(user, 'profile.contact.phone')); // undefined

この方法で、深い階層でもエラーを防げます。

最新のOptional Chaining（便利な新機能）

最新のJavaScriptでは、もっと簡単に書けます。

let user = {
    profile: {
        contact: {
            email: "user@example.com"
        }
    }
};


// Optional Chainingを使用（ES2020の新機能）
console.log(user.profile?.contact?.email); // user@example.com
console.log(user.profile?.contact?.phone); // undefined
console.log(user.work?.company?.name); // undefined（エラーにならない）

?.を使うことで、途中でundefinedやnullがあってもエラーになりません。 とても便利な新機能です！

便利な判定関数を作ってみよう

汎用的な判定関数

いろいろな場面で使える判定関数を作りましょう。

// 基本的なundefined判定
function isUndefined(value) {
    return value === undefined;
}


// より包括的な「空」判定
function isEmpty(value) {
    return value === undefined || 
           value === null || 
           value === '' || 
           (Array.isArray(value) && value.length === 0) ||
           (typeof value === 'object' && Object.keys(value).length === 0);
}


// 使用例
console.log(isUndefined(undefined)); // true
console.log(isUndefined(null)); // false


console.log(isEmpty(undefined)); // true
console.log(isEmpty("")); // true
console.log(isEmpty([])); // true
console.log(isEmpty({})); // true
console.log(isEmpty("hello")); // false

この関数を作っておくと、いろいろな場面で使い回せます。

設定値を安全に取得する関数

設定値を管理するための実用的な関数です。

function getConfigValue(config, key, defaultValue) {
    // configがnullやundefinedの場合
    if (config === undefined || config === null) {
        return defaultValue;
    }
    
    // キーが存在しない場合
    return config[key] !== undefined ? config[key] : defaultValue;
}


// 使用例
let config = {
    theme: "dark",
    language: "ja"
};


console.log(getConfigValue(config, 'theme', 'light')); // dark
console.log(getConfigValue(config, 'fontSize', 14)); // 14（デフォルト値）
console.log(getConfigValue(null, 'theme', 'light')); // light（デフォルト値）

設定ファイルやオプション値の処理に便利です。

よくある間違いと対処法

間違った判定方法を避けよう

よくある間違いとその対処法を紹介します。

let value;


// 間違い1: == を使ってしまう
if (value == undefined) {
    // nullも真になってしまう
}


// 正しい方法: === を使う
if (value === undefined) {
    // undefinedのみ真になる
}


// 間違い2: truthyな値の判定と混同
if (!value) {
    // 0、false、""、null、undefinedすべてが真になる
}


// 正しい方法: 明示的にundefinedを判定
if (value === undefined) {
    // undefinedのみ真になる
}

明示的にundefinedを判定することで、予期しない動作を防げます。

エラーハンドリングと組み合わせよう

undefinedを適切に処理した安全な関数の例です。

function calculateTotal(items) {
    // 引数のチェック
    if (items === undefined || items === null) {
        throw new Error('配列が必要です');
    }
    
    if (!Array.isArray(items)) {
        throw new Error('配列を渡してください');
    }
    
    return items.reduce((total, item) => {
        // 各要素のチェック
        if (item === undefined || item === null) {
            return total; // undefinedな要素はスキップ
        }
        
        if (typeof item !== 'number') {
            throw new Error('数値の配列が必要です');
        }
        
        return total + item;
    }, 0);
}


// 使用例
try {
    console.log(calculateTotal([1, 2, 3, undefined, 5])); // 11
    console.log(calculateTotal(undefined)); // エラー
} catch (error) {
    console.log("エラー:", error.message);
}

エラーハンドリングと組み合わせることで、より安全な関数が作れます。

まとめ

JavaScriptのundefined判定について学んできました。

基本的なポイントをおさらいしましょう。

  • 判定方法: === undefinedが最も確実で分かりやすい
  • 使い分け: 宣言されていない変数はtypeofを使う
  • nullとの違い: undefinedは「未定義」、nullは「意図的に空」
  • 安全な処理: デフォルト値の設定とエラーハンドリング

実践的なテクニックも身につきました。

  • 関数の引数チェック
  • オブジェクトのプロパティ確認
  • 深い階層の安全なアクセス
  • Optional Chainingの活用

避けるべき間違いも覚えておきましょう。

  • ==による曖昧な判定
  • truthyな値の判定との混同
  • エラーハンドリングの不備

undefined判定をマスターすることで、エラーの少ない安全なJavaScriptコードが書けるようになります。 最初は基本的な=== undefinedから始めて、徐々に高度なテクニックを使ってみてくださいね！

ぜひ実際のプロジェクトで、これらの判定方法を試してみませんか？

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

文系出身や未経験者でもJavaScriptを習得できる？難易度と効率的な学習方法を詳しく解説。挫折しないための具体的なステップを紹介します。

2025年7月6日
12分

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

プログラミング初心者にもわかりやすく、JavaScriptの基本概念から学習方法まで30分で理解できる完全ガイド。今すぐプログラミングの世界に飛び込みましょう。

2025年7月6日
14分

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説

JavaScriptとは何かを初心者向けに5分で理解できるよう解説。歴史、特徴、学習方法まで2025年最新情報でわかりやすく紹介します。

2025年7月6日
9分