🛣️

JavaScriptを一から理解する: 制御構文(if...else)について

2022/02/05に公開

JavaScript

Web

制御構文

tech

はじめに

はじめまして、Doxperと申します。
今回はJavaScriptの制御構文(if)命令の使い方について説明します。

この記事でできるようになること

制御構文とは何か理解することができる
if命令の使い方、種類を学ぶことができる

対象読者

エンジニアを目指している同士
JavaScriptの基礎を身につけたい方
過去にプログラミング学習に挫折した方
プログラミング言語は他に触ったことがない方

JavaScript Control Flow

どんなに複雑なプログラムであっても分解すると大きく3つの動きに分類できます。

順次
分岐
繰り返し

多くのプログラミング言語は上記の3つの動きを元にプログラムを組み立てていきます。そしてこの3つの単純な制御構造を利用してプログラムを組み立てることを構造化プログラミングと呼びます。

各制御構造をまとめると以下のようになります。

	概要
順次	命令を提示された順番に実行
分岐	ある条件を元に次に行う動作を変更
繰り返し	指定された範囲の動作を繰り返す

if命令

今回は分岐の制御構文if命令についてご紹介します。
JavaScriptのif命令には3つの形式があります。

if文
if...else文
if...else if文

一つずつ見てみましょう。

if文

if (条件式) {
  //条件式がtrueの時に実行する命令
}

if文は括弧()の中の条件式を評価します。
もしも条件式がtrueの場合はブロック({})内の命令を実行します。
falseの場合はブロック内の命令は実行されません。

以下は条件式で使用される演算子の一覧です。

比較演算子

演算子	概要	例
`==`	左辺と右辺の値が等しい場合は`true`	`x == y`
`!=`	左辺と右辺の値が等しくない場合は`true`	`x != y`
`===`	左辺と右辺の値が等しく、データ型も同じ場合は`true`	`x === y`
`!==`	左辺と右辺の値が等しくない場合、またはデータ型が異なる場合は`true`	`x !== y`
`>`	左辺が右辺よりも大きい場合は`true`	`x > y`
`>=`	左辺が右辺以上の場合は`true`	`x >= y`
`<`	左辺が右辺よりも小さい場合は`true`	`x < y`
`<=`	左辺が右辺以下の場合は`true`	`x <= y`

論理演算子

演算子	概要	例
`&&`	オペランドの両方が`true`であれば`true`を返します。そうでなければ`false`を返します。	`x && y`
`\|\|`	オペランドのどちらかが`true`の場合は`true`を返します。両方が`false`の場合は`false`を返します。	`x \|\| y`
`!`	オペランドが`false`の場合は`true`を返します	`!x`

演算子に関する詳しい説明は以前の記事をご参照ください。

実際の使用例を見てみましょう。

const num = 10;
// 変数numが5よりも大きいかを評価
if (num > 5) {
  console.log("このコードは実行されます!");
}

if...else文

if文では追加でelseをつけることもできます。

if (条件式) {
    //条件式がtrueの時に実行する命令
} else {
    //条件式がfalseの時に実行する命令
}

if...else文では条件式がtrueと評価されたとき、ifのブロック内のコードを実行します。
また条件式がfalseと評価された時はelseのブロック内のコードが代わりに実行されます。

//数字が基数か偶数かを判定する

const num = prompt("数字を入力してください");

//偶数か判定
if (num % 2 === 0) {
  console.log(`${num}は偶数です`);
  //基数の判定
} else {
  console.log(`${num}は基数です！`);
}

if...else if文

else if命令を利用することで複数の分岐を表現することも可能です。

if (条件式1) {
  //条件式1がtrueの時に実行される命令
} else if (条件式2) {
  //条件式2がtrueの時に実行される命令
} else {
  //全ての条件式がfalseの時に実行される命令
}

使用例を見てみましょう。

let num = 20;

if (num >= 20) {
  console.log("変数numは20以上です");
} else if (num >= 10) {
  console.log("変数numは10以上です");
} else {
  console.log("変数numは10未満です");
}
// 結果:変数numは20以上です

以下のコードでは意図した結果を得られません。

let num = 10;
if (num >= 5) {
  //このブロックが実行される
  console.log("変数numは5以上です");
} else if (num >= 10) {
  //このブロックは実行されない
  console.log("変数numは10以上です");
} else {
  console.log("変数numは5未満です");
}

// 結果:変数numは5以上です

ネストされたif命令

if命令では互いに入れ子にすることでより複雑な条件分岐を実現することが可能です。
制御命令を入れ子にすることをネストすると呼びます。
以下がネストされたif命令になります。

// 値が正の数か負の数か0かを判定

const num = 0;

if (num >= 0) {
  if (num == 0) {
    console.log("変数numは0です");
  } else {
    console.log("変数numは正の数です");
  }
} else {
  console.log("変数numは負の数です");
}
// 結果:変数numは0です

if命令の省略記法

ブロック内の命令が一文だけの場合{}を省略することが可能です。

let num = 10;

//省略しない書き方
if (num >= 5) {
  console.log("変数numは5以上です");
} else {
  console.log("変数numは5未満です");
}

//省略した書き方
if (num >= 5)
    console.log("変数numは5以上です");
 else 
   console.log("変数numは5未満です");

おわりに

いかがでしたでしょうか？
今回はJavaScriptの制御構文(if)命令の使い方についてご説明しました。
if命令の他にもswitch命令や条件演算子(三項演算子)など条件によって処理を分岐させる命令が存在します。今回紹介していないものは次回以降の記事でご紹介します。

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

Control Flow in JavaScript. What is control flow? What type of… | by Rianna Cleary | Medium
構造化プログラミング - Wikipedia
プログラムの基本は「順次」「分岐」「繰り返し」 | デジんちゅ（でじんちゅ）
JavaScript if...else Statement (with Examples)
山田祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで