【Javascript】Boolean型の扱い方を徹底解説!

今回の記事は、

  • JavascriptでのBoolean型の扱い方が知りたい
  • どんなデータがfalseと判定されるの?

というお悩みをお持ちの方に向けた記事になっています。

JavaScriptは、Webページに動きを追加したり、ユーザーごとに異なる要素を表示したりする、とても便利なプログラミング言語です。コードの動き方がわかりやすいため、初心者でも理解しやすいのが特徴でもあります。また、JavaScriptは現代のフロントエンド開発には欠かせない言語なので、学習価値も非常に高いといえます。

JavaScriptには様々なルールや文法事項がありますが、初学者がつまづきやすいものとしては「boolean型」というものがあります。特に、プログラミング自体を初めて学習する場合、「そもそも型って何?」という状態の人もいるのではないでしょうか?

この記事では、JavaScriptで使う「boolean型」について詳しく解説していきます。コードを記載しながら丁寧に説明するので、学習につまずいている人はぜひ最後まで読んでみてください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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だけではなく、様々な言語への理解を同時に深められます。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。