【10個】JavaScriptの要素がnullか空か確かめる手法

●JavaScriptにおける空判定とは

JavaScriptを使ったプログラミングにおいて、変数や配列、オブジェクトが空であるかどうかを判定することは非常に重要です。

適切な空判定を行うことで、不要なエラーを防ぎ、コードの品質と効率を高めることができるでしょう。

○空判定が重要な理由

空判定が重要な理由の一つは、予期せぬエラーを防ぐためです。

例えば、変数が未定義の状態で処理を行おうとすると、”Cannot read property of undefined”といったエラーが発生する可能性があります。

これを防ぐには、変数が存在し、かつ空でないことを確認する必要があるのです。

また、空判定を適切に行うことで、無駄な処理を省略し、コードの効率を高めることもできます。

例えば、配列が空の場合にループ処理を行うと、不必要な処理が実行されてしまいます。

空判定を行うことで、このような無駄を省くことができるでしょう。

○nullとundefinedの違い

空判定を行う上で、nullとundefinedの違いを理解することが重要です。

nullは意図的に値が存在しないことを表すのに対し、undefinedは変数が宣言されているが値が割り当てられていない状態を表します。

例えば、次のようなコードを考えてみましょう。

let a = null;
let b;

console.log(a); // null
console.log(b); // undefined

変数aにはnullが明示的に割り当てられていますが、変数bは宣言されているものの値が割り当てられていないため、undefinedとなっています。

JavaScriptでは、nullとundefinedは比較演算子==では等しいと判定されますが、厳密等価演算子===では区別されます。

console.log(null == undefined); // true
console.log(null === undefined); // false

このように、nullとundefinedは似ていますが、意味合いが異なるため、状況に応じて適切に使い分ける必要があります。

空判定を行う際には、nullとundefinedの違いを意識しながら、適切な判定方法を選択することが大切だと言えるでしょう。

●比較演算子を使った空判定

JavaScriptで空判定を行う際、比較演算子を使う方法がよく用いられます。

比較演算子を使えば、変数の値がnullやundefined、あるいは空文字列(”)であるかどうかを簡単にチェックできるのです。

ここからは、実際のコード例を見ながら、比較演算子を使った空判定の方法について詳しく見ていきましょう。

○サンプルコード1：==演算子を使った比較

まずは、==演算子を使った比較から見ていきましょう。

==演算子は、左右のオペランドの値が等しいかどうかを比較します。

null、undefined、空文字列(”)のいずれかと比較することで、変数が空であるかどうかを判定できます。

let a = null;
let b = undefined;
let c = '';
let d = 0;

console.log(a == null); // true
console.log(b == null); // true
console.log(c == ''); // true
console.log(d == null); // false

この例では、変数a、b、cはそれぞれnull、undefined、空文字列(”)と等しいため、==演算子による比較ではtrueと評価されます。

一方、変数dは数値の0であり、nullとは等しくないためfalseとなります。

==演算子は、オペランドの型が異なる場合に型変換を行ってから比較するため、nullとundefinedが等しいと判定されることに注意が必要です。

厳密に型まで比較したい場合は、===演算子を使う必要があります。

○サンプルコード2：===演算子を使った厳密な比較

===演算子は、左右のオペランドの値と型が等しいかどうかを比較します。

型変換は行われないため、nullとundefinedは区別されます。

let a = null;
let b = undefined;
let c = '';
let d = 0;

console.log(a === null); // true
console.log(b === null); // false
console.log(c === ''); // true
console.log(d === null); // false

この例では、変数aはnullと厳密に等しいためtrueと評価されますが、変数bはundefinedであり、nullとは型が異なるためfalseとなります。

また、変数cは空文字列(”)と厳密に等しいためtrueですが、変数dは数値の0であり、nullとは型が異なるためfalseです。

===演算子を使えば、意図しない型変換によるバグを防ぐことができます。

特に、nullとundefinedを区別する必要がある場合や、空文字列(”)と数値の0を区別したい場合には、===演算子を使うのがベストプラクティスだと言えるでしょう。

○サンプルコード3：!=演算子を使った非等価比較

!=演算子は、左右のオペランドの値が等しくないかどうかを比較します。

つまり、==演算子の否定形です。

変数が空でない場合にtrueを返すため、空判定の逆の結果を得ることができます。

let a = null;
let b = undefined;
let c = '';
let d = 0;
let e = 'Hello';

console.log(a != null); // false
console.log(b != null); // false
console.log(c != ''); // false
console.log(d != null); // true
console.log(e != ''); // true

この例では、変数a、b、cはそれぞれnull、undefined、空文字列(”)と等しいため、!=演算子による比較ではfalseと評価されます。

一方、変数dは数値の0であり、nullとは等しくないためtrueとなります。

また、変数eは空でない文字列のため、空文字列(”)とは等しくなくtrueとなります。

!=演算子も、==演算子と同様に型変換を行ってから比較するため、厳密に型まで比較したい場合は!==演算子を使う必要があります。

●真偽値を利用した空判定

JavaScriptでは、真偽値を使って条件分岐を行うことができます。

実は、この真偽値を利用することで、変数が空であるかどうかを簡単に判定できるのです。

ここからは、真偽値を使った空判定の方法について、実際のコード例を見ながら詳しく解説していきましょう。

○サンプルコード4：if文での真偽値判定

JavaScriptのif文は、与えられた条件式が真(true)の場合にのみ、関連付けられたブロック内のコードを実行します。

条件式には、比較演算子を使った式だけでなく、任意の値を指定することができます。

この性質を利用して、変数が空であるかどうかを判定できるのです。

let a = null;
let b = undefined;
let c = '';
let d = 0;
let e = 'Hello';

if (!a) {
  console.log('変数aは空です');
} else {
  console.log('変数aは空ではありません');
}

if (b) {
  console.log('変数bは空ではありません');
} else {
  console.log('変数bは空です');
}

if (c) {
  console.log('変数cは空ではありません');
} else {
  console.log('変数cは空です');
}

if (d) {
  console.log('変数dは空ではありません');
} else {
  console.log('変数dは空です');
}

if (e) {
  console.log('変数eは空ではありません');
} else {
  console.log('変数eは空です');
}

実行結果

変数aは空です
変数bは空です
変数cは空です
変数dは空です
変数eは空ではありません

この例では、変数a、b、c、dはそれぞれnull、undefined、空文字列(”)、数値の0であり、いずれもfalseと評価されるため、else句が実行されます。

一方、変数eは空でない文字列のため、trueと評価され、if句が実行されます。

JavaScriptでは、null、undefined、空文字列(”)、数値の0、NaNなどの値は、falsyな値と呼ばれ、if文の条件式としてそのまま指定した場合、falseと評価されます。

逆に、それ以外の値はtruthyな値と呼ばれ、trueと評価されます。

この性質を利用することで、比較演算子を使わずに、変数が空であるかどうかを判定できます。

○サンプルコード5：三項演算子での空判定

三項演算子は、if文と同様に条件分岐を行うために使用されます。

三項演算子を使えば、真偽値を利用した空判定をよりコンパクトに記述できます。

let a = null;
let b = undefined;
let c = '';
let d = 0;
let e = 'Hello';

let resultA = a ? '変数aは空ではありません' : '変数aは空です';
let resultB = b ? '変数bは空ではありません' : '変数bは空です';
let resultC = c ? '変数cは空ではありません' : '変数cは空です';
let resultD = d ? '変数dは空ではありません' : '変数dは空です';
let resultE = e ? '変数eは空ではありません' : '変数eは空です';

console.log(resultA);
console.log(resultB);
console.log(resultC);
console.log(resultD);
console.log(resultE);

実行結果

変数aは空です
変数bは空です
変数cは空です
変数dは空です
変数eは空ではありません

この例では、三項演算子を使って、変数が空の場合と空でない場合で異なる文字列を返しています。

変数a、b、c、dはいずれもfalsyな値であるため、コロン(:)以降の’変数は空です’が返され、変数eはtruthyな値であるため、クエスチョンマーク(?)以降の’変数は空ではありません’が返されます。

●メソッドを使った空判定

JavaScriptには、変数が空であるかどうかを判定するために便利なメソッドがいくつか用意されています。

ここからは、そのようなメソッドを使った空判定の方法について、実際のコード例を交えながら詳しく見ていきましょう。

メソッドを適切に使いこなすことで、より効率的で可読性の高いコードを書くことができるはずです。

○サンプルコード6：isNaN()を使った数値チェック

isNaN()は、与えられた値が数値でない(NaN: Not-a-Number)かどうかを判定するメソッドです。

数値でない値には、undefined、null、空文字列(”)、文字列などが含まれます。

isNaN()を使えば、変数が数値であるかどうかを簡単にチェックできます。

let a = 42;
let b = 'Hello';
let c = '';
let d = null;

console.log(isNaN(a)); // false
console.log(isNaN(b)); // true
console.log(isNaN(c)); // false
console.log(isNaN(d)); // false

実行結果

false
true
false
false

この例では、変数aは数値の42であるため、isNaN(a)はfalseを返します。

一方、変数bは文字列のため、isNaN(b)はtrueを返します。

変数cは空文字列(”)、変数dはnullですが、いずれもisNaN()ではfalseと判定されます。

ただし、isNaN()は空文字列(”)やnullに対してもfalseを返すため、厳密に数値であるかどうかを判定したい場合は、typeof演算子と組み合わせるなどの工夫が必要です。

○サンプルコード7：length属性を使った配列の空判定

配列には、要素の数を表すlength属性があります。

length属性を使えば、配列が空であるかどうかを簡単に判定できます。

let a = [1, 2, 3];
let b = [];
let c = [''];

console.log(a.length); // 3
console.log(b.length); // 0
console.log(c.length); // 1

if (a.length) {
  console.log('配列aは空ではありません');
} else {
  console.log('配列aは空です');
}

if (b.length) {
  console.log('配列bは空ではありません');
} else {
  console.log('配列bは空です');
}

if (c.length) {
  console.log('配列cは空ではありません');
} else {
  console.log('配列cは空です');
}

実行結果

3
0
1
配列aは空ではありません
配列bは空です
配列cは空ではありません

この例では、変数aは要素が3つある配列、変数bは空の配列、変数cは空文字列を要素に持つ配列です。

length属性を使って、それぞれの配列の要素数を確認しています。

また、length属性を真偽値として利用することで、配列が空であるかどうかを判定しています。

変数bのように要素数が0の配列は、if文の条件式としてfalseと評価されるため、else句が実行されます。

配列が空であるかどうかを判定する際は、length属性を使うのが一般的です。

ただし、空文字列を要素に持つ配列の場合、length属性は0ではないため、注意が必要ですね。

○サンプルコード8：Object.keys()を使ったオブジェクトの空判定

オブジェクトが空であるかどうかを判定するには、Object.keys()メソッドを使う方法があります。

Object.keys()は、オブジェクトの列挙可能なプロパティ名を配列として返します。

この配列の長さを調べることで、オブジェクトが空であるかどうかを判定できます。

let a = { x: 1, y: 2 };
let b = {};
let c = { '': 'empty' };

console.log(Object.keys(a)); // ['x', 'y']
console.log(Object.keys(b)); // []
console.log(Object.keys(c)); // ['']

if (Object.keys(a).length) {
  console.log('オブジェクトaは空ではありません');
} else {
  console.log('オブジェクトaは空です');
}

if (Object.keys(b).length) {
  console.log('オブジェクトbは空ではありません');
} else {
  console.log('オブジェクトbは空です');
}

if (Object.keys(c).length) {
  console.log('オブジェクトcは空ではありません');
} else {
  console.log('オブジェクトcは空です');
}

実行結果

['x', 'y']
[]
['']
オブジェクトaは空ではありません
オブジェクトbは空です
オブジェクトcは空ではありません

この例では、変数aはプロパティを持つオブジェクト、変数bは空のオブジェクト、変数cは空文字列をキーに持つオブジェクトです。

Object.keys()を使って、それぞれのオブジェクトのプロパティ名の配列を取得しています。

そして、Object.keys()で得られた配列の長さを真偽値として利用することで、オブジェクトが空であるかどうかを判定しています。

変数bのように空のオブジェクトの場合、Object.keys()は空の配列を返すため、if文の条件式としてfalseと評価され、else句が実行されます。

Object.keys()を使った空判定は、オブジェクトのプロパティの有無を確認するのに便利な方法です。

ただし、空文字列をキーに持つオブジェクトの場合、Object.keys()は空の配列を返さないため、注意が必要です。

●よくあるエラーと対処法

JavaScriptで空判定を行う際、初心者が陥りやすいエラーがいくつかあります。

ここからは、そのようなエラーの原因と対処法について、実例を交えながら詳しく見ていきましょう。

エラーの背景にある理論を理解し、適切な対処法を身につけることで、バグの少ない堅牢なコードを書けるようになるはずです。

○”null is not an object”エラー

“null is not an object”は、nullに対してオブジェクトのプロパティやメソッドにアクセスしようとした場合に発生するエラーです。

nullはオブジェクトではないため、プロパティやメソッドを持ちません。

let obj = null;
console.log(obj.prop); // TypeError: null is not an object

このエラーを避けるには、nullチェックを行ってからプロパティやメソッドにアクセスする必要があります。

let obj = null;
if (obj !== null) {
  console.log(obj.prop);
}

この例では、if文でobjがnullでないことを確認してから、プロパティにアクセスしています。

これにより、”null is not an object”エラーを防ぐことができます。

○”Cannot read property ‘length’ of undefined”エラー

“Cannot read property ‘length’ of undefined”は、undefinedな変数に対してlengthプロパティにアクセスしようとした場合に発生するエラーです。

undefinedは値が割り当てられていない変数の状態を表すもので、プロパティを持ちません。

let arr;
console.log(arr.length); // TypeError: Cannot read property 'length' of undefined

このエラーを避けるには、変数がundefinedでないことを確認してからlengthプロパティにアクセスする必要があります。

let arr;
if (arr !== undefined) {
  console.log(arr.length);
}

この例では、if文でarrがundefinedでないことを確認してから、lengthプロパティにアクセスしています。

これにより、”Cannot read property ‘length’ of undefined”エラーを防ぐことができます。

○Falsyな値との混同

JavaScriptには、falsyな値と呼ばれる、if文の条件式でfalseと評価される値があります。

falsyな値には、false、0、空文字列(”)、null、undefined、NaNが含まれます。

これらの値は、真偽値を期待する場面で予期しない動作を引き起こすことがあります。

let num = 0;
if (num) {
  console.log('numはtruthyな値です');
} else {
  console.log('numはfalsyな値です');
}

実行結果

numはfalsyな値です

この例では、numは数値の0であり、falsyな値です。

そのため、if文の条件式ではfalseと評価され、else句が実行されます。

falsyな値との混同を避けるためには、厳密等価演算子(===)を使って明示的に値を比較するのがよいでしょう。

let num = 0;
if (num === 0) {
  console.log('numは0です');
} else {
  console.log('numは0以外の値です');
}

実行結果

numは0です

この例では、numを厳密等価演算子(===)で0と比較しているため、numが0であることを正確に判定できます。

falsyな値は、真偽値を扱う場面で思わぬ結果を引き起こすことがあります。

特に、数値の0や空文字列(”)を真偽値として扱う場合は注意が必要です。

条件式の意図を明確にするために、厳密等価演算子(===)を使って値を比較することをおすすめします。

●空判定の応用例

ここまで、JavaScriptにおける様々な空判定の手法を解説してきました。

それでは、これらの手法を実際のプログラミングの場面でどのように活用できるのでしょうか？

ここからは、空判定を応用した実践的なコード例を見ていきましょう。

空判定のテクニックを適材適所で使いこなすことで、より効率的で可読性の高いコードを書けるようになるはずです。

○サンプルコード9：関数の引数のデフォルト値設定

関数の引数にデフォルト値を設定することで、引数が省略された場合に適切な値が使用されるようにできます。

この際、引数が省略された場合はundefinedが渡されるため、空判定を使ってデフォルト値を設定することができます。

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

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

この例では、greet関数の引数nameがundefinedの場合、デフォルト値として’ゲスト’を設定しています。

これにより、引数が省略された場合でも適切な挨拶文を出力することができます。

ES6からは、デフォルト引数という機能が追加され、より簡潔に引数のデフォルト値を設定できるようになりました。

function greet(name = 'ゲスト') {
  console.log(`こんにちは、${name}さん！`);
}

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

デフォルト引数を使えば、空判定を明示的に行わなくても、引数が省略された場合にデフォルト値が使用されます。

ただし、状況に応じて空判定を使い分ける必要がある場合もあるので、柔軟に対応できるようにしておくことが大切ですね。

○サンプルコード10：空の配列やオブジェクトの初期化

関数内で配列やオブジェクトを初期化する際、引数として渡された値が空の場合にデフォルトの値を使用したいことがあります。

このような場合にも、空判定が活用できます。

function createArray(arr) {
  if (!arr || !Array.isArray(arr)) {
    arr = [];
  }
  arr.push('デフォルト値');
  return arr;
}

console.log(createArray([1, 2, 3])); // [1, 2, 3, 'デフォルト値']
console.log(createArray()); // ['デフォルト値']

この例では、createArray関数の引数arrが空またはArray型でない場合、空の配列を初期値として設定しています。

これにより、引数が適切に渡されなかった場合でも、関数内で配列を操作できるようになります。

オブジェクトの場合も同様に、空判定を使ってデフォルト値を設定することができます。

function createObject(obj) {
  if (!obj || typeof obj !== 'object') {
    obj = {};
  }
  obj.default = 'デフォルト値';
  return obj;
}

console.log(createObject({ a: 1, b: 2 })); // { a: 1, b: 2, default: 'デフォルト値' }
console.log(createObject()); // { default: 'デフォルト値' }

この例では、createObject関数の引数objが空またはobject型でない場合、空のオブジェクトを初期値として設定しています。

これにより、引数が適切に渡されなかった場合でも、関数内でオブジェクトを操作できるようになります。

まとめ

JavaScriptプログラミングにおいて、空判定は欠かせないスキルの一つです。

今回学んだ知識を活かして、バグの少ないコードを書くことができるようになったことを願っています。

これからも、空判定を含めたJavaScriptのベストプラクティスを追求し、エンジニアとしてのスキルを磨いていきましょう。