JavaScriptの条件分岐について

2020年12月29日2021年5月3日JavaScript

JavaScriptで条件分岐が使えるようになると、簡単なゲームを作成できるようになります。
また、WebサイトやWebアプリを作成する上で、必ず使う基礎知識になるので、しっかりと学んでいきましょう。

条件分岐（if構文）

条件分岐というのは、条件を設定し、その条件に正しければ次の処理をする、そうでなけらば次の処理をすると、条件によって処理するプログラムを変更することができます。

具体的な書き方を見ていきましょう。

条件分岐（if構文）の使い方

if(条件式) {
  trueのときの処理
  }
  

これがif構文の基本の形です。
「条件式がtrueであれば、trueのときの処理をする」という意味になります。

たとえば、がずお君のテストの点が65点だったとして、60点以上を取ったら褒めてあげる約束をしていたとしましょう。
そのとき、次のように書くことができます。

'use strict';

const score = 65;

if (score >= 60) {
  console.log('よくできました！');
}

if-else構文

if文に、条件と違う場合の処理を書き方場合、次のようにelseを使います。

if (条件式) {
  trueだったときの処理
} else {
  falseだったときの処理
}

たとえば、がずお君のテストの点が40点だったとして、60点以上を取ったら褒めて、それより下の場合は励ましてあげる約束をしていたとしましょう。
そのとき、次のように書くことができます。

'use strict';

    const score = 40;
    
    if (score >= 60) {
      console.log('よくできました！');
    } else {
      console.log('もう少しだね！次も頑張ろう！');
    }

if-else if-else構文

if文に条件を複数設定したい場合、else ifでつなげて条件を分岐させることができます。

if (条件式A) {
  Aがtrueだったときの処理
} else if (条件式B) { 
  AがfalseでかつBがtrueだったときの処理
} else {
  それ以外の場合の処理
}

たとえば、がずお君のテストの点が80点だったとして、80点以上だったら、ほしいおもちゃを一つ買ってあげて、60点以上を取ったら褒めて、それより下の場合は励ましてあげる約束をしていたとしましょう。
そのとき、次のように書くことができます。

'use strict';

    const score = 80;
    
    if (score >= 80) {
      console.log('すごい！好きなおもちゃを買いに行こう！');
    } else if (score >= 60) {
      console.log('よくできました！');
    } else {
      console.log('もう少しだね！次も頑張ろう！');
    }

条件演算子を使って文を短く表現してみよう

条件演算子を使うことで、if構文をもっと短く書くことができます。

条件式 ? trueの処理 : falseの処理

メリットとしては、コードが短くなることです。
デメリットとしては、コードがわかりにくくなる場合があることです。
読みやすさとのバランスを意識して記述することは大事なので、メリット・デメリットを把握した上で使いましょう。

たとえば、上で紹介したif-elseの例文を条件演算子を使って書き換えると、次のようになります。

'use strict';

    const score = 40;
    score >= 60 ? console.log('よくできました！'); : console.log('もう少しだね！次も頑張ろう！');

論理演算子

論理演算子には、次のものがあります。

• &&はANDの論理演算子
• ||はORの論理演算子
• !はNOTの論理演算子

条件が２つ以上ある場合、if構文を入れ子にして記述することができますが、どうしても複雑になってしまいます。
そこで、論理演算子を使うことで、文をよりシンプルにすることができます。
まずは、条件式を入れ子で書いた場合をみてみましょう。

たとえば、がずお君の算数のテストの点が40点だったとして、算数で60点以上を取ったら褒めてあげるとしましょう。
そのとき、次のように入れ子にして書くことができます。

'use strict';

    const score = 40;
    const test = math;

    if (score >= 60) {
      if (test === math) {
        console.log('よくできました！');
      }
    }

これは、論理演算子を使うと、次のように記述することができます。

'use strict';

    const score = 40;
    const test = math;

    if (score >= 60 && test === math) {
        console.log('よくできました！');
      }
    }

条件式が2つ程度であれば、まだ読めるのですが、3つ4つと条件が繰り返し入れ子構造で続くと、とても複雑で難解になります。だいたいの場合において、論理演算子を利用したほうがスッキリと読みやすくなります。

switch構文

if文のelse ifでつなげていく書き方は、便利ですが、else ifが多くなるとコードが複雑になってしまいます。

そのようなelse ifを複数使うケースで、かつその条件式で確認される値が全部同じ場合、switch構文を使うとスッキリさせることができます。

switch構文は何かがどうだったら、という条件を書くとき、その何かというのが同じでどうだったかという部分だけを変化させて条件式を書くことができます。

たとえば、つぎのようなelse ifを複数回記述している条件式をみてみましょう。

初心者の方は1階、中級者は2階、上級者は3階に来てほしいとします。そしてがずお君は初心者とします。

'use strict';

  const level = 'beginner';

  if (level === 'beginner') {
    console.log('初心者の方は1階へお越しください。');
  } else if (level === 'intermidiate') {
    console.log('中級者の方は2階へお越しください。');
  } else if (level === 'advanced') {
    console.log('上級者の方は3階へお越しください。');
  }

この条件式は、switch構文を使うと、次のように表現することができます。

'use strict';

    const level = 'beginner';
  
    switch (level) {
      case 'beginner':
        console.log('初心者の方は1階へお越しください。');
        break;
      case 'intermidiate':
      console.log('中級者の方は2階へお越しください。');
      break;
      case 'advanced':
      console.log('上級者の方は3階へお越しください。');
      break;
    }

一般化すると、次のようになります。

switch (比較する値) {
  case '比較対象1':
  処理内容;
  break;
  case '比較対象2':
  処理内容;
  break;
  case '比較対象3':
  処理内容;
  break;
  }
  

また、比較対象の処理が同じ場合、次のように記述できます。

switch (比較する値) {
  case '比較対象1':
  処理内容;
  break;
  case '比較対象2':
  処理内容;
  break;
  case '比較対象3':
  case '比較対象4':
  処理内容;
  break;
  }

そしてどれにも当てはまらない場合の処理内容を書きたいときは、最後にdefaultでデフォルト値を設定することができます

switch (比較する値) {
    case '比較対象1':
    処理内容;
    break;
    case '比較対象2':
    処理内容;
    break;
    case '比較対象3':
    処理内容;
    break;
    default:
    処理内容;
    break;
    }
    

defaultにはbreakは必ずしも必要ではありませんが、そのほかの分の最後には処理を終えるために必ずbreakを入れましょう。