LoginSignup
184
174

More than 5 years have passed since last update.

このくらいまでならjsで三項演算子使ってもいいよね、っていうパターン(個人的に)

Last updated at Posted at 2013-06-16

初投稿なのでちょっと読み物っぽく三項演算子について書いてみます。(たぶん内容的にはたいしたことは書いてません。)


みなさん三項演算子って使いますか?僕はこいつがけっこう好きで好んで使っています。
僕が使うパターンとしてはだいたい2パターンだけに限られています。

僕がよく使うパターン1:ふつうの三項演算子による式

var ans = ( ( Math.random() * 100 ) > 50 ) ? 'larger' : 'smaller';
変数 = 条件式 ? trueの時の値 : falseの時の値 ;

これは一般的ですよね。
だいたい、誰が書いても書き方はだいたい一緒のはず。僕もよく使います。

ついでに別バリエーションも(値が長くなった時は僕はこう書いてます。)

var ans = (
      ( somethingBool === true ) && ( ( Math.random() * 100 ) > 50 )
    ? ( somethingHead1 + 'larger' + somethingTail1 )
    : ( somethingHead2 + 'smaller' + somethingTail2 )
);
変数 = (
      条件式
    ? trueの時の値
    : falseの時の値
);

僕がよく使うパターン2:if文で変数に代入する構文の代替

もうひとつ、個人的によく使うパターンの書き方です。
「変数に代入する値を複数条件で変えたいだけ」の時に使うパターンです。


//こういうif文があるとします。
var score = Math.round( Math.random() * 100 );
var str;
if( score === 100 ){ str = "100点"; }
else if( score >= 80 ){ str = "80~99点"; }
else if( score >= 50 ){ str = "50~79点"; }
else if( score >= 30 ){ str = "30~49点"; }
else{ str = "0~29点"; }
alert( str );

//
// ↓ こんなかんじに書きかえます。少し見通しを良くできる。
// ↓ また、後で見た時にstrに値を代入しているだけということがわかりやすいのもポイントかと。
//

//三項演算子による式の結果を変数に代入するパターン。
var score = Math.round( Math.random() * 100 );
var str =
      (score === 100) ? "100点"
    : (score >= 80) ? "80~99点"
    : (score >= 50) ? "50~79点"
    : (score >= 30) ? "30~49点"
    : "0~29点";
alert( str );

//
// ↓ 制御構造じゃなくて式なので直に関数の引数にもとれます。
// ↓(でもちょっとわかりにくいかもしれん。。)
//

//三項演算子による式の結果を引数として渡すパターン。
var score = Math.round( Math.random() * 100 );
alert(
      (score === 100) ? "100点"
    : (score >= 80) ? "80~99点"
    : (score >= 50) ? "50~79点"
    : (score >= 30) ? "30~49点"
    : "0~29点"
);

書き方の作法としては決まりは無いと思いますが、僕は並び方がif文と同じ感じになるように書いています。コロンは行末じゃなくて頭です。

変数 =
     条件式① ? ①が真なら値A
    : ①が偽なら条件式② ? ②が真なら値B
    : ②が偽なら条件式③ ? ③が真なら値C
    : ③が偽なら条件式④ ? ④が真なら値D
    : ④が偽なら値E;

どうでしょうか。

さらに、もし、条件式や結果が長くなったらこう書いてます。

var score = Math.round( Math.random() * 100 );
var str = 
      ( score === 100 )
    ? ( somethingHead1 + "100点" + somethingTail1 )
    : ( score >= 80 )
    ? ( somethingHead2 + "80~99点" + somethingTail2 )
    : ( score >= 50 )
    ? ( somethingHead2 + "50~79点" + somethingTail2 )
    : ( score >= 30 )
    ? ( somethingHead2 + "30~49点" + somethingTail2 )
    : ( somethingHead3 + "0~29点" + somethingTail3 );
alert( str );

以上、値を変数に代入するだけならif文じゃなくて三項演算子にしたほうがすごく効果的だよね!っていう話でした。
いちおう、jsでは分岐をネストさせるパターンなんかはあまり書かない方がよいのではないかと思っていますが、このくらいまでならOKではないか、と思ってます。
利点としては、演算子による式なので制御構造に比べて速度が速いとか聞いたことがあります。細かい話ですが。
ちょっと調べたら昔見たサイトがでてきた。三項演算子をネストさせたい方はご一読ください!

http://hp.vector.co.jp/authors/VA010341/conditional.html

参考

http://blog.satt.jp/article/272435607.html

蛇足

最近、自分のコードのスペースのあけ方やらが書籍と異なっているのがやたら気になっています。
ていうか、これ駄文だなあ…w

184
174
6

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
184
174