こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptのtrue-false判定について説明します。プログラムにおいて条件分岐を組み込む際に知っていると便利なtrue-false判定ですが、プログラムによって使い方が異なっていたり、比較演算子を用いなくてもいいため、初めて扱う人は困惑しちゃいますよね。
JavaScriptのtrue-false判定について、if判定に用いられるboolean型の解説や、実際にプログラムに組み込む際のコード例なども説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
boolean型とは？
boolean型とは、JavaScriptで定義できる型のひとつで、真（true）か偽（false）の真偽値が格納されます。主に条件分岐で用いられ、「もし”真”だったら～」といった構文を書く際にとても有効なメソッドです。
booleanメソッドの使い方は、次のようになります。
|
1 |
var 変数名 = Boolean(対象の引数); |
Booleanの直後の小括弧（）に、真偽を調査したい値を引数として指定します。その結果が、イコールの左の変数に、「true」か「false」で格納されます。
では、どのような条件や値に対して、真（true）や偽（false)になるのでしょうか。JavaScriptで使用頻度が高い文字列や数値、配列について、boolean型への変換方法と併せて解説します。
文字列からboolean型への変換
まずは、文字列とboolean型についてです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 文字列"ABC"をboolean型に変換し、results1に格納 var results1 = Boolean("ABC"); // 変数results1を表示 console.log(results1); // trueが表示される // 文字列"123"をboolean型に変換し、results2に格納 var results2 = Boolean("123"); // 変数results2を表示 console.log(results2); // trueが表示される // 文字列""をboolean型に変換し、results3に格納 var results3 = Boolean(""); // 変数results3を表示 console.log(results3); // falseが表示される // 文字列" "をboolean型に変換し、results4に格納 var results4 = Boolean(" "); // 変数results4を表示 console.log(results4); // trueが表示される |
Booleanの直後の小括弧（）に直接文字列を指定することで、真偽を判断し結果が変数に格納されます。文字列”ABC”と”123″については、文字列として判断されたため、results1とresults2にはtrueが格納されます。
一方、空文字の「””」については、文字列が入っていないため、falseとなります。しかし、「” “」のように空白は文字列として判別されるため、results4にはtrueが格納されます。
- 文字列はその内容に関わらず、定義されていればtrue判定
- 文字列でも空文字””の場合はfalse判定
数値からboolean型への変換
続いて、数値とboolean型についてです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 数値5をboolean型に変換し、変数results1に格納 var results1 = Boolean(5); // results1を表示 console.log(results1); // trueが表示される // 数値-3をboolean型に変換し、変数results2に格納 var results2 = Boolean(-3); // results2を表示 console.log(results2); // trueが表示される // 数値0をboolean型に変換し、変数results3に格納 var results3 = Boolean(0); // results3を表示 console.log(results3); // falseが表示される // 数値リテラルNaNをboolean型に変換し、変数results4に格納 var results4 = Boolean(NaN); // results4を表示 console.log(results4); // falseが表示される |
数値についても、Booleanの直後の小括弧（）に指定することで、真偽を判断し結果が変数に格納されます。一般的な数値の5や-3についてはtrueと判別されます。
一方、0やNaNについてはfalseと判別されます。そのため、results3とresults4についてはfalseが格納されます。
なお、NaNやNumber.NaNなどの数値リテラルについて分からない方は、以下の記事を参考にしてください！
参考 【入門】【初心者】javascript・jQuery部中級「データ型とリテラル、演算子とは？」ウェブカツ ブログ- 0以外の基本的な数値はtrueとなり、0だけfalse判別される
- 数値リテラルのNaNはfalse判別される
配列からboolean型への変換
最後に、配列とboolean型についてです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 配列{'Dog', 'Cat', 'Mouse'}をboolean型に変換し、変数results1に格納 var results1 = Boolean({'Dog', 'Cat', 'Mouse'}); // results1を表示 console.log(results1); // trueが表示される // 空配列{}をboolean型に変換し、変数results2に格納 var results2 = Boolean({}); // results2を表示 console.log(results2); // trueが表示される |
配列についても、Booleanの直後の小括弧（）に指定することで、真偽を判断し結果が変数に格納されます。値が格納されている配列{‘Dog’, ‘Cat’, ‘Mouse’}についてはtrueと判別されるのはもちろんのこと、空配列{}でもboolean型ではtrueと判別されるのが特徴です。あくまで、「空配列」という配列が定義されているため、trueと判別されるためです。
空配列かどうかという判別をしたかったら、以下のようにしましょう。
|
1 |
var result = boolean(配列名.length); |
配列名.lengthとすることで、配列の要素数が戻り値となるので、空配列の場合は0となり、数値0の判別としてfalseとなります。こうすることで、空配列か否かという判別ができます。
- 空配列も含めた、配列はすべてtrueと判別される
- 空配列か否かという判別は、「配列名.lenght」とすることで可能
JavaScriptのtrue-false判定
ここからは、実際のプログラムでの利用を想定した条件文について、比較演算子を用いた場合と使わない場合に分けて、簡単に説明します。
比較演算子を用いたtrue-false判定
|
1 2 3 4 5 6 7 8 |
// 比較演算子を用いた条件式 if (a >= 5){ // 変数aが5以上だったらここの処理が実行される } if (a == 8){ // 変数aが8だったらここの処理が実行される } |
比較演算子を用いる場合は、このようにifの直後の小括弧（）内に条件式を記述します。この条件を満たしていた場合、中括弧｛｝内の処理が実行されます。つまり、今回は「”a >= 5”という条件式に対して、変数aが真（true）を示すとき」という条件と、「”a == 8”という条件式に対して、変数aが真（true）を示すとき」という条件式を満たすかどうか調べています。
比較演算子を使わないtrue-false判定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 比較演算子を用いない場合の条件式 // 定義 var num_1 = 3; // 数値を定義 var num_2 = 0; // 数値を定義 var num_3 = []; // 配列を定義 // 変数num_1に対する条件文 if (num_1){ // num_1はboolean型でtrueとなるため、ここの処理が実行される } // 変数num_2に対する条件文 if (num_2){ // num_2はboolean型でfalseとなるため、ここの処理は実行されない } // 変数num_3に対する条件文 if (num_3){ // num_3はboolean型でtrueとなるため、ここの処理が実行される } |
比較演算子を用いない場合は、ifの直後の小括弧（）に、そのまま変数や対象の引数を記述するだけで、条件式を作れます。if文内の処理を実行するかどうかの判別は、先述したboolean型のtrue-falseの判別結果と同様で、trueとなったときに中括弧｛｝内の処理が実行されます。
そのため今回は、num_1とnum_3についてはboolean型ではtrueとなるため、if文の処理が実行され、num_2に関してはfalseとなるため実行されません。
まとめ
いかがでしたでしょうか？今回は、JavaScriptのtrue-false判定について、基本的な構文や意味から実践的な用途などを紹介しました。
条件分岐などで、はじめは比較演算子を使わないことに違和感を覚えたりしますが、慣れてくるとプログラムの作成効率がぐんっと上がります！ぜひ、JavaScriptのtrue-false判定を理解し、Webサービス作成やシステム構築に活かしてください。
