jQueryで「$.when」の中で「if」を使いたい

Question

前提・実現したいこと

該当のソースコードで、「getB()」だけ「if」の中に入れたいと思っています。

このような分岐が目的です↓
if( double_actions === true ){ getB() }

該当のソースコード

get( double_actions ); // double_actions にはAとB２つとも実行するか否かのtruthyが入る

function get( double_actions ) {
  $.when(
    getA(),
    getB() // double_actions === true の場合だけ実行したい
  )
  .then( function( A, B ) {
      console.log( 'A=' + A );
      console.log( 'B=' + B );
  })
}

function getA(){
  var deferred = new $.Deferred;
  setTimeout( function() {
    deferred.resolve( 'データA' );
  }, 500);
  return deferred.promise();
}

function getB(){
  var deferred = new $.Deferred;
  setTimeout( function() {
    deferred.resolve( 'データB' );
  }, 1000);
  return deferred.promise();
}

試したこと

まず試したのがこうですが、「SyntaxError: expected expression, got keyword 'if'」というエラーで「if」が使えないようでした。

function get( double_actions ) {
  $.when(
    getA(),
    if( double_actions === true ){ getB() } // エラー
  )
  .then( function( A, B ) {
      console.log( 'A=' + A );
      console.log( 'B=' + B );
  })
}

そして「if」を使う方法を調べているうちに以下の書き方を見つけました。しかしこれも同じエラーで「if」は使えないようでした。

function get( double_actions ) {
  $.Deferred().resolve().then( function() { // ここを変更
    return getA(),
    if( double_actions === true ){ getB() } // エラー
  })
  .then( function( A, B ) {
      console.log( 'A=' + A );
      console.log( 'B=' + B );
  })
}

最終的に無理やりな気がしますがなんとか解決できたのが以下です。

これは「getB()」を実行しないのではなく、実行するけどすぐに「return」するという方法なのですが、かっこよさとしてはどうなのかなという気が致します。

get( true ); 

function get( double_actions ) {
  $.when(
    getA(),
    getB( double_actions ) // ifはここではなく、この関数の中で判定する
  )
  .then( function( A, B ) {
      console.log( 'A=' + A );
      console.log( 'B=' + B );
  })
}

function getA(){
  var deferred = new $.Deferred;
  setTimeout( function() {
    deferred.resolve( 'データA' );
  }, 500);
  return deferred.promise();
}

function getB( double_actions ){
  if( !double_actions ) return; // ここで判定する
  var deferred = new $.Deferred;
  setTimeout( function() {
    deferred.resolve( 'データB' );
  }, 1000);
  return deferred.promise();
}

上のコードでできたのならそれでいいだろという話かもしれませんが、もし「$.when」の中で「if」を使う方法があれば後学のためにご教授願えればと思い、ご質問を投稿させて頂きました。
すみませんがどなたかお知恵を拝借できませんでしょうか。

Answer 1

$.when の引数に if を使えないのは、引数は式でないといけないのに、if は文だから、です。
式と文の違いについては、以下の記事をどうぞ。
参考: 文と式 · JavaScript Primer #jsprimer

function get( double_actions ) {
  $.when(
    getA(),
    if( double_actions === true ){ getB() } // エラー
  )
  // 略

で、if のようなことを式でやるには、条件演算子というのが使えると思います。
参考: 【JavaScript入門】条件(三項)演算子の使い方と活用例まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

function get( double_actions ) {
  $.when(
    getA(),
    double_actions ? getB() : undefined
  )
  // 略

Comments

[nyoronyoronyoro]

式と文の違いも知りませんでした。条件演算子は式だから使えるわけですね。どうもありがとうございます。

Answer 2

三項演算子で括るという案や即時実行関数を使えば解決しそうですね。
関数を作る際はIE11対応を行わないのならアロー関数の書き方が簡素でおすすめです

ポイントは$.when(fn, fn)をまるっとくくってしまうことでしょうか。

// 三項演算子ルート
function get( is_double_actions ) {
  (is_double_actions
    ? $.when(getA(), getB())
    : $.when(getA())
  ).then( function( A, B ) {
    console.log( 'A=' + A );
    console.log( 'B=' + B );
  });
}

// 即時実行関数(アロー関数)
function get(is_double_actions) {
  (() => {
    if (!is_double_actions) return $.when(getA());
    return $.when(getA(), getB());
  })().then((A, B) => {
    console.log( 'A=' + A );
    console.log( 'B=' + B );
  });
}

これは「getB()」を実行しないのではなく、実行するけどすぐに「return」するという方法なのですが、かっこよさとしてはどうなのかなという気が致します。

これ自体は「ガード節」という超優秀テクニックの一つです。
リーダブルコードという神書籍でも1章使って紹介されています。

今回のケースに限っていえば、
getBを実行すると決めたのなら実行しろよって話ですからそのガード節は微妙でしょうね。
この辺が質問文書いてる最中の違和感だと思います。

---

【おまけ】 そもそもdouble_actionsが微妙説

これ2個専用のコードなんですよね。
3個になったらどうすんねん。4個は？
この辺考えるとあまり良いコードではありません。

JavaScriptの全ての関数やメソッドはapplyメソッドを所持しています。
だからやるべき内容を配列にして所持しておき、applyを使って展開&実行という形に持っていくのが自然でしょう。

// 欲しいactionは最初から配列形式でもっておく
// actions = [getA(), getB()]
function get(actions) {
  $.when
    .apply(null, actions)
    .then(function (A, B) {
      console.log( 'A=' + A );
      console.log( 'B=' + B );
    });
}

更におまけとして
ここまでくるとAやBという決め打ちのコールバック関数も微妙なのでオブジェクト形式で持たせてみます。

// actions = {A: getA(), B: getB()}
function get(actions) {
  $.when
    .apply(null, Object.values(actions))
    .then(functions(){
      var keys = Object.keys(actions);
      for (var i = 0; i < arguments.length; i++) {
        console.log(keys[i] + "=" + arguments[i]);
      }
    });
}

function main (is_double_actions) {
  var actions = {};
  actions.A = getA();
  if (is_double_actions) {
    actions.B = getB();
  }
  get(actions);
}

このように配列を作ってfor文で一気に処理してしまうというのはめちゃくちゃ使えるテクニックなので検討してみてくださいね。

Comments

[nyoronyoronyoro]

大変丁寧に、しかも見本コードまでどうもありがとうございます。

まずforを使わない方を試させて頂きました。以下になるかと思ったのですが、CODEPENなどで実行しますとAB共にundefinedになってしまうようです。

どの記述が問題なのか、お手数ですが再度教えて頂けませんでしょうか。

main( true ); // 実行はget()でなくmain()にする

function main (is_double_actions) {
var actions = {};
actions.A = getA();
if (is_double_actions) {
actions.B = getB();
}
get(actions);
}

// 欲しいactionは最初から配列形式でもっておく
// actions = [getA(), getB()]
function get(actions) {
$.when
.apply(null, actions) // $.whenに対して.applyをかけると何が起こっているのでしょうか？
.then(function (A, B) {
console.log( 'A=' + A ); // "A=undefined" になってしまいます
console.log( 'B=' + B ); // "B=undefined" になってしまいます
});
}

function getA(){
var deferred = new $.Deferred;
setTimeout( function() {
deferred.resolve( 'データA' );
}, 500);
return deferred.promise();
}

function getB(){
var deferred = new $.Deferred;
setTimeout( function() {
deferred.resolve( 'データB' );
}, 1000);
return deferred.promise();
}

[miyabi-sun]

配列とオブジェクトの違いです。
例文のコードを混ぜてしまっているのが失敗の元です。

配列というのは`[getA(), getB[]]`のようなものを指します。
オブジェクトは`{A: getA(), B: getB()]`という風にキーと値がセットになったものを指します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
JSの全ての関数が所持するapplyメソッドは第二引数で配列をくれと言っています。
これに配列ではなくオブジェクトを投げ込んでも当然動作はしません。

なのでObject.keys等を使いながらオブジェクトからキーの配列や、値の配列に変換しながら作業しています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

---

> $.whenに対して.applyをかけると何が起こっているのでしょうか？
$.whenというjQueryの関数は、`$.when(引数1, 引数2, 引数3....)`という風に可変長の引数を渡す作りになっています。
3つや4つに増えたらどうするねん！に対して最初から配列で持っておけという回答がありますが、
配列から`$.when(引数1, 引数2, 引数3....)`を実行するのはちょっと不可能ですよね。

そこで、JavaScriptのネイティブな機能として全ての関数・メソッドは`apply`メソッドを所持するルールになっています。
これを使うことで`$.when.apply(null, [引数1, 引数2, 引数3...])`という解決策が取れます。

[miyabi-sun]

紛らわしかった＆動かないコードだったので修正しましたよ。

[nyoronyoronyoro]

ご修正ありがとうございます。たしかにObject.keysにしていただいたコードで機能しました。連想配列のキーを配列にしてくれるとは便利なメソッドですね。
.applyに関してのご説明もどうもありがとうございます。大変勉強になる数々のコメントに感謝申し上げます。

Answer 3

Bにundefinedを返すことがマストでなければ以下でも

    $.when(
      getA(),
      double_actions && getB()
      )

Comments

[nyoronyoronyoro]

ありがとうございます。そちらはどういう意味ですか？それを書くと左辺が真のとき、右辺が実行される？という意味ですか？「&&」は「かつ」だと思っていました。

[miyabi-sun]

JavaScriptに於けるイディオムの一つです。
イディオムってのは知る人ぞ知る必殺技みたいなテクニックを指しています。

JavaScriptに於ける`&&`は理解の通り「かつ」という意味ですが、
if文等の条件式に投げ込んでtrue or falseになる場合で挙動が変化します。

true: 左辺が真の場合、右辺評価して右辺を返す
false: 左辺が偽なので、右辺を評価せず左辺をそのまま返す

`double_actions && getB()`は、
`double_actions`がtrueならば`getB()`を返し
`double_actions`がfalseならば右辺の`getB()`を返さず左辺を返すという挙動になります。

[nyoronyoronyoro]

なるほど、ご説明ありがとうございます。理解できました。