クロスブラウザ対応のために、ホイール系のイベントを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
が返ってくる
といったところでしょうか。改行するとびっくりするぐらいわかりやすくなりました。