今回の記事は、
- JavascriptでのBoolean型の扱い方が知りたい
- どんなデータがfalseと判定されるの?
というお悩みをお持ちの方に向けた記事になっています。
JavaScriptは、Webページに動きを追加したり、ユーザーごとに異なる要素を表示したりする、とても便利なプログラミング言語です。コードの動き方がわかりやすいため、初心者でも理解しやすいのが特徴でもあります。また、JavaScriptは現代のフロントエンド開発には欠かせない言語なので、学習価値も非常に高いといえます。
JavaScriptには様々なルールや文法事項がありますが、初学者がつまづきやすいものとしては「boolean型」というものがあります。特に、プログラミング自体を初めて学習する場合、「そもそも型って何?」という状態の人もいるのではないでしょうか?
この記事では、JavaScriptで使う「boolean型」について詳しく解説していきます。コードを記載しながら丁寧に説明するので、学習につまずいている人はぜひ最後まで読んでみてください。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
boolean型とは?
boolean型とは、真偽値(trueかfalse)が入る型のことを指します。基本的には以下のように記述します。
let 変数 = Boolean(引数);
引数の部分に入れた値によって真偽が判定され、その結果が左側の変数に入ります。
また、真偽判定は、以下のような基準で行われます。真偽判定の基準については、次の項目で詳しく解説します。
- 文字列、数値、配列など…true
- 数値リテラル、空文字など…false
例として、以下のコードと実行結果で確認してみましょう。
let first = Boolean("true");
let second = Boolean("");
console.log(first);
console.log(second);
=> true
=> false
Boolean()の引数に設定した値によって変数に格納される値(true/false)が異なっているのがお分かりいただけるかと思います。
また、JavaScriptは「型」によって処理の仕方を変えます。たとえば、以下の2つは同じように見えますが、それぞれ型が異なります。
123 … 数値(Number型) "123" … 文字列(String型)
boolean型へ変換してみよう
それでは、様々なデータをboolean型へ変換していきましょう。boolean型と聞くと「なんだか難しそう」と感じる人もいるかもしれませんが、実際は非常にシンプルなものです。コードの例を見ながら、boolean型の使い方を確認してみてください。
文字列からboolean型へ変換する
まずは、文字列をboolean型へ変換させる方法について見ていきましょう。
let a = Boolean("true");
let b = Boolean("false");
let c = Boolean("1000");
let d = Boolean("");
console.log(a);
console.log(b);
console.log(c);
console.cog(d);
=> true
=> true
=> true
=> false
最初の2つ(変数A、変数B)からわかる通り、文字列は内容に限らず全てtrueになります。文字列が”false”だからといって、出力結果もfalseになるわけではないので注意してください。
そして、繰り返しになりますが、”1000″は数字ではなく文字列であると見なされます。変数Cの出力結果ももちろんtrueです。
対して、変数 Dの「””」のような空文字はfalseになります。
他方で、「” “」のように、ダブルクォーテーションの間に空白を開けるとtrueになります。「空白という文字が入っている」と覚えておくといいでしょう。
数値からboolean型へ変換する
次に、数値からboolean型へ変換する方法です。
let a = Boolean(1000);
let b = Boolean(0);
let c = Boolean(null);
console.log(a);
console.log(b);
console.log(c);
=> true
=> false
=> false
0以外の数値は、基本的にtrueになります。例外として、NaNやnullなどの「数値リテラル」と呼ばれるものはfalseと出力されます。
また、「-100」のように、マイナスの数値もtrueになるので、覚えておきましょう。
オブジェクトからboolean型へ変換する
最後に、オブジェクトをboolean型へ変換してみましょう。
let a = Boolean({ "国語", "数学", "理科" });
let b = Boolean({});
console.log(a);
console.log(b);
=> true
=> true
オブジェクトもtrueと出力されます。また、中身が空のオブジェクトもtrueになることは、空文字と混同されがちなので要注意です。
boolean型をif文で使ってみよう
それでは、boolean型のif文での使い方を確認しましょう。
let a = Boolean(0);
let b = Boolean("");
let c = Boolean("false")
if (a) {
// aがtrueだった時の処理
} else if (b) {
// bがtrueだった時の処理
} else if (c) {
// cがtrueだった時の処理
} else {
// a、b、cがfalseだった時の処理
}
条件分岐は、カッコ内の条件がtrueであると判定された場合に処理が実行されます。
では上記の条件分岐で、実際に処理される部分はどこかわかるでしょうか。
答えは else if(c)の処理です。
変数aは0であるため、出力はfalseになり、処理は実行されません。
変数bは空文字なので、aと同様の結果になります。
そして変数cは文字列なので、else if(c)において処理が発生するのです。
また、上記のソースコードを、boolean型を用いずに書き換えると、以下のようになります。
let a = 0;
let b = "";
let c = "false";
if (a != 0) {
// aがtrueだった時の処理
} else if (b != "") {
// bがtrueだった時の処理
} else if (C === "false") {
// cがtrueだった時の処理
} else {
// a、b、cがfalseだった時の処理
}
2つのコードを比較すると、boolean型を使った方が見通しのいいコードになっているのがわかりますね。また、あとでコードを修正をしたい時も、booleanの方が簡単に書き換えられます。
否定演算子でbool値を反転させてみよう
ここでは、否定演算子「!」を利用し、bool値を反転させる方法を確認していきましょう。
let a = Boolean("テスト");
if (!a) {
// aがfalseだった時の処理
}
本来、boolean(0)はtrueを出力します。しかし、条件のaの前に否定演算子をつけることで、「aがtrueではなかった場合」の真偽値を出力できるようになります。
よって、上記コードでは、条件分岐内の処理は実行されません。
【注意】Javascriptでfalseと判定される値
最後に、JavaScriptにおいてfalseと判定される値とその意味をまとめておきます。
boolean型だけではなく、JavaScriptを学ぶ上でとても重要な知識なので、必ず頭に入れておきましょう。
- undefined … 「定義されていない」という意味。未定義の変数を出力しようとするとundefinedになります。
- NaN … 「Not a Number」の略。数値型ではないという意味です。
- null … 空っぽという意味。オブジェクトが存在しない場合、nullになります。
- 0、-0 … この2つは無条件でfalseになります。
- 空文字”” … 文字がない、つまりnullであると見なされ、falseになります。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまでJavaScriptのboolean型について解説してきましたが、いかがでしたか?
boolean型やそれを応用した条件分岐の記法は、JavaScriptにおいてとても重要な知識です。これらを習得することで、JavaScriptだけではなく、様々な言語への理解を同時に深められます。
今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。