if で配列の中身のtrue/falseを返す場合に便利なsomeメソッド[ES2015]

10321 ワード
es2015 JavaScript if文 カテゴリ メルカリ JavaScript テキストリンク

はじめに

某プログラミングスクールで、メルカリのコピーサイトを作りました。
その中でカテゴリのサイズを表示する部分の条件分岐の簡略化について考察しましたので、記事にします。

仕様

  • カテゴリは三段構造。孫、親、祖父（gem:ancestry使用）
  • 祖父を選んだら、子カテゴリが出現。子カテゴリを選んだら、孫カテゴリが出現。子カテゴリのジャンルによってサイズの出現分岐は決定する
  • 完成図

＊カテゴリの出現についての説明は割愛させていただきますのでよろしくお願いします。

some

someは配列が条件を一つ満たしていればtrueを返す
forEach(）のように配列の一つ一つを見ることができる。全てを調べて、trueを返す。

someでtrue/falseチェック
     //子カテゴリで選ばれたcategory_id
　　 let childId = $("#child_category option:selected").data("category")

　　//　someメソッド部分
    const size =[15,16,17,18,20,21,29,30,33,34,35,38,43,44,45]//サイズカテゴリが必要なcategory_id
    sizeTrue = size.some(function(s){//書き方はforEachと同じ
        return s == childId //例：childId = 20であれば、配列の中に20が存在するので、sizeTrueは trueとなる
    })
// sizeTrue = trueなら、サイズカテゴリを出現させる
 if(sizeTrue){
    $(".category-size").show();
  }

配列の中を検証した後、sizeTrue がtrue/falseか判別してくれる。forEach()だと配列の中身が出てくるので、似て非なる。便利。

ifの場合


meでtrue/falseチェック
     //子カテゴリで選ばれたcategory_id
let childId = $("#child_category option:selected").data("category")

　　//　someメソッド部分の代わり
 if(childId == 15){
    $(".category-size").show();
  }else if(childId == 16){
    $(".category-size").show();
  }else if(childId == 17){
    $(".category-size").show();
  }else if(childId == 18){
    $(".category-size").show();
  }else if(childId == 20){
    $(".category-size").show();
  }else if(childId == 21){
    $(".category-size").show();
  }else if(childId == 29){
    $(".category-size").show();
  }else if(childId == 30){
    $(".category-size").show();
  }
(中略）
}else if(childId == 45){
    $(".category-size").show();
  }

不可能ではないがDRYの概念からずれているし、非常に面倒であるので、やはりsome推奨

switchの場合

some以外の方法だと、switch文も便利


 //子カテゴリで選ばれたcategory_id
　　 let childId = $("#child_category option:selected").data("category")

switch( childId ) {
    case 16:
        // 処理を書く
        $(".category-size").show();
        break;
    case 17:
        // 処理を書く
        $(".category-size").show();
        break;  
    case 18: //必要なだけcaseを追加していく…
}
(略)

同じ条件式に対して,値のみが違う時には使いやすい。

まとめ

初めてQiitaに投稿してみました。
あまり細かく書きすぎても、本筋からズレてわかりづらくなるし
、かといってメソッドの使い方だけ書いても、使いどころがわかりづらい...
記述のバランス調整が難しいと思いました。