JavaScriptでif文を用いて条件分岐をする方法

この記事では、JavaScriptのif文を用いて条件分岐をする方法について見ていきたいと思います。

if文とは

if文は指定した条件に応じて処理を分岐をするための構文です。

if文の書き方

if(条件式) {
処理1
} else if(条件式) {
処理2
} else {
処理3
}

説明

上から順番に条件に合うかどうかを照合していくので、「if」の条件に合えば「処理1」が実行されます。
「if」の条件に合わなければ「else if」の条件に合うかどうかを照合し、合えば「処理2」が実行されます。
「else if」の条件にあわなければ「else」の処理である「処理3」が実行されます。

また、「else if」や「else」は省略することができ、「if」だけを用いて条件分岐を行うこともできます。

if文を用いた例

・HTML

<p></p>
<p></p>
<p></p>

・JavaScript

let arr = [5, 25, 15];
let p = document.querySelectorAll("p");

for(let i = 0; i < arr.length; i++) {
  if(arr[i] > 20) {
    p[i].textContent = arr[i] + "は、20より大きいです。"
  } else if(arr[i] > 10) {
    p[i].textContent = arr[i] + "は、10より大きいです。"
  } else {
    p[i].textContent = arr[i] + "は、10以下です。"
  }
}

この例では、配列[5, 25, 15]のそれぞれの要素が20よりも大きいか、10よりも大きいか、10以下かを確認して、それぞれの条件に合った処理を実行するという内容になっています。

具体的には、配列の最初の要素「5」は20よりも大きいという条件は満たさず、10よりも大きいという条件も満たさず、それ以外なので、「else」の処理が実行されます。
２番目の要素「25」は20よりも大きいので、最初の「if」の処理が実行されます。
３番目の要素「15」は20よりも小さく、10よりも大きいので「else if」の処理が実行されます。

では実行結果を見てみましょう。
「Result」タブをクリックすると、

こうですね。
それぞれの数値に合う処理がされてますね。

まとめ

このように、if文を用いることで、条件を指定してそれに合った処理を実行させることができます。