ifとelseを使った条件分岐の記述は色々なプログラミング言語で使いますが、JavaScriptの場合はどのように記述をするのでしょうか。それぞれの使い方、書き方の違いについて、サンプルコードを使いながら詳しく解説します。

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

条件分岐の基本

条件分岐はさまざまなプログラミング言語でよく使われる基本です。JavaScriptの場合はifを使った条件分岐が最も多く使われます。

if文について、基本となる役割や書き方から、まずは確認していきましょう。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

基本となるif文

if文はJavaScriptに限らず、多くのプログラミング言語で用いられます。その役割は、命令の中に条件分岐を設定することです。

例えばショッピングサイトで「3000円以上の買い物なら送料を無料にする、それ以下なら有料にする」といったような処理は、if文を用いて行われます。

あらゆる処理の基本となる概念ですので、if文の使い方については押さえておく必要があります。

if文の書き方

JavaScriptでは、if文は以下のように記述します。

if (条件) { 条件を満たしていれば処理を実行する }

条件が一致する場合を「真」（true）、一致しない場合を「偽」(false)という言い方をしますので、覚えておきましょう。特にtrueとfalseは、色々な場面でよく用いられます。

■関連記事

「if～else」の書き方を覚えよう

ifとelseは組み合わせでよく使われますので、一つの構文として覚えておくと便利です。どんな場面で使うのか、そして実際の書き方について解説します。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

「if～else」はどんなときに使う？

先述したif文では、条件を満たしていない（偽）のときに実行される処理について記述がされていませんでした。この記述をするのがelseの役割です。

elseとは「条件が偽である場合に実行する処理」を記述するために使います。

「if～else」を使った書き方

ifとelseを使った具体的な構文は、以下の通りです。

if (条件) {
　条件が真のときに実行する処理A
}
else {
　条件が偽のときに実行する処理B
}

さらに条件を加える場合は「else if」を使います。

if(条件A){
　// 条件Aが真の場合に実行する処理
}
else if(条件B) {
　// 条件Aが偽、条件式Bが真の場合に実行する
}
else{
　// 条件式がすべて偽の場合に実行する
}

「if～else」で入れ子にして条件分岐を繰り返す

if文を入れ子で使う方法についても見ていきましょう。入れ子にすることで2通り以上の条件を作ることができます。

const age = 30;
if (age < 20) {
　if (age < 10) {
　　console.log("私は10歳より下です");
　} 
　else {
　　console.log("私は10代です");
　}
}
else {
　if (age < 30) {
　　console.log("私は20代です");
　}
　else {
　　console.log("私は30歳以上です");
　}
}

上記は、まず「年齢が20歳未満かそうでないか」のif文を作り、その中にさらに「20歳未満の場合は10歳以上か未満か」「20歳以上の場合、20代かそうでないか」という、条件の中にさらに条件を設定しています。

このような形で、いくつもの細かい条件を設定することも可能です。

実行順序に注意する

if文は、最初に条件に合致して処理を実行したら終了するという点に注意しましょう。以下のコードに注目してください。

const score = 78;
if(score > 60) {
　console.log('合格です');
}
else if(score > 70){
　console.log('優秀です');
} 
else{
　console.log('不合格です');
}

この場合、本来の意図としては「優秀です」というメッセージを出したいのですが、先に60より上という条件を満たしてしまっているため、この場合は「合格です」と表示されてしまいます。

if文を記述する際は、この法則に注意して作成する必要があります。

■関連記事

複数の条件を設定する

「条件1と条件2の両方を満たした場合、処理1を実行する」などのように、複数の条件を設定する方法について解説します。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

andを使った条件分岐

「条件1と条件2の両方を満たした場合、真として扱う」という条件分岐について解説します。

const age = 30;
if(age > 10 && age < 20) {
　console.log('私は10代です');
} 
else {
　console.log('私は10代ではありません');
}

「&&」が、複数の条件を両方満たすという意味になります。

上記の場合、「10より上」「20より下」という両方の条件を満たした場合のみ真として判断されるという条件式になっています。

orを使った条件分岐

「条件1か条件2のいずれかの条件を満たした場合真とする」という場合、orを使います。サンプルコードを見ていきましょう。

const scoreA = 30;
const scoreB = 75;
if(scoreA > 50 || scoreB > 60) {
　console.log('合格です');
}
else {
　console.log('不合格です'); 
}

このコードでは、スコアAは条件を満たしていませんが、スコアBは満たしています。

「||」を使っていることで「スコアAが51点以上か、スコアBが61点以上のいずれかで真」という条件になっているため「合格です」と表示されます。

notを使った条件分岐

notは、条件を逆にするために用います。以下のコードを見てみましょう。

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

この条件式は、本来なら条件である50点以上を満たしているため真となり、「合格です」と表示されます。このコードにnotを使うと以下のようになります。

const score = 60;
if(!score > 50) {
　console.log('合格です');
}
else {
　console.log('不合格です');
}

notは「!」を、条件式の頭につけます。これで「条件を満たした場合は偽になる」という意味になります。そのため、上記の式は「不合格です」と表示されます。

falseの注意点

JavaScriptでは、以下の条件を満たすとfalseと判断されてしまいます。

• 数値の0
• 値がブランク（null）
• underfind（値が定義されていない）
• NaN（Not a Number、数値ではない）
• 空白の文字列

上記の条件をif文の条件で用いると、falseになります。条件式を作成する際には注意しましょう。

■関連サイト

条件を正しく設定し、適切に分岐を作る

if文はプログラムを組む上ではほぼ必修となっています。JavaScriptも同様です。if文の基本的な使い方、書き方については理解しておきましょう。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

複数条件、複数の処理に分割する方法など細かい組み合わせによって、Webサイトやアプリでさまざまな処理を設定できます。

条件を正しく設定し、適切に分岐を作ることができるようになれば、JavaScriptの習得に向けて一歩前進したと言えるでしょう。