【JavaScriptの超基本】条件分岐（if文とswitch文）について簡単に解説

概要

この記事では、JavaScriptの条件分岐について、超基本的な知識をメモ的にまとめています。

自分用の備忘録なのであしからず。

目次

• 条件分岐
• 真偽値
• 比較演算子
• if文
  • else
  • else if
  • 複数の条件式
• switch文
• まとめ

条件分岐

条件分岐とは、ある条件が成り立つときだけ処理を行うというようなプログラムのことです。

JavaScriptでは、**「if文」や「switch文」**といった書き方がありますので、それぞれ学んでいきます。

今回は条件分岐を学ぶ前に、条件分岐を理解する上で必要な**「真偽値」と「比較演算子」**について学んでいきます。

真偽値

まずは、具体例から。
以下のプログラムを実行します。

index.js

const number = 22;
console.log(number > 20);
//出力結果 : true

ここで出力されるtrueは「真偽値」と呼ばれるものです。真偽値にはtureとfalseの二つの値しか存在しません。条件式が成り立っているときture、成り立っていないときはfalseとなります。

上の例で、**「number > 20」は「定数numberが20より大きい」**という条件式になります。
今、定数numberには22が代入されていて20より大きい値なので、条件が成り立ちtrueが出力されています。

比較演算子

真偽値を出力した際の条件式の部分で出てきた「>」は「比較演算子」と呼ばれるものです。比較演算子にはいくつか種類がありますので、まとめてみました。

演算子	判定
a === b	aがbと等しいときTrue
a !== b	aがbと等しくないときTrue
a > b	aがbより大きいときTrue
a < b	aがbより小さいときTrue
a >= b	aがb以上のときTrue
a <= b	aがb以下のときTrue

数学の記号と似ているので、難しくはないと思います。

「===」と「!==」は数値だけでなく、文字列同士の比較にも用いることができます。

この真偽値と比較演算子の知識は、条件分岐のコードを書く際に重要になってきますので、しっかり理解しましょう。

では次に、実際に条件分岐のコードについて見ていきます。

if文

if文を用いると、「もし〜ならば、〜を行う」という条件分岐のプログラムを書くことができます。書き方は以下の通りです。

index.js

if (条件式) {
  処理
}

ifの後ろの条件式がtrueのとき、{ }の中の処理が実行されます。
処理は**インデント（字下げ）**します。文末のセミコロンは不要です。

実際のコードを見てみます。

index.js

const number = 22;
if (number > 20) {
  console.log('numberは20より大きいです');
}
//出力結果 : numberは20より大きいです

ここではnumberは22であり、条件式がtrueとなるので処理が実行されます。

仮にconst number = 18と宣言すると、number > 20という条件式を満たさなくなるので、コンソールには何も出力されません。

else

elseを用いると条件が成り立たなかった場合に別の処理を行うことができます。
つまり、条件式がfalseの場合の処理を決められます。

**「もし〜ならば〜を行う、そうでなければ〜を行う」**というように処理を実行することができます。

書き方は以下の通りです。

index.js

if (条件式) {
  条件式がtrueの時の処理
} else {
  条件式がfalseの時の処理
}

if文の後ろにelseと書き、{ }の中に処理を書きます。

実際のコードは次のような感じになります。

index.js

const number = 19;
if (number > 20) {
  console.log('numberは20より大きいです');
} else {
  console.log('numberは20以下です'};
}
//出力結果 : numberは20以下です

コードを見ていくと、まずifの後ろの条件式でnumberと20を比較します。
今回は、numberには19が代入されていて、これは20より小さいのでfalseとなりifブロックの中の処理は実行されずにスルーされます。
よって、elseブロックに書かれている処理が実行されます。

else if

さらに条件を追加したい場合にはelse ifを用います。ifとelseの間にelse if (条件) {処理}を追加することで条件分岐を増やすことができます。

index.js

if (条件式1) {
  条件式1がtrueの時の処理
} else if (条件式2) {
  条件式1がfalse、条件式2がtrueの時の処理
} else {
  どちらの条件式もfalseの時の処理
}

書き方は、これまでと大体一緒ですね。

index.js

const number = 19;
if (number > 20) {
  console.log('numberは20より大きいです');
} else if (number > 10) {
  console.log('numberは10より大きいです');
} else {
  console.log('numberは10以下です'};
}
//出力結果 : numberは10以下です

こちらもコードを見ていきます。

まずifの後ろの条件式でnumberと20を比較します。
今回は、numberには19が代入されていて、これは20より小さいのでfalseとなり、ifブロックの中の処理は実行されずにスルーされます。

次に、else ifの後ろの条件式でnumberと10を比較します。
numberには19が代入されていて、これは10より大きいのでtrueとなり、else ifブロックの中の処理が実行されます。

else ifブロックの処理が実行されるので、その後ろのelseブロックの処理は行われません。

このように、if文では、上から順番に条件式を判定していき、最初にtrueになったブロックの処理だけが実行されます。
この性質を理解して、条件式を正しい順番で書くようにしましょう。

複数の条件式

&&や||を用いることで、複数の条件式を組み合わせることができます。

&&は**「かつ」**に相当し、条件式1 && 条件式2と書くことで複数の条件式全てがtrueであれば全体がtrueになります。

一方、||は**「または」**に相当し、条件式 || 条件式2と書くことで複数の条件式のいずれかがtrueであれば全体がtrueになります。

実際のコードを見てみましょう。

index.js

//例１） &&を用いたif文
const number = 21;
if (number % 3 === 0 && number % 4 === 0) {
  console.log('numberは3の倍数かつ4の倍数です')
} 
//何も出力されない

//例２） ||を用いたif文
if (number % 3 === 0 || number % 4 === 0) {
  console.log('numberは3の倍数または4の倍数です')
}
//出力結果 : numberは3の倍数または4の倍数です

例1では、条件式の部分でnumberに代入された21が**「3で割り切れるのかどうか」と「4で割り切れるのかどうか」**を判定しています。
当然、21は3で割り切れますが、4では割り切れません。
つまり、片方の条件式しか満たしていないため、ifブロックの処理は実行されません。

例2でも、例1と同じ条件でnumberを判定しています。
21は3で割り切れるため、片方の条件を満たしています。
よって、ifブロックの処理が実行され、コンソールに文字が出力されます。

Switch文

switch文を用いると、ある値によって処理を分岐することができます。

まずは書き方を見てみましょう。

index.js

switch (条件の値) {
  case 値1:
    条件値と値1が等しい時の処理
    break;
  case 値2:
    条件値と値2が等しい時の処理
    break;
  default:
    どの条件にも合致しなかった時の処理
    break;
}

コードの流れにとしては、まず条件の値に、定数や変数などを指定します。その後{ }の中にcaseを追加して処理を分けます。

caseの後に書く値と条件の値が等しい時、指定した処理を行います。

break;はswitch文を終了する命令になります。
breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまいます。

どのcaseにも一致しなかった時の処理、defaultのブロックが実行されます。if文で言うelseのようなものです。

分岐が多くなった場合、if文に比べてシンプルで読みやすいコードになります。

具体的なコードを見てみましょう。

index.js

const customerCategorization = '大人'
switch (customerCategorization) {
  case 'シニア':
    console.log('食べ放題料金は2000円です');
    break;
  case '大人':
    console.log('食べ放題料金は3000円です');
    break;
  case '小人':
    console.log('食べ放題料金は1500円です');
    break;
  default:
    console.log('正しい値を入力してください');
    break;
}
//出力結果 : 食べ放題料金は3000円です

コードをみていきます。

まず、1行目で定数が宣言され、customerCategorizationには大人が代入されています。

具体例のswitch文では、customerCategorizationの値を比較していきます。

まず、一つ目のcaseでは、customerCategorizationとシニアを比較します。当然、一致していないので処理は実行されません。

次に、二つ目のcaseで、customerCategorizationと大人を比較します。これは、一致してtrueとなるので、処理が実行され、コンソールには大人の食べ放題料金が出力されます。

switch文は、if文と同じように、最初に一致した条件の処理のみ実行されるので、以降の処理はスルーされます。

まとめ

今回は、JavaScriptでの条件分岐について簡単にまとめてみました。

読んでいただきありがとうございました。では。