広告スペース(バナー)
🟨JavaScript レッスン
基本文法の基礎8
データ構造とオブジェクト指向8
構文の基本を深める9
関数とデータ構造の応用9
アルゴリズムとテストの基礎8
文字列・数値操作の応用8
実務で役立つ機能8
アルゴリズム練習問題10
レッスン 3 / 69

条件分岐(if文)

このレッスンでは、JavaScriptのif文の書き方を身につけ、「もし〜なら」という条件によって処理を分岐できるようになることを目標にします。「JavaScript if文 書き方」で検索して学びたい方向けの、条件分岐の入門レッスンです。

if文は、条件がtrue(正しい)のときだけ中身を実行する構文です。if (条件) { 処理 } else { 処理 }という形で書き、条件がfalseのときはelseの中身が実行されます。人間が日常で行う「もし雨なら傘を持つ」という判断を、そのままプログラムに翻訳したものだとイメージすると理解しやすいです。else ifを重ねれば、3つ以上の分岐も表現できます。

サンプルコードではscoreという変数の値によって、3段階のメッセージを出し分けています。比較には>=(以上)・>(より大きい)・===(等しい)などの比較演算子を使います。上から順に条件が評価され、最初にtrueになった条件のブロックだけが実行される点も、if文を理解するうえで重要なポイントです。

初心者がよくつまずくのが、等しいかどうかを判定するときに=(代入)と===(比較)を間違えるミスです。=を使うとエラーにならないまま意図しない動作になることがあるため注意しましょう。また条件の順番を間違えると、本来届いてほしくない分岐に先に一致してしまうこともよくある原因です。

実際の開発現場では、ログイン状態によって表示を切り替えたり、入力値が正しいかを判定したりと、if文はほぼすべてのプログラムで使われる基本構文です。条件分岐を正確に書けるかどうかは、バグの少ないコードを書くための土台になります。

さらに、if文は入れ子(ネスト)にすることもでき、「まず年齢を確認し、その中でさらに会員種別を判定する」といった複数段階の条件分岐も表現できます。ただしネストが深くなりすぎると読みにくくなるため、条件が複雑になってきたら関数として切り出すなどの工夫も検討しましょう。

比較演算子には===(厳密等価)のほかに==(等価)もありますが、==は型が違っても自動変換して比較してしまうため、意図しない結果を招きやすく、実務ではほぼ常に===を使うのが基本ルールとされています。

JavaScript
OUTPUT / 実行結果

💡 console.log() の内容が実行結果に表示されます。

🎯
ここまでできればゴール達成!
点数に応じて「合格」「不合格」を判定するようなプログラムが作れるようになります。
広告スペース(バナー)
広告スペース(記事内)