初心者必見!JavaScript if~elseが即わかる!andやorなどの論理演算子も紹介

web開発

2017/07/17

web開発

プログラミング言語JavaScriptにおけるif文(if~else)について、Web開発経験のある筆者が初心者向けに解説します。

if文を使えば、「繰り返し処理」というものを実現できます。

本記事では、JavaScript if~elseの基本だけでなく、初心者でも知っておきたい論理演算子(or/and/not)についても解説していきます。

ぜひ最後まで読んで、JavaScript if~elseを理解してください。

 

JavaScript if〜elseの書き方

ある条件に基づいて処理を変えたいときは「if〜else文」を使いましょう。「もし、〜であるなら〜しなさい。それ以外であれば〜しなさい」が簡単に実現できます。

if〜else文の書き方

・if 条件式が正しい(true)場合には文Aを実行。
・elseそれ以外であれば文Bを実行。

※else文はオプションです。

更に条件を加えたい時は下記のように「else if」文を追記して条件を追加しましょう。

ただし、if文の条件が増えてしまうと見やすさ、管理のしやすさという点で困る状況もでてきます。そういった場合は、Switch文を使うことも検討してみましょう。

 

JavaScript if〜elseの例

先ほど学習したif 〜else文を使った例サンプルコード1を見てみましょう。

①もし、(サイコロの)数字が6の時「あたり」を出力
②もし、(サイコロの)数字が5の時「惜しい、はずれです。」を出力
③それ以外の場合は「はずれです。」を出力する。

この様に、受け取った値に応じて出力する結果を変更することができました。

 

JavaScript if〜elseにおける論理演算子or(||)について

先ほどのifで「もし〜または〜のとき〜しなさい」という条件をつけたい時は、どのようにしたら良いでしょうか?こちらの項では、論理演算子or「||」を紹介していきます。

if文の条件式に論理演算子を用いることで複数の条件を付け加える事ができます。

次のサンプルコード2は、「もし〜または〜のとき〜しなさい」を実現するためにif文の条件式に論理演算子or「||」を追加しています。

サイコロの値が 6のときに「当り」を出し、それ以外は「はずれ」を出します。その条件に加えて、スペシャルゲストの場合は必ず「当り」をだすようなプログラムを想定しています。

この様に論理演算子を用いることで、判定条件式に追加の判定条件を増やすことができます。

 

JavaScript if〜elseにおける論理演算子and(&&)について

先ほどは、論理演算子or「||」を用いてif文に「または」の条件を追加しました。

続いては論理演算and(&&)をもちいて条件に「かつ」を追加してみましょう。「もし、〜かつ〜なら〜しなさい。それ以外であれば〜しなさい」を実現することができます。

次のサンプルコード3では、女性限定のキャンペーンという設定で、女性がサイコロを振って6を出したら「あたり」それ以外であれば「はずれ」を出すサンプルです。

この様に、「かつ」の条件を追加することが簡単にできました。

 

JavaScript if〜elseにおける論理演算子not(!)について

続いては論理演算子のnot(!)について説明します。

論理演算子notは、bool型の否定した結果を返します。具体的には、実際に実行例を見てみましょう。

この様に、bool型の値に「!」を付けることによって反転した値が出力されます。

それでは論理演算子notを使ったサンプルコードを見てみましょう。

次に示すサンプルコード4は もし、XXXメンバー会員ではない場合は、「XXXメンバー会員になりませんか?」と出力する。それ以外であれば、XXXメンバー会員ステータスを表示します。

この様に、論理演算子not「!」を用いることで簡単に現在の条件の否定の意味を表すことができます。

今回は、シンプルな条件の否定です。しかし、条件が複雑になってきたときなどを想像してみてください。論理演算子not「!」を使うことで条件をスッキリと書くことができると思います。このbool型のフラグを処理する場合は、よく使うことになりますので、覚えておきましょう。

最後に、今回でてきた論理演算子について、昔習った気がするけど不安という方いませんか?

下記の図で少し復習しておきましょう。

論理演算子の解説

 

論理演算子はとっても便利です。複雑な条件も繋げていくことでどんどん書けてしまいます。

ただし、多用しすぎると可読性が下がってしまいます。シンプルな条件分岐を書いていくことをおすすめします。

udemyでは、JavaScript初心者向けの動画学習講座を用意しています。

ぜひ受講して、JavaScriptをマスターしてみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事