【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説

プログラミングにおいて最初に習得する必要があるのは、コーディングの基礎とも言うべき「条件分岐」です。プログラムは多くの条件分岐によって複数の条件を処理し、さまざまな機能を実行しています。そのため、プログラミングを進めていくには、条件分岐をマスターすることは必須といえるでしょう。

JavaScriptでは条件分岐は「if」文または「switch」文で行ないます。今回は特に基礎ともいえるif文について、サンプルコードを見ながら機能や記述方法について詳しく解説していきます。

JavaScriptのif 文とは

if文は条件や値によって処理を分岐させ、一致する場合の処理と、一致しない場合の異なる処理を記述するための方法です。条件が一致する場合を「真（true）」、条件が一致しないことを「偽（false）」と言い、基本の構文は以下ようになります。

if (条件) {
条件が真（true）であれば実行
}

条件が偽（false）であった場合の処理を命令するには、次のように「else」を用いて条件を追加します。

if (条件) {
条件が真（true）であれば実行
} else {
    （false）であれば実行
}

この場合、条件が一致する場合と一致しない場合で異なる処理が行なわれます。では、条件分岐をさらに増やしたい場合はどう記述すればよいのでしょうか。if文にはelseの他に「else if」というフロー制御があります。

else ifを用いて「Aだった場合、AではなくBだった場合、AでもBでもない場合」のように3つの条件分岐を作りたい場合は、次のように記述します。

if (条件1) {
条件1が真（true）であれば実行
} else if (条件2) {
条件2が真（true）であれば実行
} else {
条件1と2がどちらも偽（false）であれば実行
}

JavaScriptで使える比較演算子一覧

比較演算子はif文の条件分岐で頻繁に使用します。比較演算子には「型を揃えた比較」と「厳密な比較」の2種類があり、場合によって使い分けを行ないます。

型を揃えた比較

評価演算子の中でも最もよく使用されるのは「==（等価演算子）」です。この等価演算子の特徴として、左右の型が違う場合、同じ型に変換してから評価を行ないます。

そのため、例えば次のコードでは、Booleanのtrueが自動的にNumberの1に変換されて比較するため、結果は真（true）となり、中の処理が実行されることになります。

if (1 == true) {
    // 処理が実行される
}

厳密な比較

これに対して、左右を、型を含めて比較する「厳密な比較」もあります。型と内容の両方を評価して真偽を返すため、型が違う場合は常に偽（false）を返します。

先のコードを厳密な比較に直すと、型が自動的に変換されないため、Numberの1とBooleanのtrueが同じものであるかを比較することになります。その結果、偽（false）となり、中の処理は実行されないことになります。

if (1 === true) {
    // 処理は実行されない
}

JavaScriptで使える論理演算子一覧

JavaScriptで使用できる論理演算子には、AND、OR、NOTの3種があります。

JavaScriptのif文の書き方

JavaScriptのif文の特徴を理解したところで、実際にどのような書き方があるのか、サンプルコードを見ながら解説していきます。

if文の基本形

if (a == 1) {
    console.log('aは1です');
}

if文の基本となる文型です。if(条件)で条件分岐を行ない、条件に合致する場合はif文内の処理を実行します。

このサンプルでは、変数aが1である場合、コンソールに「aは1です」と表示します。

if else の形

if (a == 1) {
    console.log('aは1です');
} else {
    console.log('aは1ではありません');
}

真（true）と偽（false）で処理を分岐させる書き方です。このサンプルでは、aが1であればコンソールに「aは1です」と表示し、1以外ならば、「aは1ではありません」と表示します。

if, else if, else の形

if (a == 1) {
    console.log('aは1です');
} else if (a >= 2) {
    console.log('aは2以上です');
} else {
    console.log('aは1でも2以上でもありません');
}

条件を真偽の2つ以外にも持つ場合、else ifで別の条件を記述することができます。ifとelseの間に、else if(条件)を記述して条件を追加します。

else ifが複数の場合

if (a == 1) {
  console.log('aは1です');
} else if (a >= 2 && a < 100) {
  console.log('aは2以上、かつ100未満です');
} else if (b == 1) {
    console.log('bは1です');
} else {
  console.log('aは1でも、2以上かつ100未満でもなく、さらにbが1でもありません');
}

else ifを複数設定する場合、条件ごとにelse ifを記述して追加します。else ifはいくつでも追加できますが、多すぎると可読性が下がるため、条件が多い場合はswitch文を使用するほうが良いケースもあります。

なお、JavaScriptのswitch文については、別記事でまとめていますので、そちらを参照ください。

【入門】JavaScriptのswitch文の書き方をサンプルコードで解説！

AND や OR を使用した複数条件の書き方

if (a == 1 && b != 1) {
    console.log('aは1、かつbは1ではない');
} else if (a != 1 || b == 1) {
    console.log('aは1以外、またはbが1である');
}

上述したANDやORの論理演算子をifの条件に使用できます。分岐の条件に論理演算子を使用すると、通常の分岐よりも複雑な条件を判定して処理を分岐させられます。

サンプルではifで「aが1」であることと、「bが1ではない」ことを条件として定義しています。続いてelse ifで「aが1以外」であることまたは「bが1」であることを条件に定義しました。

この場合、どのような数字でもいずれかの条件に合致するため、偽の処理を行なうelseは省略できます。

入れ子（ネスト）させる場合の書き方

if (a == 1) {
  if (b == 1) {
        console.log('aは1かつbは1です')
    }
}

if文の処理にif文を設定する入れ子（ネスト）した状態で、複数の条件を持つ処理を設定できます。if文同士のネストの他にswitch文などをネストすることもできます。

サンプルでは、「aが1」である場合、「bが1」であればコンソールに「aは1かつbは1です」と表示します。この処理は前述の論理演算子を使用したANDと同じ結果になります。

JavaScript の if文 - 中級編

JavaScriptにはif文に似た処理をする別の構文が存在します。一つは「条件演算子」または「三項演算子」と呼ばれる演算子を用いる方法で、もう一つは倫理演算子の内部仕様を利用した「ショートサーキット」という手法です。いずれもif文で記述するよりも短いコードで似たような判定ができます。

if文の代わりに三項演算子を利用する

console.log(a ? 'aはtrueです' : 'aはfalseです');

三項演算子の書き方は、

条件 ? trueの場合の動作 : falseの場合の動作;

となります。

サンプルの場合、aにtrueが代入されている場合は「aはtrueです」とコンソールに表示します。三項演算子はif...elseを1行で書くための記述方法で、実際のコーディングでも短いif文の場合は三項演算子を使用することがあります。

なお三項演算子はネストすることも可能ですが、可読性が極端に落ちるため、一般的にあまり推奨されていません。

if文の代わりにショートサーキットを利用する

ショートサーキットを使わない場合

if (a == 1) {
  console.log('実施します');
}

(a == 1) && console.log('実施します');

JavaScript のswitch文との違い

switch文は「変数に対して固定値ごとの挙動切り替え」のために使われるものに対して、if文はどんな複雑な条件でも対応できます。そのため、条件が複雑な場合はif文を用いる必要があります。

if文とswitch文の最大の違いは、処理速度と処理の仕方です。通常、switch文のほうがif文よりも処理が速いとされています。また、if文が条件式を上から順に評価していくのに対し、switch文の場合は条件文の評価は1度だけになります。

※JavaScriptの場合、「switch文のほうがif文よりも処理が速い」という根拠は薄いことを確認したため、該当文章を削除いたしました。switch文でも、caseごとの式が上から順に評価されていきます。

3分岐まではif文、それ以上の多分岐似なる場合はswitch文が適していますが、条件などの状況に応じ、細かく使い割る必要があるでしょう。

JavaScriptでif文が書けるようになろう！

if文はJavaScriptに限らず、多くのプログラミング言語において基礎中の基礎である条件分岐です。そのため、if文が書けないとプログラミングはできないと言われるほど大切なものです。

プログラミングは多くの条件分岐によって、さまざまな処理を行ないます。条件分岐について理解を深めることで、必要な分岐であるのかを理解し、冗長化しないコードを記述できるようになります。

if文は多用されることもあり、ショートサーキットや三項演算子のような短い記述方法も用いられています。if文とあわせて使いこなすことで、読みやすく処理の速いJavaScriptのコードがプログラミングできるようになるでしょう。