JavaScriptでの値の存在チェック方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでの値の存在チェック方法について現役エンジニアが解説しています。JavaScriptでの値の存在をチェックを行う場合、値が存在していないnullやundefinedがあります。nullは値が無い場合。undefinedは未定義の場合になります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでの値の存在チェック方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでの値の存在チェック方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptでの値の存在チェック方法

JavaScriptでの値の存在をチェックを行う場合、「値が存在しない」という状態を理解している必要があります。JavaScriptでは「値が存在しない」という状態のことを、nullと表現します。

nullとundefinedの違い

「値が存在しない」と似ている状態でよく比較されるのが「値が定義されていない」状態があり、 undefinedというものがあります。

nullはPHPやRubyなどでもよく使用されますが、undefinedはJavaScript特有の状態になっています。

nullとundefinedの違いを簡単に説明すると以下のようになります。

  • null:変数などを参照した結果、戻り値が存在しなかった場合
  • undefined:変数などを参照したけれども、参照するものが定義されていなかった場合

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

var id1 = document.getElementById("id1"); // 存在しないID属性を指定する
var noId; // 定義を行わない変数を作成
if(id1 === null) {
 console.log("id1 = null");
}
if(id1 === undefined) {
 console.log("id1 = undefined");
}

// id1 = null
// 変数定義は行われているが、取得したid値は存在しないので、nullとなる

if(noId === null) {
 console.log("noId = null");
}
if(noId === undefined) {
 console.log("noId = undefined");
}
// noId = undefined
// noIdは定義自体が行われていないので、undefinedとなる

// オブジェクトに存在しないプロパティを指定したばあい
if(Math.test === null) {
 console.log("Math.test = null");
}
if(Math.test === undefined) {
 console.log("Math.test = undefined");
}
// Mathオブジェクトにtestというプロパティは定義されていないので
// undefinedとなる

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。