JavaScript

JavaScriptでBoolean値を取得【比較演算子・論理演算子】

どうも、つよぽんです!

今回は、JavaScriptでBooleanな値(真偽値)を取得する3つの方法について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • Booleanって何?
  • true・falseを直接使う以外にどうやってboolean値を取得できるか知りたい
  • 比較演算子・論理演算子を理解したい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptでBooleanを取得する3つの方法Booleanとは「true」「false」の2つの値のことです。true・falseの値を取得するには直接「true」「false」という値を使う他に「比較演算子」「論理演算子」を使う方法があります。それぞれ3つの使い方を覚えていきましょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. Booleanとは
  2. Boolean値を取得する3つのやり方

 

Booleanとは

この章では「Booleanとは何か?」についてカンタンにおさらいします。

Booleanとは「真偽値」のことで、つまり「正しい(真)」「正しくない(偽)」の2択しか持たない値のことです。

そして、JavaScriptで「正しい(真)」「正しくない(偽)」を表現する方法として、「true」「false」という値を使います。

Booleanの値をまとめると次のようになります。

Boolean値
  • 正しい値(真) → true
  • 正しくない値(偽) → false

なお、Booleanに関しては以下の記事「【入門】JavaScriptのデータ型【5つのプリミティブ型】」でも解説しています。

あわせて読みたい
【入門】JavaScriptのデータ型【5つのプリミティブ型】JavaScriptで扱うデータ型について解説します。JavaScriptで扱うデータ型は大きく分けてプリミティブ型とオブジェクト型の2種類にわけられ、今回はプリミティブ型の中でもよく使う5つの型についての解説をします。...

Booleanを取得する3つのやり方

この章では、Booleanの値を取得する3つの方法について、画像を使いながら1つ1つ解説していきます。

Booleanの値を取得する3つの方法を先に話すと次に3つのやり方になります。

3つの方法
  1. Boolean値を直接使う
  2. 比較演算子を使う
  3. 論理演算子を使う

なお、画像内でも行っている動作の確認はChromeのデベロッパーツールを使っています。

実際に同じように動かしてみたい方は、以下の記事を参考にデベロッパーツールを使い、自分の手で確かめながら学習をするとより理解できるでしょう。

あわせて読みたい
【入門】JavaScriptを実行する【デベロッパーツール編】JavaScriptを勉強したいなと思ったときにはまずは実行してみて体験してみると良いでしょう。JavaScriptを実行する方法はプログラミングしたファイルを用意する方法もありますがデベロッパーツールを使うのが手っ取り早いです。...

それでは、「Boolean値を直接使う」から見ていきましょう。

Boolean値を直接使う

「Boolean値を直接」使うのは一番シンプルな方法で、「true」「false」を直接使うことです。

以下の画像は「true」「false」をそれぞれ「value1」「value2」という変数に代入している様子を表したものです。

直接Boolean値(true・false)を使っている様子直接Boolean値(true・false)を使っている様子

画像左下にある緑枠内オレンジ枠内で「value1」「value2」の変数の中の値を確認していて、「true」「false」が出力されているのがわかります。

しかし、「true」「false」を直接使ったやり方だと、ループ処理条件分岐など複雑な処理を行うプログラムが書けません。

例えば、「身長が130cm以下の人はジェットコースターに乗れない」という処理を考えたときに、「true」「false」を直接使うと「全員が乗れる(=true)」もしくは「全員が乗れない(=false)」というプログラムしか記述することができません。

しかし、次に説明する「比較演算子」を使うと「身長130cm以上の人は乗れる(=true)」「身長130cm未満の人は乗れない(=false)」ということができます。

それでは比較演算子の解説もみていきましょう。

比較演算子を使う

この項目では「比較演算子」について解説をします。

比較演算子を使うと2つの値を比較した結果として「true」「false」を返します。

以下の画像は「変数value1」に「10 > 9」を、「変数value2」に「10 < 9」を代入している様子を表したものになります。

比較演算子を使っている様子比較演算子を使っている様子

10 > 9」は「10は9より大きい」という意味を表します。

10 > 9」は数学的に正しいので「true」が返り「変数value1」には「true」が保存されます。

そして、「10 < 9」は数学的に正しくないので「false」が返り「変数value2」には「false」が保存されます。

ここで、さきほども使った「身長が130cm以下の人はジェットコースターに乗れない」という処理を比較演算子を使って見てみましょう。

このときジェットコースターに乗れる人は「130 < X」が「true」になる人だけです。
(Xには身長の値が入ります。)

ここではサンプルとしてAさんとBさんがいてそれぞれの身長は以下のとおりだとします。

AさんとBさんの身長
  • Aさんの身長 : 125cm
  • Bさんの身長 : 132cm

Aさんの場合は、身長が125cmです。先程のX125を当てはめると「130 < 125」となります。「130 < 125」は数学的に正しくないので「false」が返り、Aさんはジェットコースターに乗れません。

Bさん場合は、身長が132cmです。先程のX132を当てはめると「130 < 132」となります。「130 < 132」は数学的に正しいので「true」が返り、Bさんはジェットコースターに乗ることができます。

このように比較演算子を使うと、その時々の状況に合わせて「true」「false」をセットすることが出来るのです。

比較演算子で使える記号(<, <= など)は他にもあり、以下の画像にまとめたので参考にしていただけたらと思います。

比較演算子の種類比較演算子の種類

論理演算子を使う

この項目では「論理演算子」について解説します。

論理演算子を使うと「AかつBのときだけtrueとする」「AまたはBのいずれかがtrueであればtrueとする」のように、2つ以上のBoolean値を組み合わせた結果として「true」「false」を返します。

以下の画像は論理演算子を使っている様子を表したものになります。

論理演算子を使っている様子論理演算子を使っている様子

上の画像内の説明でも書かれている通り、論理演算子には「&&」と「||」を使うことが一般的です。

&&」と「||」の意味は次のようになります。

「&&」と「||」の意味
  • A && : AB両方ともtrueのときだけtrueを返す
  • A || BABいずれか片方でもtrueであればtrueを返す

「&&」を使った例

ここでは「&&」を使った例を見ていきましょう。ここでは映画料金を例に「毎週水曜日はレディースデーで映画料金が1000円になる」という設定にしたいと思います。

このとき映画料金が1000円になる条件は「水曜日」かつ 「女性」になります。これを「&&」を使って表すと「水曜日 && 女性」となります。

もし曜日が水曜日以外であれば、1つ目の条件である「水曜日」が正しくないので「false」が返ります。

仮に曜日が水曜日だったとしても男性であれば、2つ目の条件である「女性」が正しくないので「false」になります。

水曜日でもあり女性でもある場合は、1つ目と2つ目の条件が両方ともに当てはまるので「true」が返ります。

「||」を使った例

ここでは「||」を使った例を見ていきましょう。ここでも映画を例に「12歳未満の子どもは保護者同伴でないと映画が観れない」という設定にしたいと思います。

このとき映画を観ることが出来る条件は「12歳以上の人」もしくは 「保護者が同伴している12歳未満の子ども」になります。これを「||」を使って表すと「12歳以上の人 || 保護者が同伴している12歳未満の子ども」となります。

もし、12歳以上の人あれば、1つ目の条件が当てはまるので「true」が返ります。

また、12歳未満の子どもでも保護者がついていれば、2つ目の条件が当てはまるので「true」が返ります。

しかし、12歳未満の子どもで保護者もついていない場合は、1つ目の条件も2つ目の条件も当てはまらないので「false」になります。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. Booleanは「true」「false」の2つの値しか持たない
  2. Booleanの値を取得する方法は「①直接true・falseを使う方法」「②比較演算子を使う方法」「③論理演算子を使う方法」の3つが一般的
  3. 複雑な処理を行う場合は、比較演算子・論理演算子を使う必要がある

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptでBooleanを取得する3つの方法Booleanとは「true」「false」の2つの値のことです。true・falseの値を取得するには直接「true」「false」という値を使う他に「比較演算子」「論理演算子」を使う方法があります。それぞれ3つの使い方を覚えていきましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です