TOP>
記事一覧>
JavaScriptで「if」を使った条件分岐の書き方は？注意する点もおさえよう！

JavaScriptで「if」を使った条件分岐の書き方は？注意する点もおさえよう！

2023.10.04更新

高収入も可能！機電系エンジニア求人はこちら ▶

この記事を書いた人

長谷川

FREE AID編集部機電系専門ライター Div.
アナログ回路設計・営業を経験した後ライター＆ディレクターとして独立。
電気電子・ITジャンルを得意とし、正確で分かりやすい情報の発信を行っています。

JavaScriptでif文を使うと、条件によって処理を分ける「条件分岐」が出来ます。今回はJavaScriptのプログラマーにとって習得必須なif文の書き方、使い方について初心者向けにコード例と共に解説していきたいと思います。

この記事の目次

if文とは？

JavaScriptのプログラミングにおいてif文は、「決められた条件や数値によって処理を分岐させること」で、数値の条件が同じ場合と異なる場合の処理を分ける方法です。条件が同じ場合を「真（true）」、条件が異なる場合を「偽（false）」と言います。

JavaScriptのプログラミングにおいて「条件分岐」はコーディングの基本です。プログラムは複数の条件分岐を用いて多くの条件を処理するため、条件分岐をマスターすることはJavaScriptに限らずプログラマーには必須です。JavaScriptで条件分岐を行う際に用いる構文は「if」文か「switch」文ですが、今回は特に基礎ともいえるif文について詳細に解説します。

JavaScriptでのif文の基本的な書き方

if：条件の指定

if (条件){

条件が真(true)の時に実行する処理

}

JavaScriptのif文を使った構文の最もシンプルな書き方です。ifの後ろの()内の条件式が成り立つと{}内の処理を実行します。もし条件式が成り立たない場合は処理を実行せずに次の構文に映ります。以下に実際の数値を含んだJavaScriptのコード例を紹介します。

let num = 100;

if (num > 50) {
console.log(“値は50より大きいです。”);
}

1行目の処理で変数「num」に100の数値を代入します。「let」はif文とは直接関係ありませんが、JavaScriptで変数を宣言する際に用いられ、numの型を示しています。2行目～4行目がif文です。numの値が50より大きい場合に3行目の処理「console.log(“値は50より大きいです。”)」が実行されます。1行目の100を50以下の値にすると3行目の処理は実行されません。

else：指定した条件ではない場合

if (条件){
条件が真(true)の時に実行する処理
} else {
条件が偽(false)の時に実行する処理
}

JavaScriptではif文にelseを追加することで、ifの後ろの()内の条件式が成り立たない場合の処理を設定することが出来ます。以下に上記で紹介したif文のコード例にelse文を追加して、elseが実行されるように変数を変更した場合のJavaScriptのコード例を紹介します。

let num = 40;
if (num > 50) {
console.log(“値は50より大きいです。”);
} else {
console.log(“値は50以下です。”);
}

4～5行目にelse文の処理内容を追加しました。このコード例では「num」の値が50以下なので、3行目の処理ではなく5行目の処理である「console.log(“値は50以下です。”)」が実行されます。

else if：複数の条件を指定

if (条件1){
条件1が真(true)の時に実行する処理
} else if {
条件2が真(true)の時に実行する処理
}

JavaScriptではif文の後ろにelse ifを追加することで、始めに指定した条件以外の複数の条件を設定することが出来ます。以下に上述のif文のコード例にelse ifとelseを追加した場合のJavaScriptのコード例を記載します。

4～5行目にelse if文の処理を追加しました。JavaScriptのif文は上から順に処理をしていくため、2行目のif文が偽(false)だった場合にelse ifの判定をします。ifの条件もelse ifの条件も満たさない場合はelseの処理をします。JavaScriptのelse ifは何度も使えるため、コード例以上の複数の条件を指定する使い方が出来ます。

if文の注意点

処理される順番

JavaScriptでelse if文を使うと複数の条件指定が出来ますが、コードは上から順番に処理をしていくため、条件設定の順番を間違えると意図した通りに処理してくれなくなってしまいます。したがって、JavaScriptのif文の使い方には注意が必要です。以下に条件設定の順番を間違えたJavaScriptのコード例を記載します。

else ifの項で紹介したJavaScriptのコード例の2行目と4行目の条件式の値を変更しています。このコードでは4行目の条件が2行目の条件に含まれているため、5行目の処理が実行されることはありません。基本的な3つ程度の条件であれば修正は簡単ですが、何十もある条件式を指定する場合には注意が必要です。また、コピーして条件を変更するJavaScriptのプログラミングをする場合にも注意が必要です。

中括弧を省略しない

JavaScriptでif文を記述する際に、本来は処理内容を中括弧（波括弧）で囲う必要がありますが、条件が1つだけの処理の場合には中括弧を省略することが出来ます。ただし、JavaScript初心者の方は間違い防止のために、中括弧の省略はしない方が無難です。以下に中括弧を省略した場合とそうでない場合のJavaScriptのコード例を記述します。

【JavaScriptのif文で中括弧を省略しない場合】
if (num > 50) {
console.log(“値は50より大きいです。”);
}

【JavaScriptのif文で中括弧を省略した場合】
if (num > 50)
console.log(“値は50より大きいです。”)

JavaScriptのif文では論理演算子を活用することで、より複雑な条件式を書くことが出来ます。本章ではJavaScriptの論理演算子の基本である、or、and、notを使った構文について、JavaScritpのコード例と共に解説します。

or（||)

if (条件A or 条件B){
条件Aまたは条件Bが真(true)の時に実行する処理
}

JavaScriptのif文の条件設定で、「条件Aまたは条件B」を設定する際に「or」を使用します。JavaScriptはこの「or」は「||」で代替可能で、同じ効果を得ることが出来ます。以下にorを用いた、JavaScritpのコード例を記述します。

let num = 80;
if (num < 20 or num>60) {
console.log(“値は20～60の間ではありません。”);
}

2行目にorの条件式を追加しました。「numの数字が20未満」または「60より大きい」場合に、3行目の「console.log(“値は20～60の間ではありません。”)」を実行します。例では、numは80で条件に当てはまるため、3行目の処理が実行されます。

and（&&）

if (条件A and 条件B){
条件Aまたは条件Bが真(true)の時に実行する処理
}

JavaScriptのif文の条件設定で、「条件Aかつ条件B」を設定する際に「and」を使用します。JavaScriptはこの「and」は「&&」で代替可能で、同じ効果を得ることが出来ます。以下に、andを用いたJavaScritpのコード例を記述します。

let num = 40;
if (num > 20 and num<60) {
console.log(“値は20～60の間です。”);
}

2行目にandの条件式を追加しました。「numの数字が20より大きく」且つ「60未満」の場合に、3行目の「console.log(“値は20～60の間です。”)」を実行します。例では、numは40で条件に当てはまるため、3行目の処理が実行されます。

not（!）

if (not (条件A)){
条件Aが偽(false)の時に実行する処理
}

JavaScriptのif文の条件設定で、「条件Aではない」を設定する際に「not」を使用します。JavaScriptはこの「not」は「!」で代替可能で、同じ効果を得ることが出来ます。以下に、notを用いたJavaScriptのコード例を記述します。

let num = 10;
if (not (num > 20)) {
console.log(“値は20以下です。”);
}

2行目にnotの条件式を追加しました。「numの数字が20より大きくない」場合に、3行目の「console.log(“値は20以下です。”)」を実行します。例では、numは10で条件に当てはまるため、3行目の処理が実行されます。またJavaScriptでnotを使用する場合、条件を「()」で囲う必要があります。以下にnotとandを組み合わせたJavaScriptのコード例を記述します。

let num = 10;
if (not (num < 20 and num > 60)) {
console.log(“値は20～60の間です。”);
}

まとめ

今回はJavaScriptのif文の書き方、使い方を初心者の方向けに紹介しました。条件分岐はJavaScriptのプログラミングをする上で習得必須な構文です。JavaScript初心者でJavaScriptの学習をしている方は是非本記事を参考にしてみて下さい。

電子工学・電気工学の専門知識が欲しいときは

電子回路の知識や組み方を勉強し、自分でものづくりができれば良いですが、知識や技術を身に着けるまでにはやはり時間がかかります。しかし、機電系のエンジニアは会社に属していることが多く、頼みづらいと思うこともあるのではないでしょうか。
電子工学や電気工学の専門的な技術・知識が欲しい！という方におすすめなのがFREE AIDです。

バナー