【プロゲート復習】Javascriptで条件分岐を行う

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • if文を使った条件分岐
  • if else を使った条件分岐
  • 3条件以上の分岐処理

対象読者は、次のような方を対象としています。

Javascriptで条件分岐の勉強がしたい

Progateで学んだ事を復習したい!

前回は、真偽値について学習しました。

今回は条件分岐についてです。前回の真偽値がモロに影響してきますね!

前回のおさらい

前回は真偽値について学びました。trueは真(正しい)falseは偽(間違っている)でしたね!

たしか真偽値には、trueとfalseの2通りしかないんだよね!

その通りです!真偽値と合わせて比較演算子を学びましたね。値同士の比較を行い、真偽値に変換されるものでした!

↓サンプルコード

var number = 20;
console.log(number < 20);
console.log(number <= 20);
console.log(number > 10);

さぁ、真偽値と比較演算子は大体わかったから、条件分岐いってみよー!

Javascriptで条件分岐を行う

プログラミングの条件分岐は現実と同じだと前回お話しましたね。

もし晴れたら、外で遊ぼう。雨が降れば、中でゲームしよう。

もし年収が上がるなら、転職しよう。年収が上がらないなら、今の会社にいよう。

こんな感じで、『ある条件が成り立つときだけある処理を行う』ことを条件分岐と呼びます。

これをプログラムで表すときに用いるのが、if文というわけです。

if文を使うと『もし〇〇なら、●●を行う』という条件分岐が可能になります!

実際にコードをみていきましょう。

var age = 23;

if(age >= 20){
    console.log("お酒が飲めます");
}

ageに23が入っているので、if文の条件がtrueになり、{}の処理が実行されていますね。

では、ageを20未満にしてみてください。ログ出力がされないはずです。

if文では、()内の条件がtrueの時にだけ、{}内の処理を実行する

条件が成り立たない時の処理

さっきは、ageが20未満なら特に何も起こりませんでした。

しかし、条件が成り立たない時に別の処理を行いたい場合があると思います。

例えば、ageが20未満の場合に、注意喚起を促す文言を表示したいとしましょう。

var age = 23;

if(age >= 20){
    console.log("お酒が飲めます");
}else{
    console.log("お酒は二十歳になってから!");
}

では、最初のageを20未満にすると、、??

var age = 18;

ちゃんと怒られましたね。こんな感じで、elseを使って、条件を満たさなかった時の処理がかけます。

if ~ else 文では、条件を満たすか否かで、2通りの分岐ができるようになります

3条件以上の分岐

条件分岐をする際に、2通りとは限りませんよね?

転職か、独立か、起業か、会社存続か、みたいに3つ以上に分岐する場合があります。

その場合、 ifとelseだけでは物たりません。さらに条件を加える必要があります。

そこで else if の出番です。else if を使うと

『もし○○なら●●する、そうでなくもし△△であれば▲▲を行う。いずれでもなければ■■を行う』

こんな感じ!ややこしいですね笑

コードでみた方がイメージが掴みやすいかもしれません。

var age = 14;

if(age >= 20){
    console.log("お酒が飲めます");
}else if(age < 20 && age >=10){
    console.log("お酒は二十歳になってから!");
}else{
    console.log("10歳未満はミルクでも飲んでてね♪");
}

この例の場合、真ん中の条件がtrueになるので、二十歳になってからと表示されます。

真ん中の条件は、『10以上20未満』だね! 10未満の数字をageに入れるとミルクの文章が出てきます。まずはやってみてください!

3条件以上になると、if文ではややこしくなってきますよね、、そんな時はswitch文がおすすめです。

switch文は()内の式または変数case値と一致した時に、そのブロックが実行されます。

caseのどれにも一致しなければ、defaultが実行されます。

また、caseブロックの最後には、break命令を指定します。break命令はブロックから脱出するための命令です。

breakがないと後ろのブロックも続けて実行されてしまいます

var dream = "海賊王"
switch(dream){
    case "火影":
        console.log("ナルトです。");
        break;
    case "海賊王":
        console.log("ルフィです");
        break;
    case "新世界の神":
        console.log("夜神月です");
        break;
    default:
        console.log("その夢は却下します");
}
switch文の登場人物は、caseとdefaultとbreakです。慣れるとすごい便利なのでどんどん使っていきましょう!

最初のうちは条件分岐しまくろう!

以上、今回の内容をおさらいします。

  • if文で、条件を満たす時のみ実行する命令を実装
  • if ~ else文で2条件分岐を実装
  • if ~ if else文で3条件以上の分岐も実装
  • switch文で、3条件以上の分岐処理をシンプルに書く

こんな感じ!細かい書き方はあとで覚えれます。

大切なのは、if文でどんなことが可能なのか?と本質を考えることです。

例えばゲームを作る時、『もし忍者なら、初期装備に手裏剣を持たせる』と実装できます。

webサイトを作る時に『もし有料会員なら、限定動画を表示し、無料会員なら一般動画を表示し、未会員なら登録を促す』といった会員サイトも実装することが可能です。

このif文というのは、とんでもないパンチ力を持っているのです。根っこの知識です。

最初のうちは、条件分岐をとことん体験していきましょう!

コメント