【JavaScriptの基本】可読性を上げるためのif文の基本形・省略形の解説

if文はプログラミングで頻繁に使われており、JavaScriptでのフロントエンド開発においても必須の知識です。

今回はプログラミングする上で、初期段階で学ぶif文（条件分岐）の基本を初心者向けにわかりやすく解説していきます。この記事を通して、if文を深く理解していきましょう。

if文（条件分岐）とは

if文とは、プログラミングでもっとも使われている制御文です。条件を与えて処理を分岐させることができます。

条件が真（true）の場合はif文のブロック {} 内の処理を実行します。
条件が偽（false）の場合は、if文のブロック {} をスルーするため何も実行されません。

ただし、else/else ifを用いることで、条件が偽（false）だった場合にelse/else if文のブロック {} 内の処理を実行することができます。

つまり、条件に一致する場合の処理と、一致しない場合の処理をそれぞれ分けて記述することで、異なる結果を返すことができるのがif文の特徴です。

if文の基本形

まずはif文の基本構文を抑えましょう。

if文

if (条件式) {
  実行する処理; //真（true）の場合に実行される
}

サンプルコード

let a = 5;
if (a < 8) { 
  console.log(a); //出力結果　5
}

”aが8より小さい場合”という条件に当てはまっているため、if文のブロック{}内の処理が行われます。結果として”5”と出力されます。

else文

if (条件式) {
  実行する処理; //真（true）の場合に実行される
} else {
  実行する処理; //偽（false）の場合に実行される 
}

else文を使うことによって、if文の条件に当てはまらない場合の処理を記述することができます。

サンプルコード

let a = 5;

if (a < 3) {
  console.log('aは3より小さいです')
} else {
  console.log('aは3より大きいです')
}

実行結果

”aが5”と定義されていることに対し、if文の条件は”aが3より小さい場合”ですので、当てはまりません。そのため、if文のブロック{}はスルーされ、else分のブロック{}内の処理が実行されます。

else if 文

if (条件式1) {
  実行する処理; //条件式1が真（true）の場合に実行される
} else if (条件式2) {
  実行する処理; //条件式1が偽（false）の場合、かつ条件式2が真(true)の場合に実行される
} else {
  実行する処理; //全て当てはまらない場合に実行される
}

else ifを使うことによって、if文の条件に当てはまらない場合の条件を指定したり、elseを使ってどれにも当てはまらない場合の処理を記述することができます。

サンプルコード

let a = 100;

if (a < 50) {
  console.log('aは50より小さいです')
} else if (a < 120) {
  console.log('aは120より小さいです')
} else {
  console.log('aは100です')
}

実行結果

”aが100”と定義されていることに対し、if文の条件は”aが50より小さい場合”ですので、当てはまりません。そのため、if文のブロック{}はスルーされ、else if分へ進みます。

else if分の条件は”aが120より小さい場合”ですので、当てはまります。よって、else if文のブロック{}内の処理が実行されます。
その先のelse文はどの条件にも当てはまらない場合に実行される処理のため、今回は通りません。

このように条件分岐がいくつかある場合は、上から順番に当てはまる条件を通っていきます。処理が一度実行されてしまえば、次にある処理は実行されずにif文から抜け出します。

また注意点として、else if文を単独でしようすることはできず、必ずif文を先頭に記述する必要があります。

論理演算子を使用する

if分やelse if文で、2つ以上の条件式を組み合わせて処理を実行したい時は、論理演算子（and、or、not）を使用します。これにより、より詳細な条件指定が可能になります。

論理積（and）

if (条件式1 && 条件式2) {
実行する処理; //条件式1と条件式2が真（true）の場合に実行される
}

条件式の間に「&&」を挟むことで、条件がいずれも真（true）の場合に処理を実行できます。条件を１つでも満たさない場合は、処理は実行されません。

論理和（or）

if (条件式1 || 条件式2) {
実行する処理; //条件式1または条件式2が真（true）の場合に実行される
}

条件式の間に「||」を挟むことで、条件のいずれかが真（true）の場合に処理を実行できます。条件を1つでも満たせば、その他の条件を満たさずとも処理は実行されます。

論理否定（not）

if (!条件式) {
実行する処理; //条件式がfalseの場合に実行される
}

条件式の前に「!」を記入すると、条件を満たさない場合に処理が実行されます。結果が逆になると覚えておきましょう。

if文の省略形

上記の基本形をおさえたところで、省略形の書きかたを身につけるとコードの可読性が上がります。

処理が一つの場合

if (条件式) 実行する処理; 

サンプルコード

if (true) console.log('true'); //出力結果　true

if文には通常ブロック{}内に処理を記述しますが、実行したい処理が一つだけの場合はブロック{}を省くことができるため、一行で記述することが可能になります。

三項演算子を使う場合

条件式 ? trueの場合の処理 : falseの場合の処理;

三項演算子と呼ばれる演算子を使用して処理を分岐させることができます。
条件式が真(true)だった場合に前者のtrueの場合の処理が通り、条件式が偽(false)だった場合は後者のfalseの場合の処理が通ります。

サンプルコード

let a = 5;
let b = 2;

const result = a < b ? 'aはbより小さい' : 'aはbより大きい';
console.log(result);

実行結果

条件式として記述されたa < bを評価し通るべく処理を判断するため、この場合はfalseの処理が通ります。

条件式には変数を使うことができます。
三項演算子を使うと行を省略することができて、通常のif文と比べて見やすくなったのが分かるのではないでしょうか。

ただし、複数の条件分岐が必要な場合など複雑になる場合は、三項演算子を使うとかえって分かりにくくなってしまいますので注意が必要です。状況に応じて基本形と使い分けるのが良いでしょう。

プログラミングに必須のif文をしっかり理解しよう

どのプログラミング言語にもif文の活用場面は非常に多く、JavaScriptの場合にも同様のことが言えます。まずはif文の基本形の書きかたをしっかりおさえることで、応用をきかせることができるようになります。

if文の省略形を用いることで、可読性が上がったり、メンテナンスがしやすくなるメリットがありますが、複数人で開発をする場合などは、省略形だと誰もがわかるようにコメントを残すなど、工夫をすると良いでしょう。

また、if文はプログラムの基本であり本質と言えるものですので、非エンジニアでもエンジニアと一緒に仕事する環境にある人は最低限の知識として知っておいた方が良いでしょう。

さらにif文の理解を深めておきたい方はこちらの記事も参考にしてください。

・JavaScriptでif文を使って条件分岐させる方法【初心者向け】現役エンジニアが解説 | TechAcademyマガジン
https://techacademy.jp/magazine/5411
・【JavaScript】if文を使った条件分岐の書き方｜TECH PLAY Magazine ［テックプレイマガジン］
https://techplay.jp/column/469
・読み手にやさしい if 文を書きたい – Qiita
https://qiita.com/Nossa/items/3fb1f1e4c429cacd3365