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

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

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

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

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

JavaScriptの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種類があり、場合によって使い分けを行ないます。

型を揃えた比較

記法

意味

==

左右が等しい場合にはtrueを返す

!=

左右が等しくない場合にはtrueを返す

<

左辺より右辺が大きい場合にはtrueを返す

>

左辺より右辺が小さい場合にはtrueを返す

<=

左辺より右辺が大きいか等しい場合にはtrueを返す

>=

左辺より右辺が小さいか等しい場合にはtrueを返す

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

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

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

厳密な比較

記法

意味

===

左辺と右辺が型、内容ともに等しい場合はtrueを返す

!==

左辺と右辺が型、内容いずれかが等しくない場合はtrueを返す

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

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

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

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

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

記法

意味

&&

AND 左右の式がともにtrueの場合、trueを返す

||

OR 左右の式どちらかがtrueを返す

!

NOT 式がtrueの場合はfalseを返し、falseの場合はtrueを返す

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です」と表示し、以外ならば、「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 = (a == 1) && console.log('実施します');

ショートサーキットとは、左辺を評価した時点で論理式の結果が確定する場合、右辺の評価を行なわない短絡評価(=ショートサーキット評価)のことを指します。

サンプルでは左辺の「変数aは1と等しい」という論理式を実行し、結果がtrueだった場合、コンソールに「実施します」と表示します。これはif文と同じ処理になります。

ショートサーキットでは&&を使う場合と、||を使う場合があります。&&の場合、左辺の結果がfalseの場合は右辺の評価を行ないません。||の場合、左辺の結果がtrueの場合、右辺の評価を行ないません。

JavaScript のswitch文との違い

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

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

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

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

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

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

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

登録拠点登録拠点

パソナ

パソナテックは全国9拠点にて、転職相談・お仕事紹介・各種イベント・セミナーを実施しています。

ページトップ