JavaScriptのif...else文を徹底解説：初心者向けステップバイステップガイド

JavaScriptのif...else文は、条件が真（true）か偽（false）かを評価します。条件が真であればifブロック内のコードが実行され、そうでなければelseブロック内のコードが実行されます。また、else...if文を使えば、複数の条件を順番に評価することも可能です。

---

プログラミングをしていると、状況に応じて異なるコードブロックを実行したい場面が出てきます。そんなときに役立つのが条件分岐です。条件分岐はあらゆるプログラミング言語に欠かせない要素であり、特定の条件が満たされた場合にのみコードブロックを実行する仕組みを提供します。

このチュートリアルでは、JavaScriptでif...else文を使う方法を詳しく解説していきます。

条件分岐のおさらい

前述のとおり、条件分岐はすべてのプログラミング言語において重要な役割を果たします。特定の条件が満たされた場合にコードを実行したいときには、条件分岐文が必要になります。たとえば、以下のような場面で活用できます。

• ユーザーが入力したパスワードが、登録済みのものと一致するかどうかを確認する
• 特定のメールアドレスにアカウントが紐づいているかどうかを確認する
• すべての必須項目が入力されていればフォームを送信する
• ユーザーがログインしていれば、期間限定の割引情報を表示する

これらの例に共通するのは「もし〜ならば（if）」という考え方です。「何かが起きたら、別の何かを実行する」。ここからは、このロジックをJavaScriptでどのように実現するのかを見ていきましょう。

JavaScriptのif文

JavaScriptのif文は、条件式が真（true）か偽（false）かを評価します。if文の中身が実行されるのは、条件が真の場合だけです。条件が偽であれば、何も起こりません。

if文では「if」というキーワードを使用します。ifの後には、丸括弧（ ）の中に評価したい条件を1つ、または複数記述します。そして、実行したいコードは波括弧 { } で囲みます。

if文の基本構文は以下のとおりです。

if (ourConditions) {
	// ourConditions が true の場合に実行されるコード
}

if文のサンプルコード

実際にif文がどのように動作するのか、例を見てみましょう。ECサイトを構築していて、ユーザーが16歳以上であることを確認してから購入を許可したいとします。以下は、購入前にユーザーの年齢をチェックするコードの例です。

const userAge = 15;

if (userAge < 16) {
	console.log("You are not old enough to make a purchase!");
}

このコードを実行すると、次の出力が得られます。

You are not old enough to make a purchase!

ここでは「より小さい」演算子（<）を使って、ユーザーの年齢が16未満かどうかを判定しています。ユーザーの年齢は15なので、userAge < 16 は true となり、if文の中のコードが実行されます。

では、ユーザーの年齢が16だった場合はどうなるでしょうか。その場合、userAge < 16 は false となるため、if文の中のコードは無視され、何も出力されません。プログラムはそのまま処理を続けます。

JavaScriptのif...else文

JavaScriptのif...else文は、条件が真かどうかを評価します。条件が真であればifブロック内のコードが実行され、偽であればelseブロック内のコードが実行されます。

if...else文の構文は以下のとおりです。

if (ourCondition) {
	// 条件が true の場合に実行されるコード
} else {
	// 条件が false の場合に実行されるコード
}

else文は、if文のすべての条件の後に記述します。なお、1つのif文に対して記述できるelse文は1つだけです。

JavaScriptにおけるtrueとfalseについて詳しく知りたい方は、Boolean型に関するガイドも併せて参考にしてください。

if...else文のサンプルコード

先ほどの年齢チェックの例に、else文を追加してみましょう。年齢条件を満たしている場合に、購入処理が進んでいることをユーザーに伝えるメッセージを表示します。

const userAge = 17;

if (userAge < 16) {
	console.log("You are not old enough to make a purchase!");
} else {
	console.log("Your purchase is being processed.");
}

このコードを実行すると、次の出力が得られます。

Your purchase is being processed.

ここでは、ユーザーの年齢を保持する変数 userAge を宣言しています。ユーザーは17歳なので、if文の条件はfalseとなり、else節のコードが実行されます。もしユーザーの年齢が12歳であれば、else節のコードは実行されません。

else文はさまざまな場面で活用できます。たとえば、エラー発生時のハンドリングや、フォームの入力内容の検証などです。ユーザーが入力を間違えた場合や、必須項目を未入力のまま送信した場合に、エラーメッセージを表示するといった使い方ができます。

JavaScriptのelse...if文

JavaScriptのelse...if文は、複数の条件の中に真となるものがあるかどうかを順番に評価します。各else...if文は新しい条件を評価し、いずれの条件も満たされなければ何も実行されません。

複数のelse...if文を使う場合の構文は以下のとおりです。

if (condition one) {
	// 条件1が true の場合に実行されるコード
} else if (condition two) {
	// 条件2が true の場合に実行されるコード
} else {
	// 上記のすべての条件が false の場合に実行されるコード
}

プログラムは条件1から順番にすべての条件を評価していき、どの条件も真でなければ、elseブロック内のコードが実行されます。

else...if文は、必要に応じていくつでも追加できます。それぞれの条件ブロックには、その条件が満たされた場合に実行したいコードを記述します。

else...if文のサンプルコード

else...if文の実際の動きを、例で確認しましょう。映画館を経営していて、年齢層ごとに異なるチケット料金を設定したいとします。料金設定は以下のとおりです。

• 10歳以下：5ドル
• 11〜17歳：8ドル
• 18〜64歳：12ドル
• 65歳以上：8ドル

以下は、顧客の年齢をチェックして、支払うべきチケット料金を返すプログラムの例です。

var age = 27;
var ticketPrice = 0;

if (age <= 10) {
	var ticketPrice = 5;
} else if (age >= 11 && age <= 17) {
	var ticketPrice = 8;
} else if (age >= 18 && age <= 64) {
	var ticketPrice = 12;
} else {
	var ticketPrice = 8;
}

console.log(ticketPrice);

このコードを実行すると、12が出力されます。

まず、年齢が10歳以下かどうかをチェックします。次に11〜17歳、続いて18〜64歳かどうかを順に判定していきます。今回のユーザーの年齢は27歳なので、3つ目の条件がtrueとなり、そのブロック内のコードが実行されます。その結果、チケット料金は12ドルになります。

まとめ

JavaScriptのif...else文を使うことで、特定の条件が満たされているかどうかに応じて、プログラム内のどのコードを実行するかを制御できます。条件分岐は、あらゆるプログラミング言語において、コードにロジックを持たせるために欠かせない仕組みです。

このガイドでは、JavaScriptにおけるif文、if...else文、else...if文の使い方を解説しました。これであなたも、条件演算子をプロのように使いこなせるはずです。

さらに学習を進めたい方や、おすすめのJavaScript講座を探している方は、「How to Learn JavaScript」ガイドもぜひ参考にしてください。