③ 条件によって処理を分けよう

今回は条件分岐だ。条件によって実行する処理を変えるには if を使う。

const budget = 100;
const orangePrice = 80;

if (budget >= orangePrice) {
  console.log('オレンジを買えます');
} else {
  console.log('予算が足りません');
}

100 >= 80 は正しいので、最初のメッセージが表示されますね。

そう。>= は「左が右以上か」を調べる比較演算子だ。条件が成り立てば if 側、成り立たなければ else 側を実行する。

ここで大事なのは、比較そのものが値になるということだ。

const canBuy = budget >= orangePrice;

console.log(canBuy);

true と表示されました。条件にも名前をつけられるんですね。

true と false の2つしかない値だ。if は、この値を見てどちらへ進むかを決めている。

等しいかどうかは = で調べますか？

= は代入だ。等しいか比べるときは ===、異なるか比べるときは !== を使おう。

const role = 'admin';

if (role === 'admin') {
  console.log('管理画面を表示します');
} else if (role === 'editor') {
  console.log('編集画面を表示します');
} else {
  console.log('閲覧のみです');
}

else if を挟めば、選択肢を増やせるんですね。

上から順に確かめて、最初に成り立ったところだけを実行する。だから条件を書く順番にも意味があるよ。

条件どうしを組み合わせることもできる。&& は両方、|| はどちらか一方が成り立つかを調べる。

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log('入場できます');
}

条件式を上から読めば、プログラムがどちらへ進むか追えそうです。

その感覚が大切だよ。条件を日本語に置き換えながら読むと分かりやすい。次は、繰り返し使う処理をひとまとめにしよう。