【初心者向け】JavaScriptのtrue-false判定方法は?boolean型についてもわかりやすく解説!

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです!

本記事では、JavaScriptのtrue-false判定について説明します。プログラムにおいて条件分岐を組み込む際に知っていると便利なtrue-false判定ですが、プログラムによって使い方が異なっていたり、比較演算子を用いなくてもいいため、初めて扱う人は困惑しちゃいますよね。

JavaScriptのtrue-false判定について、if判定に用いられるboolean型の解説や、実際にプログラムに組み込む際のコード例なども説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください!

boolean型とは?

boolean型とは、JavaScriptで定義できる型のひとつで、真(true)か偽(false)の真偽値が格納されます。主に条件分岐で用いられ、「もし”真”だったら~」といった構文を書く際にとても有効なメソッドです。

booleanメソッドの使い方は、次のようになります。

Booleanの直後の小括弧()に、真偽を調査したい値を引数として指定します。その結果が、イコールの左の変数に、「true」「false」で格納されます。

では、どのような条件や値に対して、真(true)や偽(false)になるのでしょうか。JavaScriptで使用頻度が高い文字列や数値、配列について、boolean型への変換方法と併せて解説します。

文字列からboolean型への変換

まずは、文字列とboolean型についてです。

Booleanの直後の小括弧()に直接文字列を指定することで、真偽を判断し結果が変数に格納されます。文字列”ABC”と”123″については、文字列として判断されたため、results1とresults2にはtrueが格納されます。

一方、空文字の「””」については、文字列が入っていないため、falseとなります。しかし、「” “」のように空白は文字列として判別されるため、results4にはtrueが格納されます。

文字列のtrue-false判別
  • 文字列はその内容に関わらず、定義されていればtrue判定
  • 文字列でも空文字””の場合はfalse判定

数値からboolean型への変換

続いて、数値とboolean型についてです。

数値についても、Booleanの直後の小括弧()に指定することで、真偽を判断し結果が変数に格納されます。一般的な数値の5や-3についてはtrueと判別されます。

一方、0やNaNについてはfalseと判別されます。そのため、results3とresults4についてはfalseが格納されます。

なお、NaNやNumber.NaNなどの数値リテラルについて分からない方は、以下の記事を参考にしてください!

参考 【入門】【初心者】javascript・jQuery部中級「データ型とリテラル、演算子とは?」ウェブカツ ブログ
数値のtrue-false判別
  • 0以外の基本的な数値はtrueとなり、0だけfalse判別される
  • 数値リテラルのNaNはfalse判別される

配列からboolean型への変換

最後に、配列とboolean型についてです。

配列についても、Booleanの直後の小括弧()に指定することで、真偽を判断し結果が変数に格納されます。値が格納されている配列{‘Dog’, ‘Cat’, ‘Mouse’}についてはtrueと判別されるのはもちろんのこと、空配列{}でもboolean型ではtrueと判別されるのが特徴です。あくまで、「空配列」という配列が定義されているため、trueと判別されるためです。

空配列かどうかという判別をしたかったら、以下のようにしましょう。

配列名.lengthとすることで、配列の要素数が戻り値となるので、空配列の場合は0となり、数値0の判別としてfalseとなります。こうすることで、空配列か否かという判別ができます。

配列のtrue-false判別
  • 空配列も含めた、配列はすべてtrueと判別される
  • 空配列か否かという判別は、「配列名.lenght」とすることで可能

JavaScriptのtrue-false判定

ここからは、実際のプログラムでの利用を想定した条件文について、比較演算子を用いた場合と使わない場合に分けて、簡単に説明します。

比較演算子を用いたtrue-false判定

比較演算子を用いる場合は、このようにifの直後の小括弧()内に条件式を記述します。この条件を満たしていた場合、中括弧{}内の処理が実行されます。つまり、今回は「”a >= 5”という条件式に対して、変数aが真(true)を示すとき」という条件と、「”a == 8”という条件式に対して、変数aが真(true)を示すとき」という条件式を満たすかどうか調べています。

比較演算子を使わないtrue-false判定

比較演算子を用いない場合は、ifの直後の小括弧()に、そのまま変数や対象の引数を記述するだけで、条件式を作れます。if文内の処理を実行するかどうかの判別は、先述したboolean型のtrue-falseの判別結果と同様で、trueとなったときに中括弧{}内の処理が実行されます。

そのため今回は、num_1とnum_3についてはboolean型ではtrueとなるため、if文の処理が実行され、num_2に関してはfalseとなるため実行されません。

まとめ

いかがでしたでしょうか?今回は、JavaScriptのtrue-false判定について、基本的な構文や意味から実践的な用途などを紹介しました。

条件分岐などで、はじめは比較演算子を使わないことに違和感を覚えたりしますが、慣れてくるとプログラムの作成効率がぐんっと上がります!ぜひ、JavaScriptのtrue-false判定を理解し、Webサービス作成やシステム構築に活かしてください。