2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-24

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

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

2
2
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?