【Javascript】nullを判定する3つの方法をご紹介します!

今回の記事は、

  • Javascriptの「null」って何?
  • nullと他の値の違いは?
  • nullとundefinedの違いが分からない

というお悩みをお持ちの方に向けた記事になっています。

Javascriptには様々なデータ型がありますが、今回解説する「null」もそのうちの一つです。

実際の開発の中でUncaught TypeError: Cannot read property "プロパティ名" of nullというエラーに遭遇した方も多いのではないでしょうか?

上記のエラーは「null」に対してプロパティやメソッドを呼び出した際に吐かれるエラーになっており、これを防ぐためには、値がnullか否かを正しく判定しなければいけません。

nullの判定方法は複数存在していますので、用途を使い分けて正しく判定を行うためにぜひこの機会にマスターしておきましょう。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

nullとは?

nullとは「オブジェクトが存在しない値のこと」を表しています。

つまり、値がnullの変数の場合「値が何もない」という意味になります。

「値が何もない」ということは、「0」や「””(空文字)」もnullということ?と思われる方も多いかと思いますが、両者とも、JavaScriptでは全く違う扱いになります。

それでは、コードを見て確認してみましょう。

let test1 = ''; // 空文字を代入
let test2 = 0; // nullを代入
let test3 = null; // nullを代入
 
console.log(test1 == null); // nullと同じ値かを判定
console.log(test2 == null); // nullと同じ値かを判定
console.log(test3 == null); // nullと同じ値かを判定

=> false
=> false
=> true

実行結果でtrueが返ってくればその変数はnullということになりますが、上記の通り、「0」や「””(空文字)」はnullではないということがお分かりいただけるかと思います。

nullは存在しない値ですが、他の値とは全く異なる使い方をするということを注意しておきましょう。

nullとundefinedの違いについて

nullと似た値として、undefinedというデータ型も存在しています。

例えば、ショッピングサイトで商品名をキーワードとして検索したときに、該当する商品がなかったとします。この場合に「該当する商品がなかった」ことを結果として返すために、nullが使われます。したがってnullは、プログラムを作成する際に開発者が意図的に設定することが多いです。

一方undefinedは、変数に値を設定しなかったり関数の戻り値を何も設定しなかったときに自動的に設定されます。ショッピングサイトの場合と違って、意図的に変数や関数の戻り値に値を設定しないことは通常あり得ないため、意図的ではありません。

プログラムの値が意図せずundefinedが出る一例を紹介します。

const animal = "ねこ"
console.log(anim) // スペルミスで、animという変数は定義とされておらずundefinedになる

=> Error: anim is not defined

上記のように「”anim”という変数は定義されていません」というエラーが吐かれることになります。

nullやundefinedが混合してしまうと、ソースコードの可読性を落としてしまうため、開発時には両者の違いを意識することが、ソースコードの品質を上げる1つのポイントです。

Javascriptでnullを判定する方法

ここからは、実際にnullを判定する方法を紹介していきます。

等価演算子でnullを判定する

これまでの例でも少し登場していましたが、「null」と比較することで、その値がnullか否かを判定することができます。

比較するには、「==(等価演算子)」や「===(厳密等価演算子)」を使用していきます。「==(等価演算子)」は「値」が同じであるかを確認でき、「===(厳密等価演算子)」は「値」と「型」が同じであるかを知ることができます。

それでは、コードをみて確認していきましょう。

console.log(null == undefined);
console.log(null === undefined);

=> true 
=> false

「==(等価演算子)」の場合は、値がないという点で同じなので「 true」として返ってきます。

「===(厳密等価演算子)」の場合は値は同じですが、それぞれ型が違うので「 false」となります。

本来は型が違い別の扱いである「null」と「 undefined」ですが、「==(等価演算子)」を使用すると値が一緒ということで「 true」という判定になってしまいます
 「==(等価演算子)」を使う場面もありますが、nullを正確に判定するためには必ず 「===(厳密等価演算子)」を使用してください

typeof演算子でnullを判定する

続いては、「null」を判定する方法として、「typeof」という演算子を使う方法をご紹介します。

実際に型の判定を、typeof演算子を使って確認してみます。

console.log(typeof null);
console.log(typeof undefined);
console.log(typeof ''); // 空文字

=> "object" 
=> "undefined" 
=> "string"

上記の通り、空文字はstring型、nullはobject型、undefinedはundefined型として判定されます。

nullはnull型と返って来そうですが、実際にはobject型として返って来ますので、この点だけ注意しておきましょう(←ここは大きなハマりポイントです)。

論理否定演算子でnullを判定する

最後に、論理否定演算子でnullを判定する方法をご紹介します。

論理否定演算子とは、「真偽値」で評価したものを反転して返す時に使われるもので、真偽値で評価する値の前に記号の「!」をつけるだけで使用できます。

実際に使用して、どのような結果になるか見てみましょう。

console.log(!true); 
console.log(!false); 
console.log(!null); 
console.log(!''); 
console.log(!'dog'); 
console.log(!undefined);

=> false // trueを反転
=> true  // falseを反転
=> true  // null(元々はfalse)を反転
=> true  // 空文字(元々はfalse)を反転
=> false // 文字列(元々はtrue)を反転
=> true  // undefined(元々はfalse)を反転

また、論理否定演算子を二つ重ねる「!!」(2重否定)を使用することも可能です。

console.log(!null);  
console.log(!!null);  

=> true
=> false

これって何の意味があるの?と思われる方も多いかと思いますが、実際の開発では、データをどうしても真偽値で取得したいという場合によく使われる手法となっています。

let data = ""
...(※後続の処理)

if (!!data) {
...(※dataが存在している(空文字やnull、undefinedでない)場合の処理)
} else {
...(※dataが存在していない場合の処理)
}

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptでnullを判定する方法について解説してきましたがいかがでしたか?

nullは思わぬところで出現してくる厄介者ではありますが、その判定方法さえ理解しておけば、それほど怖いものではありません。

実際、こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。