JavaScriptの条件分岐を分かりやすく解説

2024年7月7日2024年7月20日

JavaScriptは、ウェブ開発で最も人気のあるプログラミング言語の一つです。

動的なウェブサイトを作成するために不可欠な要素として、多くの場面で条件分岐が使われます。

条件分岐を理解することで、コードの流れを制御し、ユーザーの入力や状況に応じた反応を実現することができます。

本記事では、JavaScriptの条件分岐の基本を初心者向けに分かりやすく解説します。

条件分岐とは？

条件分岐とは、特定の条件に応じて異なる処理を実行するための構文です。

基本的な条件分岐の構文には、if文、else文、else if文があります。

これらを使うことで、プログラムに柔軟な意思決定を持たせることができます。

if文

if文を使うとこんな感じで条件分岐ができます。

let age = 20;

if (age >= 18) {
    console.log("You are an adult.");
}

このコードでは、変数 age が18以上の場合、「You are an adult.」と表示されます。

if文の条件が満たされない場合は、何も実行されません。

if文と一緒に使う「else」

else文は、if文の条件が偽 (false) の場合に実行されるコードブロックを定義します。

let age = 16;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

このコードでは、age が18未満の場合に「You are a minor.」と表示されます。

if文の条件が満たされない場合にelseブロックが実行されます。

複数の条件がある時に使う「else if」

else if文は、複数の条件を順次チェックするために使います。

最初のif文が偽で、次のelse if文の条件が真の場合に、そのコードブロックが実行されます。

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}

このコードでは、score の値に応じて異なる成績が表示されます。

最初に90以上かをチェックし、それが偽の場合には次に80以上かをチェックします。

このように、複数の条件を順に確認できます。

複数の条件の組み合わせ

複数の条件を組み合わせるには論理演算子というものを使用します。

言葉は難しいですが、 && (AND)、|| (OR)、! (NOT) などを使うことで、

条件Aなおかつ条件Bが成立するとき、などを指定することができます。

実際のコードは以下のような感じ

let temperature = 25;
let isSunny = true;

if (temperature > 20 && isSunny) {
    console.log("It's a nice day!");
} else {
    console.log("The weather is not so good.");
}

このコードでは、気温が20度を超え、かつ晴れている場合に「It’s a nice day!」と表示されます。

両方の条件が満たされていない場合、「The weather is not so good.」が表示されます。