条件分岐（if, else） Javascript初学者講座

プログラムは条件分岐を通ることで様々なパターンの処理を行うことができます。JavaScriptにはいくつかの条件分岐の構文がありますが、今回は基本であるif文について勉強していきます。

if

If文による条件分岐は下記のように記述します。

If ( 条件式 ) {
  条件に合った場合に実行する処理を記述
}

条件式にあった場合の結果をtrueと呼び、合わなかった場合の結果をfalseと呼びます。

else

if文は条件に合った場合に{ }（波括弧）内のプログラムを実行しますが、下記のようにelseを付与することで条件式に合わなかった場合の処理を記述できます。

If ( 条件式 ) {
  trueの場合に実行する処理を記述
} else {
  falseの場合に実行する処理を記述
}

elseif

else の箇所に elseif を使うことで別の条件式での分岐を作ることができます。

If ( 条件式1 ) {
  条件1がtrueの場合に実行する処理を記述
} elseif (条件式2) {
  条件1がfalse、条件2がtrue場合に実行する処理を記述
} else {
  条件1,2がfalseだった場合に実行する処理を記述
}

基本の条件式

次は条件式を見ていきましょう。まずは変数に値があるかないかの条件分岐です。

let a;

if (a) {
  console.log("true");
} else {
  console.log("false");
}
// false

この場合は変数aに何も代入されていない状態なのでfalseとなります。
変数が代入されている状態でも0（ゼロ）であったり空欄の場合はfalseとなります。

次は変数と値を比較した条件分岐を作ります。

const ary = [1,2,3,4,5,6,7,8,9,10];

ary.forEach((value) => {
  if (value % 2 === 0 ) {
    console.log(value);
  }
});

剰余演算を使い、偶数場合のみ処理を実行しています。条件式の=（イコール）は2つか3つの時がありますが、3つの場合は値のデータ型まで一致するかを評価します。

if ( a === "1" ) {
  console.log("true");
} else {
  console.log("false");
}
// false 変数の値は数値型のため文字列の1との判定はfalseに

if ( a == "1" ) {
  console.log("true");
} else {
  console.log("false");
}
// true 変数の値のデータ型が合わなくてもtrueとなる

ここまで上げてきた条件式は単純なものですが、様々な条件式が作れるのでいくつか上げていきます。Booleanを使うことでif文を使わずとも評価ができます。

比較演算

数値の比較演算で評価を行います。下記の場合は変数aが11以下であるかを評価します。

const a = 10;
console.log(Boolean(a <= 11));
// true

比較演算の他パターンをいくつか紹介しておきます。

a == b	aとbの値が一致の場合にtrue
a !== b	aとbの値が一致しない場合にtrue
a < b	aよりbの値が大き場合にtrue
a > b	aよりbの値が小さい場合にtrue

複数条件の一致

If文を入れ子にすれば複数の条件式でtrueの場合の処理を記述することができます。

const a = 100;
const b = 10;

if ( a > 99) {
  if ( b < 11 ) {
    console.log(true);
  }
}
// true

ただしこの記述はあまり良い書き方ではありません。ifの入れ子が多くなればなるほど可読性が下がっていきます。こういった場合は条件式に and を使うことで1つのif文の条件式で記述ができます。

const a = 100;
const b = 10;

if ( a > 99 && b < 11) {
  console.log(true);
}
// true

どちらかに一致

andは複数の条件全てに当てはまる場合にtrueとなりますが、どちらかに一致した場合にtrueとしたい場合には || を使用します。

const a = 100;

if ( a == 10 || a == 100) {
  console.log(true);
}
// true

終わりに

条件式はここで勉強した以外にも様々なものがあります。うまく条件式を作れることは、作りたいプログラムを完成させるための近道と私は考えています。
これからも色々な条件式を勉強していきましょう。

ここまで読んでくださり、ありがとうございました。

参考記事
String.prototype.indexOf() | MDN
Boolean | MDN

制作協力
サムネイル制作：うみ Twitter