Ne:Code道場～JavaScript ifの巻～

はじめに

この記事ではJavaScriptのif文について、基本文法について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、if文について理解を深めてゆきましょう。

そもそも「if文」って何ニャ？

if文を用いることで、実行する処理を「切り替える」ことができます。 まずは基本文法から見てみましょう。

if (money > 0) {
  console.log(‘残金ありニャ！’);
}

このうち毎回必ず書く部分は、この通り。

if () {

}

if文を書く時に、難しいのは()の中身、つまり条件式の部分です。 なので、「if文を書かないと」となった時には、まず上記の枠組みを書き、その後腰を据えて条件式を考えるのもよいでしょう。

「条件式」って何ニャ？

一つ前の節で、()の中身が条件式と呼ばれると取り上げました。その条件式について、掘り下げてみましょう。 条件式は結果がBoolean（真偽値）になるものを書きます。 漫画にもありますが、真偽値はtrue・falseのどちらかの値で、条件式の結果の真偽値がtrueとなった時だけ、その条件式の後のブロック（波括弧の中身の処理）が実行されます。 なので上の例ですと、

// moneyには1が代入されているとします。
if (money > 0) {
  console.log(‘残金ありニャ！’);
}

money変数には1が入っているので、「1 > 0」は正しい、つまりtrueとなり、ブロック内の処理が実行され、「残金ありニャ！」と出力されます。 これがもし、money変数に0が入っているとしたら、「0 > 0」は正しくないですよね。同じ0という値に大小判定は成り立ちませんから。なのでこの判定結果はfalseとなり、ブロック内の処理はスキップされます。 上のコードでは条件を書いていますが、もしBoolean型の変数を用いてif文を書く時は、その変数の中にそもそも「true」「false」という値が入っているので、シンプルに以下のように書くことができます。

if (hasMoney) {
  console.log(‘残金ありニャ！’);
} else {
  console.log(‘スッカラカンにゃ。。’);
}

条件式考えるの難しいニャ

上のif文はシンプルなものですが、条件式を書く際に「且つ(and)」や「または(or)」などを用いて複数条件を重ねて書いたりすると、一気に難易度が高まります。 また、慣れないうちは条件式がぱっと見で分かりにくかったり、書きにくかったりすることもあるでしょう。 そんなの時オススメなのが、まずはコメントで条件式を書いてみて、その後それをJavaScriptに翻訳してみる、という手順を踏むことです。

// 1.まずは枠組みを書いたニャ
if () {

}

// 2.条件式書く前にコメントで書いてみたニャ
if () {
  // 年齢が20歳以上で、且つ、30歳未満の場合
}

// 3.コメントに沿って条件式を書くニャ
if (20 <= age && age < 30) {
  // 年齢が20歳以上で、且つ、30歳未満の場合
}

if文には「どんな種類」があるニャ？

if () {

} else if () {

} else {

}

フルセットでif文を書くと上記のようになります。ifに書いた条件以外で、別の条件を重ねたい場合はelse if、それ以外をまとめて処理したい場合はelseとなっています。 それ以外なのでelseの場合には、条件を書く用の()が着いていません。 ifは先頭に必ず1つ書きますが、else ifは何個書いても大丈夫です。 条件式も記載したサンプルコードでイメージを固めていきましょう。

if (bmi < 16) {
  // BMIの値が16未満の場合
  console.log(‘吹けば飛びそうニャ。。(ヽ'ω`)’);
} else if (bmi < 25) {
  // BMIの値が16以上〜25未満の場合
  console.log(‘身体が軽いニャ！ヽ(=´▽`=)ﾉ’);
} else if (bmi < 30) {
  // BMIの値が25以上〜30未満の場合
  console.log(‘余分な脂肪が着いて来たニャ。。(； ･`д･´)’);
} else {
  // BMIの値が30以上の場合
  console.log(‘肥満ゾーンに突入ニャ・・！Σ(ﾟдﾟlll)’);
}

思いついた条件をif-else ifでツラツラ書くニャ

上のサンプルコードのように条件が複数連なる場合は、記載する順番も意識する必要があります。 例えば上記のサンプルコードを以下のように書き換えると、BMIの値が16未満の場合という処理が決して実行されなくなります。

if (bmi < 25) {

} else if (bmi < 16) {

} else if (bmi < 30) {

} else {

}

16未満よりも前に、25未満かどうかの条件分岐があるため、16未満はこの25未満の方に吸収されてしまいます。 条件を複数書いていて、「自分が書いている特定の条件式が実行されないなぁ」という場合は、書く順番がおかしくなっていないかどうかをチェックしてみるといいでしょう。

「if文の落とし穴」にビビるニャ

上のサンプルコードで指摘した、記載する順番を気をつけなければということもそうですが、if文の条件式には、「落とし穴」が多く潜んでいます。 特に今回のように、範囲ごとに処理を切り分ける場合は、特にその「範囲の境目」が要注意ポイントです。 例えばこのコードのように、本当は16未満で書かなければいけなかった処理が、条件式をよくみてみると、16以下になっています。

if (bmi <= 16) {

}

ちょっとしたタイピングミス（未満のつもりだったけど、間違えて=をつけてしまった）や条件式の認識誤り（条件式のルールが、16未満ではなく16以下だと勘違いしてしまった）などで、落とし穴が多い「範囲の境界」は、境界値とも呼ばれています。 そんな名前がつくくらい、範囲の境界は特別な値なんですね。 なので、自分で範囲条件のif文を記載したときには、その範囲の境界の値でif文が正しく動いているかどうかなるべくチェックするようにすると良いでしょう。

終わりに

if文について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたものがこちらです。

1. しっかり基本文法を抑えるニャ
   1. 間違った文法で覚えてしまっていないか、基本の枠組みや種類にはどういうものがあったか、条件式に書けるものは何だったかなど、まずはここからの基礎知識をしっかり抑えるニャ
2. 条件式を書くのが難しい場合は、まずはコメントで考えてみようニャ
   1. 一度にやる作業を限定しつつ、JavaScriptへの翻訳力を鍛えるニャ
3. if文あるあるの落とし穴を意識することで、備えあれば憂いも減るニャ
   1. 順番や範囲の境目、落とし穴を知っておくことで、チェックの習慣にもつながるニャ

if文が書けるようになると、プログラミングの幅がぐっと広がります。プログラミングのイロハは「順次・条件分岐・繰り返し」と言われてますので、その1つの条件分岐を担うif文をしっかり身につけつつ、今後の学習に繋げてゆきましょう。