JSで処理を書いているとif文の中にifを書くこともあると思います。
ただ、if文を入れ子にすると可読性が下がり、読みにくい・わかりにくいコードになっていくと思います。今回入れ子が発生し、それを解消するために行った工夫を記載します。
##状況
かなりカンタンな例を作成しました。
1.名前と数値を設定
2.名前がメンバーと名付けた変数たちに含まれるか確認(大分類)
3.含まれる場合は数値が0か+(プラス) か -(マイナス) かで条件分岐(小分類)
コードで書くとこんな感じ
const name = 'yamada';
const num = 100;
//メンバー
const member1 = 'sato';
const member2 = 'yamada';
const menber3 = 'suzuki';
//大分類:設定した名前がメンバー変数にあるか確認
if(name === member1 || name === member2 || name === member3){
//大分類:設定した名前がメンバー変数にある場合
//小分類:設定数値が 0 か +(プラス) か -(マイナス) か
if(num === 0){
//0の場合
} else if (num > 0) {
//+(プラス)の場合
} else {
//-(マイナス)の場合
}
}
ifが入れ子になってます。
##解消後
※コメントでご指摘を頂き、内容を修正しました。必要に応じてブラッシュアップして行けたらと思います。
####修正点
・一度評価した式を再度評価することは避ける。(効率性)
・入れ子で分けていた大分類・小分類の分岐はわかりやすいままにする
解消後のコード
const name = 'yamada';
const num = 100;
//メンバー
const member1 = 'sato';
const member2 = 'yamada';
const menber3 = 'suzuki';
//メンバーを配列化
const list = [member1, member2, member3];
if(!list.includes(name)) {
//大分類:設定した名前がメンバー変数にない場合
} else if (num === 0) {
//小分類:設定数値が 0 の場合
} else if (num > 0) {
//小分類:設定数値が +(プラス) の場合
} else {
//小分類:設定数値が -(マイナス) の場合の場合
}
##まとめ
少しずつコードが書けるようになってくると、やりたいことは実現できるが、余計な動作も記載してしまっている、可読性が悪い、コードが長すぎて時間がかかる、などまだまだプログラミングは奥が深く、課題は山積みだと実感します。。!!
少しずつ綺麗で可読性が高くわかりやすいコードが書けるように勉強していきたいとおもいます。