プログラミング言語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では、女性限定のキャンペーンという設定で、女性がサイコロを振って６を出したら「あたり」それ以外であれば「はずれ」を出すサンプルです。

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

 

 

エンジニアに役立つ目的別講座

Pythonの基本～応用をマスター

Webサイトのコーディングができるように

AWSを基礎から学ぶ

オリジナルのウェブサイトを作ろう