Help us understand the problem. What is going on with this article?

ifの入れ子をできるだけ少なくするための工夫

JSで処理を書いているとif文の中にifを書くこともあると思います。
ただ、if文を入れ子にすると可読性が下がり、読みにくい・わかりにくいコードになっていくと思います。今回入れ子が発生し、それを解消するために行った工夫を記載します。

状況

かなりカンタンな例を作成しました。

1.名前と数値を設定
2.名前がメンバーと名付けた変数たちに含まれるか確認(大分類)
3.含まれる場合は数値が0か+(プラス) か -(マイナス) かで条件分岐(小分類)

コードで書くとこんな感じ

test.js
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が入れ子になってます。

解消後

※コメントでご指摘を頂き、内容を修正しました。必要に応じてブラッシュアップして行けたらと思います。

修正点

・一度評価した式を再度評価することは避ける。(効率性)
・入れ子で分けていた大分類・小分類の分岐はわかりやすいままにする 

解消後のコード

test.js
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 {
    //小分類:設定数値が -(マイナス) の場合の場合
}

まとめ

少しずつコードが書けるようになってくると、やりたいことは実現できるが、余計な動作も記載してしまっている、可読性が悪い、コードが長すぎて時間がかかる、などまだまだプログラミングは奥が深く、課題は山積みだと実感します。。!!
少しずつ綺麗で可読性が高くわかりやすいコードが書けるように勉強していきたいとおもいます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした