if命令[JavaScript本格入門]__WebデザイナーのJS学習備忘録

はじめに

初めてのQiitaへの記事の投稿となります。
普段から皆さんの記事を学習やタスクでの参考とさせていただいております。

最近はJavaScriptの学習をしているものの学びの効率がいいのか疑問に感じています。
やはり学習内容をまとめることで知識が体系化され、また疑問点や皆さんのコメントから学びを得られるだろうと考え初投稿することにしました。

2019年10月よりWebデザイナーとして未経験から就職してまだ弱々ですが、コツコツ学習しながらQiitaに記事を投稿していこうと思います。

学習に使用している書籍は「JavaScript本格入門」で、Qiitaでも多くの方がおすすめされていたので購入しました。
かなり分厚い書籍なので個人的に必要な箇所をぎゅっと凝縮して発信していきます。また常に書籍を持ち歩くのは大変なので書籍の内容を電子上にアップしておけば便利だなと思っております。

初投稿の内容は条件分岐構文となります。

条件分岐構文 - if命令とswitch命令

JavaScriptでは、処理を分岐する命令としてif命令とswitch命令の2つを用意している。

if命令

if命令は「もし~だったら...、そうでなければ...」という構造で表現するためのもので、trueまたはfalseのいずれかによって、対応する命令を実行する構文である。

▼ if命令 - 構文

script.js

if(条件式) {
　条件式がtrueの場合に実行する命令
} else {
  条件式がfalseの場合に実行する命令
}

ではサンプルを見ていきましょう。

▼ サンプルコード

script.js

var x = 15;
if(x > 10) {
  console.log("変数xは10以上です。");
} else {
  console.log("変数xは10未満です。");
}   //結果：変数xは10以上です。

指定した変数xは15であり、最初のifの条件に合致していることから「変数xは10以上です。」がログに出力されたということです。

上記サンプルコードでは、elseブロックを指定しているが、もし変数xが10以上の場合だけ処理を実行したい場合にはelseブロックを省略することも可能。

▼ サンプルコード

script.js

var x = 15;
if(x > 10)  {
  console.log("変数xは10以上です。");
}   //結果：変数xは10以上です。

else ifブロックによる多岐分岐

▼ if...else if命令 -構文

script.js

if(条件式) {
  条件式1がtrueの場合に実行する命令
} else if(条件式2) {
  条件式2がtrueの場合に実行する命令
}
・・・
} else {
 全ての条件式がfalseの場合に実行する命令
}

else ifは必要となる分岐の数で列記することができる。

▼ サンプルコード

script.js

var x = 30;
if(x >= 20) {
  console.log("変数xは20以上です。");
} else if(x >= 10) {
  console.log("変数xは10以上です。");
} else {
  console.log("変数xは10未満です。");
}   //結果：変数xは20以上です。

ポイント
if命令では、複数の条件に合致する場合にも、実行されるブロックは最初の一つだけ。

そのため、条件式「x >= 20」も「x = 10」も条件を満たしているものの、最初の条件式「x >= 20」に合致した時点で処理が実行されたということ。

if命令は入れ子構造も可能

if命令は互いに入れ子にすることで、より複雑な条件分岐を指定することもできる。
制御命令を入れ子にすることを、ネストするともいう。

コードの可読性の観点から、あまりに深いネスト構造を採用するのは避けるべき。
ネストの深さに応じて適切なインデント(段落）をつけて、コードの可読性に意識することを心がけるべき。

▼ サンプルコード

script.js

var x = 30;
if(x >= 10) {
if(x >= 20) {
    console.log("変数xは20以上です。");
  } else {
    console.log("変数xは10以上20未満です。");
  }
} else {
  console.log("変数xは10以上です。");
}   //結果：変数xは20以上です。

中カッコは省略可能

ブロックの中の命令が１文である場合は、中カッコ{...}を省略することができる。
ただ、ブロックの範囲が不明確になり、バグが起こる原因になりやすいことから省略することはおすすめしない。

script.js

var x = 15;
if(x >= 10) 
 console.log("変数xは10以上です。");
else 
 console.log("変数xは10未満です。");

ポイント
中カッコを省略した場合、elseブロックは直近のif命令に対応したと見なされる

switch命令

• switch命令は、「同値演算子による多岐分岐」に特化した条件分岐命令。
• breakは現在のブロックから処理を脱出するための命令。
• 条件に合致するcase句に処理を移動するだけで、その句を終えても、自動的にswitchブロックを終了するわけではない。

▼ switch命令 - 構文

script.js

switch(式）{
 case 値1:
  「式＝値１」である場合に実行される命令（群）
 case 値2:
  「式＝値２」である場合に実行される命令（群）
 ・・・
 default:
  式の値がすべての値に合致しない場合に実行される命令（群）
}

switch命令での処理の流れ

1. 先頭の式をまず評価
2. 1.の値に一致するcase句を実行
3. 一致するcase句が見つからない場合には、最終的にdefault句を呼び出す

※default句は必須ではないものの、どのcase句にも合致しなかった場合の挙動を明確にするためにも省略するべきではない。

▼ サンプルコード

script.js

var rank = B;
switch(rank) {
  case 'A':
    console.log("Aランクです。");
    break;
  case 'B':
    console.log("Bランクです。");
    break;
  case 'C':
    console.log("Cランクです。");
    break;
  default:
    console.log("ランク外です。");
    break;
}   //結果：Bランクです。

break命令を略記するフォールスルー

意図的にbreak命令を略記して、複数のブロックを続けて実行することをフォールスルーという。
この書き方はコードの流れがわかりにくくなる原因になることから、基本的には避けるべきであるが、例外としてフォールスルーでコードを記述するケースがある。

script.js

var rank = 'B';
switch(rank) {
  case 'A':
  case 'B':
  case 'C':
    console.log("合格！");
    break;
  case 'D':
    console.log("不合格...");
    break;
}   //結果:合格！

変数rankがA,B,Cである場合に、「合格！」を、Dの場合に「不合格...」というメッセージをログに出力する。

最後に

JavaScript含めプログラミングにおいて制御構文は必須事項なのできちんと理解する必要がある。

JavaScript本格入門を学習していると、おすすめしていないコードも記載されていて、「書くべきでないなら別に読まなくていいや〜」と考えがちだが、もっと複雑なコードになってくると思わぬエラーに陥ることが多く、その時に挙動に悪影響を与えるプログラムを書いていたということに気づくためにもちゃんと勉強するべきなんじゃないかなというのが個人的な考えです。

良いコードと悪いコードの違いを理解していないと、そもそも良いコードが書けないんじゃないか理論（勝手に命名）

今回は初めてのQiita投稿ということでマークダウン記法にも慣れていない状態での投稿でした。

アウトプットすることで学習の整理ができて、また理解できていない部分に気がつくきっかけになると思うので、継続してコツコツ投稿していこうと思います。