if / else if / else で段階判定
このレッスンで分かること
if / else if / elseで 3 つ以上の枝を上から順に判定できます- 最初に
trueになった枝だけが実行されます- 最小例は
if (s >= 90) return 'A'; else if (s >= 80) return 'B'; ... else return 'F';
if / else if / else で段階判定 とは
点数を 5 段階の成績 A / B / C / D / F に分類する関数を else if で書く。
if / else if / else で段階判定
前のレッスンの js-if-basic では if と else の 2 分岐を扱いました。実際のプログラムでは「合格 / 不合格」のような 2 択ではなく、段階的な判定 が必要なことが多いです。たとえば成績を A B C D F の 5 段階で出したい、温度を 寒い / 涼しい / 暑い の 3 段階で出したい、といったケースです。こうしたとき活躍するのが else if です。
「もし 90 点以上なら A、そうじゃなくて 80 点以上なら B、…」のように、上から順に条件を見て、最初にあてはまった枝だけが実行される仕組みになります。
else if の文法
基本形は次の通りです。
JavaScript
if (条件1) {
// 条件1が true のときの処理
} else if (条件2) {
// 条件1が false で条件2が true のときの処理
} else if (条件3) {
// 条件1も条件2も false で条件3が true のときの処理
} else {
// どれも false のときの処理
}if は 1 つ、else if は何個でも、else は最後に 1 つだけ書けます。JavaScript は上から順に条件を評価して、最初に true になった枝 に入ったら、そこで分岐の評価は終わりです。
上から順に評価される、というのが大事です。順番を間違えると、後ろの条件にたどり着く前に手前の条件で捕まってしまいます。
動きを追ってみる
成績を A / B / C / D / F の 5 段階に分けるとします。90 以上は A、80 以上は B、70 以上は C、60 以上は D、それ未満は F という基準です。素直に書くと次のようになります。
JavaScript
function gradeOf (score) {
if (score >= 90) {
return 'A';
} else if (score >= 80) {
return 'B';
} else if (score >= 70) {
return 'C';
} else if (score >= 60) {
return 'D';
} else {
return 'F';
}
}
gradeOf(95); // 'A'
gradeOf(72); // 'C'
gradeOf(40); // 'F'return を含む if / else if / else は、書き方として非常によく使う形です。各 return で関数を抜けるので、else if (score < 80) のように下限の条件を書かなくても済むのがポイントです。
図の判定順序を箇条書きで書き直すと、次の通りです。
score >= 90を評価する。真なら'A'を返して終了score >= 80を評価する。真なら'B'を返して終了score >= 70を評価する。真なら'C'を返して終了score >= 60を評価する。真なら'D'を返して終了- すべて偽なら
'F'を返して終了
入力と結果の対応表は次の通りです。
score | 結果 |
|---|---|
100 | 'A' |
90 | 'A' |
85 | 'B' |
72 | 'C' |
65 | 'D' |
40 | 'F' |
このように、if / else if は「ふるい」のように上から順に粗いふるいを通して、引っかかったら処理を確定させます。
別解 — 配列とループで書く
5 段階くらいまでなら else if の連鎖でも読みやすいですが、段階が増えると見通しが悪くなります。データだけ書き分ける別解もあります。
JavaScript
const thresholds = [
{ min: 90, label: 'A' },
{ min: 80, label: 'B' },
{ min: 70, label: 'C' },
{ min: 60, label: 'D' },
];
function gradeOf2 (score) {
for (const t of thresholds) {
if (score >= t.min) return t.label;
}
return 'F';
}このように「条件」と「結果」をデータに切り出すと、後から境界値を変更するのが楽になります。ただし最初は素直な
else ifで書いて、必要が出てきたらリファクタリングするので十分です。
よくある間違い
- 条件の順番を逆にする。
if (score >= 60) return 'D'; else if (score >= 90) return 'A';と書いてしまうと、100点でも'D'になります。高い条件から書く か、低い条件から書く か、方向を統一しましょう elseを書き忘れる。最後のelseがないと、どの条件にも当たらない値でundefinedが返ってきます- 範囲を
60 <= score <= 70のように書く。JavaScriptではこの書き方は意図通りに動きません。score >= 60 && score < 70のように&&で結合します
ここまでの要点
高い条件から書く。最後の else を必ず置く。範囲条件は && で結合し、a <= x <= b は使わない。
やってみよう
点数 score (0〜100 の整数) を受け取り、'A' 'B' 'C' 'D' 'F' のいずれかを返す関数 gradeOf を実装してください。境界は 90 以上 A、80 以上 B、70 以上 C、60 以上 D、それ未満 F です。else if を使って 5 つの枝に分けましょう。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は switch 文で値を一覧から選ぶ で、点数を 5 段階の成績 A / B / C / D / F に分類する関数を else if で書く を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- if / else if / else の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. if / else if / else とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- if / else if / else を使って 5 段階に分岐すること
- 戻り値は 'A' 'B' 'C' 'D' 'F' のいずれかに限定すること
- 境界値 (90, 80, 70, 60) も上の段階に含めること
入出力例
test-cases.txt
gradeOf(95) → "A"
gradeOf(90) → "A"
gradeOf(85) → "B"
gradeOf(72) → "C"
gradeOf(60) → "D"
gradeOf(40) → "F"
gradeOf(0) → "F"