いよいよ、プログラムに「考える力」を与える方法、**条件分岐（if文）**を学びます。

if文を使うと、「もし Aだったら、これをしなさい。そうでなければ、あれをしなさい」というように、状況に応じた処理の切り替えができます。

まずは有名なプログラマーのジョークを

このif文の本質を理解するために、まずは有名なプログラマーのジョークを読んでみてください。今はまだ「？」となっても大丈夫です。

書き方と具体例

if文は、前のセクションで学んだ比較演算子とtrue/falseを組み合わせて使います。

if文の基本的な形

() の中の条件式の結果が true になれば、{} の中の処理が実行されます。もし false だったら、{} の中の処理は完全に無視（スルー）されます。

if (条件式) {
  // 条件式の結果が true だった場合に、この中の処理が実行される
}

そうでなければを追加する：else

ifの条件に当てはまらなかった場合の処理も書きたいときには、else を使います。

if (条件式) {
  // 条件式が true だった場合の処理
} else {
  // 条件式が false だった場合の処理
}

さらに条件を追加する：else if

「もしAなら」と「それ以外」の2択だけでなく、「もしAでなく、Bなら」「もしAでもBでもなく、Cなら」のように、条件をいくつも追加したい場合に else if を使います。

else if は、前の if の条件が false だった場合に、初めてチェックされます。

if (条件式1) {
  // 条件式1が true だった場合の処理
} else if (条件式2) {
  // 条件式1が false で、かつ条件式2が true だった場合の処理
} else {
  // すべての条件が false だった場合の処理
}

具体例：もし所持金が1000円以上なら電車に乗る。そうでなければ歩く。

let money = 500;

if (money >= 1000) {
  // moneyは1000円以上ではないので、この条件は false
  console.log("電車に乗る"); // この処理は実行されない
} else {
  // 条件がfalseだったので、こちらの処理が実行される
  console.log("歩く");
}

自動テストでの使い方

if文は、テストをより賢く、安定させるための必須テクニックです。特に、実行する環境やタイミングによって見た目が変わってしまう、不安定な画面を扱う際に役立ちます。

状況に応じた処理の自動切り替え

if文を使うと、「もしこの要素が表示されていたら、この操作をする」というように、状況に応じた処理の自動切り替えが可能です。

やってみよう

条件分岐の応用として if、else、else if を組み合わせ、複数の条件によって処理を切り替えるプログラムを作成します。時間帯に応じて挨拶が変わる、実用的なシナリオに挑戦しましょう。

演習ファイル

tests/document-4/lesson-03.spec.ts

手順動画

進め方

1. まず、最初のテスト（所持金によって行動が変わる）をデバッグ実行し、money変数の値によって if と else のどちらの処理が実行されるか、流れを追いかけてみましょう

2. 次に、演習問題：時間帯によって挨拶を変えよう というテストを開きます

3. コメントの指示に従い、if、else を使って hour 変数の値に応じた挨拶を greeting 変数に代入するコードを記述します

4. テストを実行し、expectによる答え合わせが成功することを確認できればクリアです！

5. （応用） hour の値を 10 や 20 に変更し、console.log の表示が変わることも確認してみましょう

最後にもう一度、あのジョークを

夫はなぜ牛乳を6個も？

if文の動きを学んだところで、最初のジョークを再度読んでみましょう。コンピュータのように、言われた指示を文字通りにしか解釈しない夫の頭の中は、以下のようになっていました。