1. 投稿の動機
実務の中でJavaScriptのコーディングの際、条件分岐（If）のリーダブルコードについて
様々なことを学びました。
条件分岐（If）のリーダブルコードについて学んだことを共有したいと思ったので、本
記事を投稿しようと考えました。
2. リーダブルコードがなぜ重要か
プログラミングでは、同じような処理を複数の場所で実行させたり、複雑なコーディン
グを避ける必要があります。なぜかというと、バグの修正や追加の処理を記述する必要
が出たとき、可読性の低いコーディングをしてしまうと、誤って触ってはいけないロジ
ックを修正してしまったり、そこがどんな処理をしているのかを理解するまでに時間が
かかってしまうといったデメリットが発生してしまうからです。
自分以外の人がコードを見た時に、そこではどんな処理をしているか、何が原因でバグ
が起きているのかをすぐに判断することができるようになるように常にリーダブル
コードを心掛けなければなりません。
3. 条件分岐（If）とは
JavaScriptのプログラミングの中で条件分岐（If）のコードを見る機会はとても多いと思
います。
条件分岐とは、ある条件に基づいて、その条件がtrueなのかfalseなのかで処理を分岐
させるプログラムです。
構文は以下になります。
if ( 条件１ ) {
// any code ...
} else if ( 条件２ ) {
// any code ...
} else {
// any code ...
}
4. Nullのみを判定
値がNullかどうかの判定は、次の記述方法で判定することができます。
const val = null;
const isNull = val == null; // true
5. undefinedも含めたNull判定
4で説明した方法でNullかどうかをチェックできるが、undefinedだった場合に対応で来
ません。undefined以外にも、例えば空白文字列などのチェックなどもすることがよく
あります。
そこで、falsyな値であることを利用します。
falsyとは論理型コンテキストに現れたときに偽とみなされる値です。
falsyには以下のようなものがあります。
・false（boolean）
・0 または-0（number）
・''(空白)または""(空白)（string）
・null（object）
・undefined（undefined）
・NaN（NaN）
falsyかどうかの判定は以下のように記述します。
const val = null;
const isFalsy_null = !val; // true
上のコードで"val = null"としていますが、もしもこれが"val = 0"や"val = undefined"であっても、"!val"とすることで"true"の結果を得ることができます。
6. 繰り返し処理の中での条件分岐
繰り返しの処理の中で条件分岐を使用する場面がよくあります。
ですが、記述の仕方によっては条件分岐のネストが深くなり、読みにくいコードに
なってしまいます。
以下のような例を考えます。
数値のみを要素に持つ配列を繰り返し、偶数の値の場合は合計値に加算し、
合計値が"5"を超えたタイミングで処理を終了するような場合を考えます。
const num_arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];
let total = 0;
for ( let num of num_arr ) {
if ( total < 5 ) {
if ( num % 2 === 0 ) {
total += num;
} else {
continue;
}
} else {
break;
}
}
console.log(total); // 6
上記コードは条件分岐処理の中に条件分岐がある記述方法です。
条件分岐のネストを避けた記述方法は以下のようになります。
const num_arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];
let total = 0;
for ( let num of num_arr ) {
if ( total < 5 ) break;
if ( num % 2 !== 0) continue;
total += num;
}
console.log(total); // 6
とても短いコードになりましたね！
悪い例では条件分岐をネストさせていましたが、ネスト避けることでシンプルで見やす
いプログラムになることがよくわかります。
まとめ
条件分岐について、以上のプログラミングを実装することで条件分岐に関するリーダブ
ルコードを実現することができます。
ちなみに、『6. 繰り返し処理の中での条件分岐』にあるネストを避けた記述の中で、
elseの記述を避けたコーディングになっていますが、これはelseを記述しなくても修正
前の処理と同じ動きをしています。
条件分岐は if~ else if ~ else を使用して条件をより細かく分けて処理を記述できます
が、elseについては記述しなくても正しい処理を記述することができる場合がありま
す。上のコードサンプルがその例と言えます。
不要なコーディングを避けることも、より可読性の高いプログラムを実現することにつ
ながります。
