条件分岐

if文

もし◯◯が△△だったら、特定の処理を実行する。という JavaScript の構文です。

前頁のケースの場合、やりたいことを上の文章に倣って書くと
「もし x が 画面幅 を超えたら、 x を 0 に戻す。」となります。

// 書き方
if (true または false) {
  // なにか処理
}

// 中の処理が一行の場合 {} を省略して一行でも記述できます
if (true または false) console.log('if');

// サンプル
if (x < 100) {
  // なにか処理
}

Boolean

true か false のどちらかしか状態を持たない真偽値のことを Boolean といいます。
if文の () の中に true が入ると {} の中の処理が呼ばれ、false が入るとスキップされます。
条件式を書くことによって動的にBooleanを返すことができます。

条件式

比較演算子

> >= < <= === !==
数値や文字列、真偽値などを比較するときに使う演算子です。
比較演算子を使って書いた式を 条件式 といいます。

論理演算子

&& || !
真偽値の AND（かつ） / OR（または） / NOT（否定） を表現できます。

if else文

if文は指定した条件に一致したときのみ中の処理を行うものでしたが、一致していない時に別の処理をさせたい場合もあります。
そんなときは if else文 を使います。

// 書き方
if (true または false) {
  // 条件が true のときの処理
} else {
  // 条件が false のときの処理
}

// サンプル
if (x < 100) {
  // x が 100 より小さいとき
} else {
  // それ以外のとき（x が 100 以上のとき）
}

三項演算子

変数への代入のみに if else 文を使う場合、代入時に三項演算子 ? : を使用する方法もあります。

// 書き方
let 変数名 = 条件式 ? trueのときの値 : falseのときの値;

// サンプル
let brightness = (x < 100) ? 255 : 0;// x が 100 より小さいときは 255、それ以外は 0

else if 文

if else 文を使えばひとつの条件に対して true / false の時の処理を割り当てることができました。
else if 文 を使用すると、if文の条件に一致しなかったパターンの中でさらに条件分岐を行うことができます。
else if 文はif文の後ろにいくつでも追加することができます。

// 書き方
if (条件1) {
  // 条件1が true のとき
} else if (条件2) {
  // 条件1が false で、条件2が true のとき
} else {
  // それ以外
}

// サンプル
if (x < 100) {
  // x が 100 より小さいとき
} else if (x < 200) {
  // x が 100 以上で 200 より小さいとき
} else {
  // それ以外
}