JavaScript 条件分岐文：制御フローをマスターする

はじめに

この実験 (Lab) では、JavaScript で条件分岐文 (conditional statements) を使用する方法を学びます。条件分岐文はプログラミングの基本的な要素であり、特定の条件が真 (true) か偽 (false) かに基づいて異なるコードブロックを実行することを可能にします。これにより、意思決定を行い、それに応じて動作を変更できる、動的で応答性の高いアプリケーションを作成できます。

以下の主要な概念を扱います。

条件が真の場合にコードを実行するための if 文。
代替パスを提供する else 節。
複数の条件をチェックするための else if 文。
緩やかな等価演算子 (==) と厳密な等価演算子 (===) の違い。

この実験 (Lab) の終わりには、これらの不可欠なツールを使用してプログラムのフローを制御する方法を示す簡単なスクリプトを作成できるようになります。

比較演算子を用いた if 文の記述

このステップでは、JavaScript における最も基本的な条件分岐文である if 文の使用方法を学びます。if 文は、指定された条件が true と評価された場合にのみ、コードブロックを実行します。

基本的な構文は以下の通りです。

if (condition) {
  // 条件が真の場合に実行されるコード
}

時間帯に基づいて挨拶を表示するスクリプトを作成します。まず、朝かどうかを確認しましょう。

WebIDE の左側にあるファイルエクスプローラーで、script.js ファイルを見つけて開きます。
script.js に以下のコードを追加します。このコードはシステムから現在の時刻を取得し、その時刻が 12 時より前であれば、HTML ページの <h1> 要素のテキストを変更します。

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

コードを追加したら、ファイルを保存します (Ctrl+S または Cmd+S を使用できます)。
結果を確認するには、インターフェース上部にある Web 8080 タブをクリックします。現在の時刻が正午より前であれば、「Good Morning!」というメッセージが表示されます。それ以外の場合は、「Hello!」というメッセージのままです。

JavaScript if statement example

代替パスのための else 節の追加

このステップでは、if 文に else 節を追加します。else 節を使用すると、if 文の条件が false の場合に実行されるコードブロックを指定できます。これにより、プログラムのロジックに代替パスを提供します。

構文は以下の通りです。

if (condition) {
  // 条件が真の場合に実行されるコード
} else {
  // 条件が偽の場合に実行されるコード
}

朝でない場合に別の挨拶を表示するようにスクリプトを変更しましょう。

エディターで script.js ファイルを再度開きます。
既存のコードを変更して else ブロックを含めます。これにより、currentHour < 12 という条件が偽の場合に、挨拶が「Good Afternoon!」に設定されます。

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

script.js ファイルを保存します。
Web 8080 タブに切り替えて変更を確認します。これで、時間が正午を過ぎている場合、「Hello!」から「Good Afternoon!」にメッセージが変更されます。

複数の条件分岐のための else if の使用

このステップでは、複数の条件を処理するために else if 文を使用する方法を学びます。2 つ以上の可能な結果がある場合、else if を使用すると、一連の条件を順番にテストできます。

構文は以下の通りです。

if (condition1) {
  // condition1 のためのコード
} else if (condition2) {
  // condition2 のためのコード
} else {
  // どの条件も満たされない場合のためのコード
}

挨拶スクリプトを拡張して、夕方のメッセージを含めましょう。「午後」を午後 6 時 (18:00) より前と定義し、「夕方」をそれ以降の時間と定義します。

script.js ファイルで、コードを更新して else if 条件を含めます。ロジックは次のようになります。
- 時刻が 12 時より前であれば、「Morning」と表示します。
- それ以外で、時刻が 18 時より前であれば、「Afternoon」と表示します。
- それ以外の場合は、「Evening」と表示します。

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

ファイルを保存し、Web 8080 タブを更新します。これで、現在の時刻に基づいて、朝、午後、夕方のいずれであるかが正確に反映されるようになります。

条件での等価演算子 == の適用

このステップでは、等価演算子 == について学びます。この演算子は、「緩い」または「抽象的な」等価演算子とも呼ばれ、2 つの値を共通の型に変換しようとした後に、それらが等しいかどうかを比較します。

例えば、数値の 10 と文字列の '10' は、== を使用すると等しいと見なされます。

これを実際に確認するために、スクリプトに新しいコードを追加します。このコードは挨拶には影響しませんが、ブラウザの開発者コンソールにメッセージをログとして記録します。

script.js ファイルの末尾に以下のコードを追加します。

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

ファイルを保存します。出力を確認するには、開発者コンソールを開く必要があります。
Web 8080 タブで、ページ上の任意の場所を右クリックし、「検証」または「要素を検証」を選択します。これにより、開発者ツールが開きます。
開発者ツール内の「コンソール」タブをクリックします。メッセージ The == operator says they are equal! が表示されるはずです。これは、JavaScript が比較前に型を変換したことを確認します。

=== 演算子による厳密な等価性のテスト

この最終ステップでは、厳密等価演算子 === について学びます。緩い等価演算子 (==) とは異なり、厳密等価演算子はオペランドの値と型の両方を比較します。型変換は行いません。

これは一般的に JavaScript で等価性のチェックに推奨される演算子です。なぜなら、より予測可能な動作をし、微妙なバグを回避するのに役立つからです。

前のステップの例を === を使用するように変更して、その違いを観察しましょう。

script.js ファイルの末尾に、以下の新しいコードブロックを追加します。

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

ファイルを保存し、Web 8080 タブの開発者コンソールを再度確認します。ページを更新する必要がある場合があります。
今回は、メッセージ The === operator says they are NOT equal, because their types are different. が表示されます。これは、numberValueStrict が number であり、stringValueStrict が string であるため、=== 演算子がそれらを正しく異なるものとして識別したからです。

Developer console showing strict equality comparison result

まとめ

この実験を完了された皆さん、おめでとうございます！この実験では、あらゆる開発者にとって不可欠なスキルである、JavaScript における条件ロジックの基本を学びました。

この実験では、以下のことを行いました。

if ステートメントを使用して、単一の条件に基づいてコードを実行しました。
else 節を追加して、代替ケースを処理しました。
else if を実装して、複数の連続した条件を管理しました。
型変換を実行する緩い等価演算子 (==) を理解し、適用しました。
値と型の両方をチェックする厳密等価演算子 (===) を理解し、適用しました。これはほとんどの比較で推奨される選択肢です。

条件ステートメントをマスターすることで、インテリジェントで応答性が高く、さまざまなシナリオを処理できるコードを書くことができます。