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

2022年6月22日
Javascript
Javascript

Javascript

今回の記事は、

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

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

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

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

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

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

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 nullとは？
2 nullとundefinedの違いについて
3 Javascriptでnullを判定する方法
4 最後に

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が存在していない場合の処理）
}

最後に

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

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

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

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

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

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