if 文の基本｜コードで実践

このレッスンで分かること

if (条件) { ... } else { ... } で 2 分岐を書けます

条件式には === を使い、= (代入) と混同しないようにします

最小例は if (n % 2 === 0) return '偶数'; else return '奇数';

if 文の基本とは

数値を受け取り、偶数か奇数かを判定して文字列で返す関数を if / else で実装する。本レッスンでは、if 文の基本の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

if 文の基本

JavaScript で「もし～なら」を表現するときは if 文を使います。プログラムは上から下に進むだけでなく、条件によって進む道を分けられます。条件によって動きを変えるためのもっとも基本的な道具が if 文です。第 3 章では === や && といった「真偽値を生む式」を見てきましたが、その真偽値をもとに分岐するのが if 文の役目になります。

「もし雨なら傘を持っていく、そうじゃなければ何も持たない」のような日常の選択を、そのままコードに書き起こすイメージです。

第 4 章では、if else switch 三項演算子 といった「分岐の道具」を一通り学びます。最初のレッスンとなるこのページでは、もっとも基本の if / else を、偶数と奇数の判定を題材にじっくり押さえます。

if / else の文法

もっとも単純な形は if (条件) { 処理 } で、条件が true のときだけブロック内が実行されます。条件が false のときに別の処理をしたいなら else を付けます。条件が複数ある場合は後の js-if-elseif で扱います。

JavaScript

const score = 80;
if (score >= 60) {
  console.log('合格');
} else {
  console.log('不合格');
}

if の丸括弧 () の中には true か false を返す式を書きます。代入の = ではなく比較の === を使うのが鉄則で、間違えると条件として常に true になることがあります。>= <= > < !== などの比較演算子も自由に組み合わせられます。

また、ブロック { ... } の中には複数の文を書けます。1 行だけならブロックを省略できますが、保守性を考えると常に {} を付けた方が安全です。

動きを追ってみる

たとえば「数値が偶数か奇数か」は剰余演算子 % を使えば一発です。2 で割った余りが 0 なら偶数、それ以外は奇数です。

JavaScript

function parityLabel (n) {
  if (n % 2 === 0) {
    return '偶数';
  } else {
    return '奇数';
  }
}
parityLabel(4);  // '偶数'
parityLabel(7);  // '奇数'

return を if の中で書くと、その時点で関数を抜けます。なので後ろにもう一つ return を書いておけば、そのどちらか一方だけが必ず実行されます。

処理の流れを図にすると次のとおりです。

diagram (will load when visible)

図の流れを順序リストで書き直すと、次の通りです。

関数が呼ばれ、引数 n が入る
n % 2 === 0 を評価する
真であれば '偶数' を return する
偽であれば '奇数' を return する
どちらの経路でも関数を抜ける

上の図のように、分岐は最終的に 1 本の出口に集まります。プログラムを設計するときは「どこに合流するのか」を意識するとバグを減らせます。return で関数を抜ける形にすれば、後続の処理を実行しないことが保証され、読みやすいコードになります。

真偽値とブロックの省略

if (n) のように真偽値以外を書くと、JavaScript は自動的に Boolean に変換します。0 '' null undefined NaN は false 扱い、それ以外は true 扱いです。これを「truthy / falsy」と呼びます。便利ですが、わかりにくさを生むこともあります。

JavaScript

if (name) {
  // name が空文字や undefined でないときだけ実行される
}

{} を省略して if (cond) return x; のように 1 行で書く流派もありますが、初学者は 常にブロックを書く のが安全です。ブロックを省くと、後から行を増やしたときにバグを生みやすくなります。

「コードは書く時間よりも読む時間のほうが長い」と言われます。読みやすさのために、まずは {} を省略しない癖を付けましょう。

複雑な条件は && や || で組み合わせられます。たとえば if (age >= 18 && hasLicense) のような書き方ができます。条件が長くなる場合は、いったん const isValid = age >= 18 && hasLicense; のように真偽値を変数に取り出すと、if 文がぐっと読みやすくなります。

よくある間違い

== と === の混同。if (n == '0') は文字列の '0' でも真になります。原則として === を使います
else if の代わりに else { if (...) } をネストしすぎる。読みにくくなるので else if に統一します
if (n = 5) のように = を 1 つしか書かない。これは代入式となり、常に 5 (truthy) として評価され、意図しない分岐になります

この章のポイント

ここまでの要点 if (条件) { ... } else { ... }、条件式は ===、ブロック {} は省略しない。各枝で return すれば後続の処理を確実に止められる。

やってみよう

整数 n を受け取り、偶数なら '偶数'、奇数なら '奇数' を返す関数 parityLabel を実装してください。0 も偶数として扱います。負の数も同じルールでかまいません。if と else を最低 1 セットは書くようにしてください。

よくある質問

Q. if 文と三項演算子はどう使い分けますか？

A. 本格的な処理が複数行になるなら if 文、値を 1 行で決めたいだけなら三項演算子（result = a if cond else b）が読みやすいです。三項演算子をネストすると一気に読みにくくなるため、条件が 3 つ以上なら if-elif-else に戻すのがおすすめです。

Q. 条件式に == ではなく = を書くとどうなりますか？

A. = は代入なので if a = 0 と書くと文法エラー（Python の場合）または常に真（C 系言語の場合）になります。等価判定は必ず == を使い、None かどうかは is None で比較するのが安全です。エディタが警告してくれることが多いので警告は無視しないようにしましょう。

Q. if のあとに else を書かなくても良いですか？

A. else は省略可能です。条件を満たさないときに何もしないなら else を書く必要はありません。ただし「条件外のケースを想定し忘れた」のか「意図的に省いた」のか後から見て分かるよう、コメントで「else は不要 (xxx のため)」と残しておくと将来の自分を助けます。

次のレッスン

次は if / else if / else で段階判定 で、数値を受け取り、偶数か奇数かを判定して文字列で返す関数を if / else で実装するを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

if 文の基本の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. if 文の基本とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

if 文の基本

if 文の基本

if / else の文法

動きを追ってみる

真偽値とブロックの省略

よくある間違い

やってみよう

よくある質問

Q. if 文と三項演算子はどう使い分けますか？

Q. 条件式に == ではなく = を書くとどうなりますか？

Q. if のあとに else を書かなくても良いですか？

次のレッスン

要件

入出力例

ヒント

メモ