PPP's Blog

雑コード帳

?が複数ついてる三項演算子は改行すると意味を理解しやすい

クロスブラウザ対応のために、ホイール系のイベントをjQueryで設定する記事を見ていたら、下のような変数宣言がありました。変数の中には、ブラウザごとで異なるホイール系のイベントの値が入るようです。

var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';

基本形の三項演算子はわかるのですが、?が複数ついているので何がどうなっているのか理解できませんでした。色々調べましたが、改行すると理解が早まりそうです。リンクしているMDNの記事はとてもわかりやすかったです。 一部、コードを引用します。

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// 以下のものと同等です。

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

引用元:条件 (三項) 演算子 - JavaScript | MDN

if … else if … else if … elseの形になっていることが改行でわかりやすくなるということですね。これをもとに、最初に書いた一行の変数宣言に改行を入れてみます。

var mousewheelevent =
      'onwheel' in document ? 'wheel'
: 'onmousewheel' in document ? 'mousewheel'
: 'DOMMouseScroll';

'onwheel' in documentがtrueならwheelが返ってきて、falseなら次の行へ。'onmousewheel' in documentがtrueならmousewheelが返ってきて、falseならDOMMouseScrollが返ってくる

といったところでしょうか。改行するとびっくりするぐらいわかりやすくなりました。