基本情報
料金
期間
転職サポート
講師
  名前 評価 リンク

テックアカデミーロゴ

【最短で学ぶなら】

本サイト人気No.1
テックアカデミー

4.76点

公式
評判

DMM WEBCAMPロゴ

【離職率1%】

DMM WEBCAMP

4.66点

公式
評判
動画編集なら AIMクリカレ 4.63点 公式
評判
  料金 分割払い リンク

テックアカデミーロゴ

【最短で学ぶなら】

185,900円〜
※給付金制度あり
月々約7,746円〜 公式
評判

DMM WEBCAMPロゴ

【離職率1%】

169,800円~
※給付金制度あり
月々約7,075円〜 公式
評判

動画編集なら

AIMクリカレ

700,000円 月々約29,116円〜 公式
評判
  期間 リンク

テックアカデミーロゴ

【最短で学ぶなら】

4~16週間 公式
評判

DMM WEBCAMPロゴ

【離職率1%】

4~24週間 公式
評判
AIMクリカレ 180日間 公式
評判
  転職サポート リンク

テックアカデミーロゴ

【業界最大手】

公式
評判

DMM WEBCAMPロゴ

【離職率1%】

公式
評判
AIMクリカレ × 公式
評判
  講師                     リンク
テックアカデミーロゴ 全員が実務経験3年以上の現役エンジニア 公式
評判
DMM WEBCAMPロゴ 実務経験豊富な現役エンジニア 公式
評判
AIMクリカレ 現役で活躍するプロ講師 公式
評判

IT

JavaScriptで空文字を判定する方法【初心者向けに解説】

本記事でわかること

  • JavaScriptで空文字、null、undefinedを判定する方法
  • 空文字、null、undefinedはどう違うのか?
  • nullとundefinedの判別方法

 

「JavaScriptで空文字、null、undefinedを判定する方法が知りたい」

「nullとundefinedって何が違うのかわかりやすく教えてほしい」

そんな方向けに、JavaScriptのサンプルコード付きで解説します。

 

  • この記事の監修者

サカイユウヤ

現役のフリーランスエンジニア。2009年からさまざまなシステム開発プロジェクトに従事。プログラミングスクールを30社以上見てきた経験から、初心者向けにおすすめのスクールを紹介しています。

JavaScriptで空文字、null、undefinedを判定する方法

JavaScriptで空文字、null、undefinedを判定したい

JavaScriptで空文字、null、undefinedを判定する方法について解説します。

判定方法は複数ありますが、今回は一例としてif文を使います。

ただし、データ型によって判定方法は異なるので正しい判別方法を使うようにしましょう。

 

空文字の判別方法

if文を使用して空文字を判定する方法です。

 

if文では、空文字はfalseとして評価されるため、空文字である場合にfalseとなる処理をすることができます。

具体的には、文字列の長さが0かどうかを調べます。

if("") {
  console.log('true');
} else {
  console.log('false');
}

 

上記コードを実行した結果はこちらです。

このように、if文で空文字を判定すると、JavaScriptではfalseになります。

 

nullの判別方法

if文を使用してnullを判定する方法です。

 

if文では、nullがfalseとして評価されるため、nullである場合にfalseとなる処理をすることができます。

if (null) {
  console.log('true');
} else {
  console.log('false');
}

 

上記コードを実行した結果はこちらです。

false

このようにif文でnullを判定すると、JavaScriptではfalseになります。

 

undefinedの判別方法

if文を使用してundefinedを判定する方法です。

 

if文ではundefinedがfalseとして評価されるため、undefinedである場合にfalseとなる処理をすることができます。

if(undefined) {
  console.log('true');
} else {
  console.log('false');
}

上記コードを実行した結果はこちらです。

false

このようにif文でundefinedを判定すると、JavaScriptではfalseになります。

正しい判定方法を知っていることはプログラミングにおいて重要なスキルですので、しっかり覚えるようにしましょう。

 

空文字、null、undefinedはどう違うのか?

空文字、null、undefinedはどう違うのか?

空文字、null、undefinedはプログラミングでよく使われる特別な値です。

しかし、それぞれの違いを理解してない人が意外と多かったりします。

 

  • 空文字は文字列の長さが0であることを表し、空文字列を表すためには文字列を宣言してその値を空にします
  • nullは値が何も含まれていないことを示し、変数を宣言してその値をnullに設定することで表現します
  • undefinedは変数が宣言されただけで値が割り当てられていないことを示し、変数を宣言するだけで値を割り当てません

 

下記のコードは、空文字、null、undefinedそれぞれの値を表すためのコード例です。

空文字を表すコード

var emptyString = "";

nullを表すコード

var myNull = null;

undefinedを表すコード

var myUndefined;

 

それぞれの値は異なる状態を表しているため、使い分けに注意が必要です。

適切に使い分けてプログラムを実装しましょう。

 

【紛らわしい】nullとundefinedの判別方法

【紛らわしい】nullとundefinedの判別方法

JavaScriptにおいてnullとundefinedの違いを理解し、それらを正しく判別する方法について習得することは大切です。

nullとundefinedは似たような性質を持つため、混同されることがよくあります。

それぞれの違いについても解説していきますね。

 

undefinedとは、値が定義されていない状態であることを示します。

一方、nullは値が存在しない状態を表し、それぞれ異なる意味や用途があります。

つまりnullとundefinedは別物なのですが、コードの書き方によっては同じ扱いになることもあるのです。

if(null == undefined){
  console.log('nullとundefinedは同じです');
} else {
  console.log('nullとundefinedは違います');
}

nullとundefinedは違うので、本来はfalse判定されるはずなのですが実行結果は以下のようになります。

nullとundefinedは同じです

 

もうひとつサンプルコードを見てみましょう。

if(null === undefined){
  console.log('nullとundefinedは同じです');
} else {
  console.log('nullとundefinedは違います');
}

上記コードの実行結果は以下の通り。

nullとundefinedは違います

 

似たような2つのサンプルコードなのですが、その違いは==(等価演算子)を使ってるか===(厳密等価演算子)を使ってるかです。

 

  • ==(等価演算子)は値が同じかだけを確認するため、trueになります
  • ===(厳密等価演算子)は値と型が同じかを確認するため、falseになります。

そのため、nullとundefinedは値は同じですが、型が異なることが分かります。

 

==(等価演算子)を使うと、JavaScriptは暗黙的に型変換を行い、nullとundefinedを同じとみなします。

一方、===(厳密等価演算子)を使う場合は、値だけでなく型も含めて比較するためnullとundefinedは違うと判定されます。

 

判別方法まとめ

nullとundefinedを正しく判別したい場合は、===(厳密等価演算子)を使用するようにしましょう。

型の違いは無視して値だけで判定したい場合は、==(等価演算子)を使うようにしましょう。

 

まとめ

今回は、『JavaScriptで空文字を判定する方法【初心者向けに解説】』というテーマで話していきました。

JavaScriptの空文字判定は実務でも高頻度で使用します。

「JavaScriptで空文字、null、undefinedを判定する方法が知りたい」

「nullとundefinedって何が違うのかわかりやすく教えてほしい」

そんなプログラミング初心者の方にとって、基礎学習の参考になっていたら幸いです。

本記事は以上となります。

スクール選びに迷ったらテックアカデミー!

テックアカデミーは、料金や講師の質、転職サポート、これまでの実績など総合的にもっともオススメできるプログラミングスクールです。

現役エンジニアとして10年以上プログラミングやシステム開発に携わった経験、メディア運営者としてプログラミングスクール30社以上比較・レビューしてきた経験から自信を持って推奨します。

強いてデメリットを挙げるとしたら『オンライン対応のみ』ってことくらい。

「オフラインで直接指導を受けたい」といった方以外はテックアカデミーを選んでおけば間違いありません!

受講前に無料相談を受けることもできるので、「初心者でも大丈夫か?」「副業で稼げるのか?」といった疑問にもしっかり答えてもらえますよ。

テックアカデミー公式サイトを見る

  • この記事を書いた人

ayamarz

【経歴】1992年生まれ➡️立命館大学卒業➡️大手金融機関➡️外資系企業➡️フリーライターとして独立➡️UdemyやZeroPlus Gateでプログラミング学習中

-IT

© 2020 プログラミングガイド by pronavi

プログラミングスクールの最新キャンペーン・割引情報をまとめました。損したくない人必見!
お得にプログラミングを学ぶ
お得なキャンペーン情報を見る