5
3

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 5 years have passed since last update.

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

Last updated at Posted at 2019-07-31

はじめに

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

仕様

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

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

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

5
3
2

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
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?