【Java Script】if文などの条件分岐とswitch文【文法】

きなこ
きなこ

ifって英語の「もし〇〇なら××する」とおんなじなの?

こばゆた
こばゆた

うん。それを難しく言ったのが条件分岐って話

また真偽値と比較演算子を踏まえて今回の内容をやっていくのでリンクも貼っておきます

スポンサーリンク

1.条件分岐

英語の”if”と同じで「もし〇〇なら××する」という分岐がJava Scriptでも使えます。

1-1.if文

if(条件){
  //条件が成り立つ時(true)の処理
}

ifの後ろの( )内に条件を書き、これを満たした時の処理を{ }内に書きます。

ちなみの文末にセミコロンは不要です。


if(true){
  console.log('条件を満たしています!');
}
出力結果条件を満たしています!

条件が満たされているので文章が実行されています。

if(false){
  console.log('条件を満たしています!');
}
出力結果(条件を満たしていないので何も出力されません)

こちらは条件が満たされていませんので何も出力されません。

こばゆた
こばゆた

例を出すと…

const height = 180;
if(height > 170){
  console.log('彼は身長が170cmより高い');
}
出力結果彼は身長が170cmより高い

定数が宣言されており、条件がこれを満たしているので実行されます。

チャッピー
チャッピー

条件を満たしていない時はどうしたらいいの?

こばゆた
こばゆた

そういう時は次に紹介するelse文を使うんだ

1-2.else文

条件が”false”の時の処理をさせたい時は”else“を使います。

if(条件){
  //条件式が成り立つ時(true)の処理
}else{
  //条件が成り立たない時(false)の処理
}

if(false){
  console.log('条件を満たしています!');
}else{
  console.log('条件を満たしていません!');
}
出力結果条件を満たしていません!

条件を満たしていないので”else”の方が実行されています。

きなこ
きなこ

ようやく分岐っぽくなってきたね

こばゆた
こばゆた

こちらも例を出すと…

const height = 160;
if(height > 170){
  console.log('彼は身長が170cmより高い');
}else{
  console.log('彼は身長が170cmより低い');
}
出力結果彼は身長が170cmより低い

条件式を満たさないので”else”の処理が実行されています。

1-3.else if文

チャッピー
チャッピー

この分岐って”yes”か”no”しかできないの?

こばゆた
こばゆた

条件を増やしてもっと分岐させたい場合は”else if”を使うんだ

if(条件A){
  /*条件Aがtrueの処理*/
}else if(条件B){
  /*条件Aがfalse、条件Bがtrueの処理*/
}else{
  /*どちらの条件も成り立たない時(false)の処理*/
}

“else if( )”と書いて( )内に条件を入れればOKです。


const height = 190;
if(height > 200){
  console.log('彼は身長が200cmより高い');
}else if(height >= 190){
  console.log('彼は身長が190cmより高い');
}else{
  console.log('彼は身長が190cmより低い');
}
出力結果彼は身長が190cmより高い

条件だと定数”height”が”190″とされているので条件Aが”false”で条件Bが”true”なので”else if”の処理が実行されています。

またif文は上から処理されていきます

1-4.理論演算子「かつ」、「または」

const name = 'たけし';
const age = 20;
if(name === 'たけし'){
  if(age === 20){
    console.log('たけし君は20歳です');
  }else{
    console.log('たけし君は80歳です');
  }
}
/*nameが"takeshi"でageが20の時処理をする*/
出力結果たけし君は20歳です

このように複数の条件を指定したい時はif文を入れ子にして分岐をすることもできますが特定の記号を使って簡単に書く事ができます。

a.「かつ」

“&&”を使うと全ての条件を満たす時に”true”の処理をします。

const name = 'たけし';
const age = 20;
if(age === 20 && name === 'たけし'){
  console.log('たけし君は20歳です');
}else{
  console.log('たけし君は80歳です');
}
出力結果たけし君は20歳です

両方の条件を満たしているので”true”の処理をします。

こばゆた
こばゆた

ちなみに片方だけ満たした場合だと…

const name = 'たけし';
const age = 20;
if(age === 35 && name === 'たけし'){
  console.log('たけし君は20歳です')
}else{
  console.log('たけし君は80歳です')
}
出力結果たけし君は80歳です
こばゆた
こばゆた

条件を満たさないので”false”の処理になります

b.「または」

“||”を使うと条件を1つでも満たせば”true”の処理をしてくれます。

const name = 'たけし';
const age = 20;
if(age === 20 || name === 'たけし'){
  console.log('たけし君は20歳です')
}
出力結果たけし君は20歳です

両方とも満たすので文句なしに”true”の処理をします。

const name = 'たけし';
const age = 20;
if(age === 35 || name === 'たけし'){
  console.log('たけし君は20歳です')
}else{
  console.log('たけし君は80歳です')
}
出力結果たけし君は20歳です

“&&(かつ)”の時には”false”の処理をしていましたが”||(または)”の場合では片方を満たしているので”true”の処理がされています。

こばゆた
こばゆた

これらの記号を理論演算子と言いまとめると以下の通りです

演算子意味
&&(かつ)
英語だとand
全ての条件を満たせば”true”の処理をし、1つでも満たさないと”false”の処理をする
||(または)
英語だとor
1つでも条件を満たせば”true”の処理をする
スポンサーリンク

2.switch文

const signal = 'red';
if(signal === 'red'){
  console.log('止まれ!');
}else if(signal === 'yellow'){
  console.log('注意!');
}else if(signal === 'green'){
  console.log('気をつけて進みましょう!');
}
出力結果止まれ!

条件に(signal === ‘red’)、(signal === ‘yellow’)など書くのは見栄えも悪くなり面倒なところでもあります。

こばゆた
こばゆた

そんな時に便利なのがswitch文です

switch(条件){
  case 値A :
    //条件と値Aが同じの場合の時に処理を行う
  break;
  ...続けて書くことができる
}

先ほどのif文をswitch文に書き換えると…

const signal = 'green';
switch(signal){
  case 'red':
    console.log('止まれ!');
  break; 
//signalの値が'red'の時'止まれ!'と出力する
  case 'yellow':
    console.log('注意!');
  break; 
//signalの値が'yellow'の時'注意!'と出力する
  case 'green':
    console.log('気をつけて進みましょう!');
  break; 
//signalの値が'green'の時'気をつけて進みましょう!'と出力する
}
出力結果気をつけて進みましょう!

この例の場合は定数’signal’の値が’green’なので’気をつけて進みましょう!’と出力されています。

またどれにも当てはまらない場合の処理も作成する事ができその場合は以下の様に書きます。

default:
  //どれにも当てはまらない場合の時に処理を行う
break;
const signal = 'black';
switch(signal){
  case 'red':
    console.log('止まれ!');
  break;
  case 'yellow':
    console.log('注意!');
  break;
  case 'green':
    console.log('気をつけて進みましょう!');
  break;
  default:
    console.log('どうしましょう');
  break;
//どれにも当てはまらないのでdefaultの値が出力される
}
出力結果どうしましょう

条件に合うものがないので’default’の値が出力されています。

なおこちらも必ず’break’で閉じるのを忘れない様にしましょう。

こばゆた
こばゆた

ちなみに閉じ忘れると

const signal = 'red';
switch(signal){
  case 'red':
    console.log('止まれ!');
  case 'yellow':
    console.log('注意!');
  case 'green':
    console.log('気をつけて進みましょう!');
  default:
    console.log('どうしましょう');
    break;
}
出力結果

“break”がでるまで処理が出続けます。

条件を増やすこともできます。

const signal = 'red';
switch(signal){
  case 'red':
    console.log('止まれ!');
  case 'yellow':
    console.log('注意!');
  case 'green':
  case 'blue'; //'blue'を追加
    console.log('気をつけて進みましょう!');
  default:
    console.log('どうしましょう');
    break;
}
出力結果気をつけて進みましょう!

‘green’でも’blue’でも同じ答えが返ってきます。

こばゆた
こばゆた

最後に応用ですが、条件文を入れ子にして組み合わせることもできます。

const age= 20;
const drink = 'sake';
if(age >= 20){
  switch(drink){
    case 'beer':
      console.log('つまみは枝豆が良いですね');
    break;
    case 'wine':
      console.log('つまみはチーズが良いですね');
    break;
    case 'sake':
      console.log('肴は炙ったイカが良い');
    break;
    default:
      console.log('beerかwineかsakeで選んでね');
    break;
  }
}else{
  console.log('お茶をどうぞ');
}
出力結果肴は炙ったイカが良い

3.まとめ

条件分岐 まとめ

if文

if(条件){
  //ここに条件が成り立つ時(true)の処理を書く
}
if(条件){
  //ここに条件が成り立つ時(true)の処理を書く
}else{
  //ここに条件が成り立たない時(false)の処理を書く
}
if(条件A){
  //ここに条件Aがtrueの処理を書く
}else if(条件B){
  //ここに条件Aがfalse、条件Bがtrueの処理を書く
}else{
  //ここにどちらの条件も成り立たない時(false)の処理を書く
}

const height = 190;
if(height > 200){
  console.log('彼は身長が200cmより高い');
}else if(height >= 190){
  console.log('彼は身長が190cmより高い');
}else{
  console.log('彼は身長が190cmより低い');
}
出力結果彼は身長が190cmより高い

理論演算子

  • “&&(かつ)”は条件を全て満たした時に”true”、”||(または)”は条件を1つでも満たした時に”true”となる。
演算子意味
&&(かつ)
英語だとand
全ての条件を満たせば”true”の処理をし、1つでも満たさないと”false”の処理をする
||(または)
英語だとor
1つでも条件を満たせば”true”の処理をする
const num = 10;
console.log(num >= 5 && 20 > num); //条件を両方満たすのでtrueを返す
出力結果true

switch文

switch(条件){
  case 値A :
    //条件と値Aが同じの場合の時に処理を行う
  break;
  ...続けて書くことができる
}
default:
  //どれにも当てはまらない場合の時に処理を行う
break;

const signal = 'black';
switch(signal){
  case 'red':
    console.log('止まれ!');
  break;
  case 'yellow':
    console.log('注意!');
  break;
  case 'green':
    console.log('気をつけて進みましょう!');
  break;
  default:
    console.log('どうしましょう');
  break;
//どれにも当てはまらないのでdefaultの値が出力される
}
出力結果どうしましょう

コメント