知ってた?ナルホド! BLOG

2019.03.25

【新人コーダーがJavaScriptを習得する】vol.06 〜JavaScriptのif文とは〜

WRITTEN BY

 | 

HIRAHARA NATSUMI

【新人コーダーがJavaScriptを習得する】vol.06 〜JavaScriptのif文とは〜

こんにちは!コーダーの平原です!
前回はJavaScriptのオブジェクトについて学びました。
配列と同様に、オブジェクトは複数の値を1つの変数にまとめることができますが、配列よりも細かな種別を行うことができました。
今回は、if文を使って、条件によって処理を変えるということを学んでいきたいと思います!

前回までの内容です。↓↓↓↓

  1. if文とは
  2. if〜else文
  3. if〜else if〜else文
  4. if文を入れ子で使う
  5. if文における論理演算子
  6. まとめ

1. if文とは

if文とは、「もし〇〇の場合、〇〇の処理を実行する」、「そうでなければ〇〇の処理を実行する(又はしない)」のように、条件によって処理を変えることができる制御構造の一つです。

条件が一致した場合はtrueが返され、一致しない場合はfalseが返されます。trueとfalseは真偽値といいます。
if文の記述方法は以下の通りです。

if (条件式){
条件がtrueであれば処理を実行する
}

()内に条件式を書き、その条件が一致する場合(true)は{}内の処理が実行されます。

let number = 100;
if (number > 10){
  console.log('numberは10より大きいです。');
}

2. if〜else文

if文にelseを付け加えることで、ifの条件式に当てはまらない場合の処理を実行することができます。

let number = 100;
if (number < 50){
  console.log('numberは50より小さいです。');
} else {
  console.log('numberは100より大きいです。');
}

numberに代入されている100は、50より大きい為、「number < 50」の条件式には当てはまらず、falseが返され、 elseの処理が実行されます。 elseの際に何も処理を実行しない場合は、else以降の処理を省略することができます。

3. if〜else if〜else文

if〜else文をより複数の条件に分岐させる場合には、else ifを使います。

let number = 100;
if (number > 150){
  console.log('numberは150より大きいです。');
} else if (number >= 50){
  console.log('numberは50から150の間です。');
} else {
  console.log('numberは50未満です。');
}

最初の条件式の「number > 150」がfalseで返された為、次の条件式で判定されます。
else ifの条件式の「number >= 50」では、50以上だった場合という意味の条件式です。
numberに代入されている100は、150より小さく50以上の為、else ifの処理が実行されます。

4. if文を入れ子で使う

if文の中に、さらにif文を書き、条件分岐をさせることもできます。

let number = 100;
if (number >= 50){
  if (number > 150){
    console.log('numberは150より大きいです。');
  } else {
    console.log('numberは50から150の間です。');
  }
} else {
  console.log('numberは50未満です。');
}

if〜else if〜else文と同様の内容の判定ですが、このようにif文を入れ子にして書き換えることもできます。

5. if文における論理演算子

if文では、論理演算子を使って、バリエーション豊かな条件式で判定を行うことができます。

==演算子(equal)
==演算子では、「〇〇と等しい場合」という条件式を作ることができます。
let number = 100;
if (number == 50){
  console.log('numberは50です。');
} else {
  console.log('numberは50ではありません。');
}
「number == 50」の場合にtrueが返され、最初の処理が実行されます。今回はfalseが返される為、elseの処理が実行されます。
&&演算子(and)
&&演算子では、「〇〇かつ〇〇の場合」という条件式を作ることができます。
let number = 100;
if (number >= 50 && number < 150){
  console.log('numberは50から150の間です。');
} else {
  console.log('numberは50から150の間ではありません。');
}
「number >= 50」と「number < 150」の条件式が、二つとも当てはまる場合にtrueが返され、最初の処理が実行されます。
||演算子(or)
||演算子では、「〇〇、又は〇〇の場合」という条件式を作ることができます。
let number = 100;
if (number == 50 || number == 100){
  console.log('numberは50、又は100です。');
} else {
  console.log('numberは50でも、100でもありません。');
}
「number == 50」と「number == 100」の条件式のどちらかが当てはまる場合にtrueが返され、最初の処理が実行されます。
!演算子(not)
!演算子では、「〇〇でない場合」という条件式を作ることができます。
let number = 100;
if (!(number >= 50)){
  console.log('numberは50以上ではありません。');
} else {
  console.log('numberは50以上です。');
}
「!(number >= 50)」の条件式が当てはまる場合にtrueが返され、最初の処理が実行されます。今回は当てはまらない為、elseの処理が実行されます。

6. まとめ

if文では、trueとfalseの真偽値を判定することにより、処理を分岐させられることがわかりました。if文の条件分岐をあらゆる場合に、効率的に使う為には、比較演算子と論理演算子の理解が必要です。
今まで学習した内容は、JavaScriptで正しく処理を実行する上でどれも必要なことなので、理解を深めていく為にも振り返りを忘れず取り組んでいこうと思います!

参考サイト :

PAGE TOP