条件分岐

if文

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

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

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

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

Boolean

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

条件式

比較演算子

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

比較演算子条件式意味
>A > BA が B より大きいとき true
>=A >= BA が B 以上のとき true
<A < BA が B より小さいとき true
<=A <= BA が B 以下のとき true
===A === BA が B と等しいとき true
!==A !== BA が B と等しくないとき true

if文を使ってループさせる

sketch.js
let x = 200;
let y = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  x += 0.5;

  // x がキャンバスの横幅を超えたらゼロに戻す
  if (x > 400) {
    x = 0;
  }

  background(220);
  noStroke();
  fill(0, 205, 129);
  circle(x, y, 100);
}

yの値もx同様にアニメーションさせ、円が斜めにループするようにしましょう！

if else文

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

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

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

if else文を使って円がキャンバスの左半分にあるときと、右半分にある時で色を変えてみましょう！

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 {
  // それ以外
}

else if文を使ってxの移動に応じて円の色が3色以上に変化するようにしてみましょう！

変数 繰り返し