forとif-else ifと配列を組み合わせよう

01 / 06

JSコースの集大成

最後は for × if-else if × 配列。全要素を三択以上に分類するパターンだよ。

成績のABC、サイズのSML、料金の三段階……現実の分類はたいてい三択以上。これが書ければ、JSの基礎は卒業だ。

02 / 06

形はぜんぶ知っている

for 文の中に if-else if を入れるだけ。新しい文法は何もない。

知っている道具の組み合わせで、できることが爆発的に増える——プログラミングのいちばん楽しいところだよ。

let scores = [95, 75, 40];for (let i = 0; i < scores.length; i++) {  if (scores[i] >= 90) {    console.log("A");  } else if (scores[i] >= 70) {    console.log("B");  } else {    console.log("C");  }}

実行結果

A
B
C

03 / 06

三段階のカウント

カウンターを3本用意すれば、各ランクの人数も一度のループで数えられる。

集計・分類・表示——アプリの画面はこの組み合わせでできている。

let scores = [95, 75, 40, 88];let a = 0;let b = 0;let c = 0;for (let i = 0; i < scores.length; i++) {  if (scores[i] >= 90) {    a = a + 1;  } else if (scores[i] >= 70) {    b = b + 1;  } else {    c = c + 1;  }}console.log(a);console.log(b);console.log(c);

実行結果

1
2
1

04 / 06

条件を書く順番が大事

else if は上から順に判定され、最初に当てはまったところで止まる。だから条件の順番を変えると結果が変わるよ。

下の例では >= 70 を先に書いてしまったので、95点も「B」になってしまう。きびしい条件から先に書くのが基本だよ。

let scores = [95, 75];for (let i = 0; i < scores.length; i++) {  if (scores[i] >= 70) {    console.log("B");  } else if (scores[i] >= 90) {    console.log("A");  }}

実行結果

B
B

05 / 06

最後の else で取りこぼしを防ぐ

最後を else にしておくと、どの条件にも当てはまらなかったものを必ず受け止められる。

else if だけで終わらせると、想定外の値が来たときに何も表示されない。「1件だけ出力が足りない」というときは、ここが原因のことが多いよ。

06 / 06

この先へ

ここまでで「データを持つ・判断する・繰り返す」の3つの力がそろった。

この3つは、どんなプログラムにも出てくる骨組みだよ。この先で新しい文法を覚えても、やっていることはこの組み合わせのままだ。

次は HTML & CSS で画面を作り、その先で JS と組み合わせて動くページを作る。TODOアプリまで、あと少しだよ。