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

今回の記事は、

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

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

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

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

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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

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

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

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