- システム開発
- 2017/07/17
初心者必見!JavaScript if~elseが即わかる!andやorなどの論理演算子も紹介
プログラミング言語JavaScriptにおけるif文(if~else)について、Web開発経験のある筆者が初心者向けに解説します。
if文を使えば、「繰り返し処理」というものを実現できます。
本記事では、JavaScript if~elseの基本だけでなく、初心者でも知っておきたい論理演算子(or/and/not)についても解説していきます。
ぜひ最後まで読んで、JavaScript if~elseを理解してください。
JavaScript if〜elseの書き方
ある条件に基づいて処理を変えたいときは「if〜else文」を使いましょう。「もし、〜であるなら〜しなさい。それ以外であれば〜しなさい」が簡単に実現できます。
if〜else文の書き方
1 2 3 4 5 |
if(条件式){ 文A // 条件式が真の場合に実行する。 }else{ 文B // 条件式が偽の場合に実行する。 } |
・if 条件式が正しい(true)場合には文Aを実行。
・elseそれ以外であれば文Bを実行。
※else文はオプションです。
更に条件を加えたい時は下記のように「else if」文を追記して条件を追加しましょう。
1 2 3 4 5 6 7 |
if(条件式A){ 文A // 条件式Aが真の場合に実行する。 }else if(条件式B) { 文B // 条件式Aが偽のときで、もし条件式Bが真の場合に実行する。 }else{ 文C // 条件式がすべて偽の場合に実行する。 } |
ただし、if文の条件が増えてしまうと見やすさ、管理のしやすさという点で困る状況もでてきます。そういった場合は、Switch文を使うことも検討してみましょう。
JavaScript if〜elseの例
先ほど学習したif 〜else文を使った例サンプルコード1を見てみましょう。
①もし、(サイコロの)数字が6の時「あたり」を出力
②もし、(サイコロの)数字が5の時「惜しい、はずれです。」を出力
③それ以外の場合は「はずれです。」を出力する。
1 2 3 4 5 6 7 8 9 |
//サンプルコード1 var number = 6; if(number==6){ console.log("おめでとうございます。あたりです。"); //numberが6の時「あたり」を表示する。 }else if(number==5){ console.log("惜しい。はずれです。"); //numberが5の時「惜しい。はずれです。」を表示する。 }else{ console.log("はずれです。"); //それ以外の条件のとき 「はずれ」を表示する。 } |
1 2 |
//サンプルコード1の実行結果 惜しい。はずれです。 |
この様に、受け取った値に応じて出力する結果を変更することができました。
JavaScript if〜elseにおける論理演算子or(||)について
先ほどのifで「もし〜または〜のとき〜しなさい」という条件をつけたい時は、どのようにしたら良いでしょうか?こちらの項では、論理演算子or「||」を紹介していきます。
if文の条件式に論理演算子を用いることで複数の条件を付け加える事ができます。
次のサンプルコード2は、「もし〜または〜のとき〜しなさい」を実現するためにif文の条件式に論理演算子or「||」を追加しています。
サイコロの値が 6のときに「当り」を出し、それ以外は「はずれ」を出します。その条件に加えて、スペシャルゲストの場合は必ず「当り」をだすようなプログラムを想定しています。
1 2 3 4 5 6 7 8 9 10 |
//サンプルコード2 var num = 3; //判定に使う数字 var special = true; //スペシャルゲストかどうかを判断するフラグ if (num == 6 ||special == true){ console.log("おめでとうございます。あたりです。"); //numが6の時またはspecialがtrueの時「あたり」を表示する。 }else{ console.log("はずれです。"); //ifの条件に当てはまらない時に「はずれ」を表示する。 } |
1 2 |
//サンプルコード2の実行結果 おめでとうございます。あたりです。 |
この様に論理演算子を用いることで、判定条件式に追加の判定条件を増やすことができます。
JavaScript if〜elseにおける論理演算子and(&&)について
先ほどは、論理演算子or「||」を用いてif文に「または」の条件を追加しました。
続いては論理演算and(&&)をもちいて条件に「かつ」を追加してみましょう。「もし、〜かつ〜なら〜しなさい。それ以外であれば〜しなさい」を実現することができます。
次のサンプルコード3では、女性限定のキャンペーンという設定で、女性がサイコロを振って6を出したら「あたり」それ以外であれば「はずれ」を出すサンプルです。
1 2 3 4 5 6 7 8 9 10 |
//サンプルコード3 var num = 1; var s = "女性"; if(num==6&&s=="女性"){ console.log("おめでとうございます。あたりです。"); //numが6かつ「女性」の時「あたり」を表示する。 }else{ console.log("はずれです。"); //ifの条件に当てはまらない時に「はずれ」を表示する。 } |
1 2 |
//サンプルコード3 はずれです。 |
この様に、「かつ」の条件を追加することが簡単にできました。
JavaScript if〜elseにおける論理演算子not(!)について
続いては論理演算子のnot(!)について説明します。
論理演算子notは、bool型の否定した結果を返します。具体的には、実際に実行例を見てみましょう。
1 2 |
console.log(!true); // falseと出力される console.log(!false); // trueと出力される |
この様に、bool型の値に「!」を付けることによって反転した値が出力されます。
それでは論理演算子notを使ったサンプルコードを見てみましょう。
次に示すサンプルコード4は もし、XXXメンバー会員ではない場合は、「XXXメンバー会員になりませんか?」と出力する。それ以外であれば、XXXメンバー会員ステータスを表示します。
1 2 3 4 5 6 7 |
//サンプルコード4 var member = true ; // XXXメンバー会員の場合はtrueを入れる。 if (!member){ console.log("XXXメンバー会員になりませんか?");//もしXXXメンバー会員ではないときに出力する }else{ console.log("現在のXXXメンバー会員ステータス : ゴールドメンバー会員"); } |
1 2 |
//サンプルコード4の実行結果 現在のXXXメンバー会員ステータス : ゴールドメンバー会員 |
この様に、論理演算子not「!」を用いることで簡単に現在の条件の否定の意味を表すことができます。
今回は、シンプルな条件の否定です。しかし、条件が複雑になってきたときなどを想像してみてください。論理演算子not「!」を使うことで条件をスッキリと書くことができると思います。このbool型のフラグを処理する場合は、よく使うことになりますので、覚えておきましょう。
最後に、今回でてきた論理演算子について、昔習った気がするけど不安という方いませんか?
下記の図で少し復習しておきましょう。
論理演算子はとっても便利です。複雑な条件も繋げていくことでどんどん書けてしまいます。
ただし、多用しすぎると可読性が下がってしまいます。シンプルな条件分岐を書いていくことをおすすめします。
エンジニアに役立つ目的別講座
Pythonの基本~応用をマスター
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。
Webサイトのコーディングができるように
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。
AWSを基礎から学ぶ
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)

AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!
ITプロジェクトの資料作成はお任せ!
手を動かして学ぶITプロジェクトの資料作成!システム開発のドキュメンテーション技術と成果物テンプレート

ITプロジェクトの資料作成を学べる人気講座。フェーズ毎に、どんな資料を作ればいいのか悩んでいる人におすすめ。
関連記事

簡単!C# if~elseが誰でもわかる!必ず知っておくべき知識とは?
プログラミング言語C#のif~else(if文)についてWeb開発経験のあ…

PHP if~elseがイラストでよくわかる!超重要な論理演算子も理解しよう!
プログラミング言語PHPにおけるif〜elesについてWeb開発経験の…

JavaScriptのwhile文が誰でもわかる!初心者が知りたい情報満載!
プログラミング言語JavaScriptのwhile文について、JavaScript初…

初心者必見!Webアプリケーション開発に必要な知識と手順とは?
プログラミング初心者にとっては、Webアプリケーション(Webサ…
最新情報・キャンペーン情報発信中