確認ダイアログの戻り値はPromiseにしよう

確認ダイアログは共通関数になりがち

確認ダイアログを表示する処理って、ベタに書くとこんな ↓ 感じ。

ベタ.js

function sample0() {
  // 確認ダイアログ表示
  if (!window.confirm('Are you ready?')) {
    return;
  }

  // ※OK時の処理
  console.debug('OK');
}

window.confirmを直に呼び出すのは如何なものかと、こんな ↓ 共通関数を定義したりする。

共通関数_boolean.js

//----------------
// 共通関数
//----------------
function confirmExBoolean(message) {
  // 戻り値はboolean
  return window.confirm(message);
}

//========================================

function sample1() {
  // 確認ダイアログ表示
  if (!confirmExBoolean('Are you ready?')) {
    return;
  }

  // ※OK時の処理
  console.debug('OK');
}

これをさらに、Promise¹を使ったこういう ↓ 感じにしておきたい。

共通関数_promise.js

//----------------
// 共通関数
//----------------
function confirmExPromise(message) {
  if (window.confirm(message)) {
    return Promise.resolve();
  }
  return Promise.reject();
}

//========================================

function sample2() {
  // 確認ダイアログ表示
  confirmExPromise('Are you ready?')
    // ※OK時の処理
    .then(function() {
      console.debug('OK');
    });
}

なぜ Promise にしたほうがいいのか?

jQuery UI などを使用した確認ダイアログでは、ボタンクリック時の処理をコールバック関数で定義することが多い。(別の記事で書いた → jQuery UIで確認ダイアログを表示する)
これは、window.confirmを使用しないダイアログ表示では処理を止められないからだ。

このため、最初の例のように確認ダイアログの結果を boolean で返す関数では色々と具合が悪い。あとから仕様変更が発生したときとか。

かといって、Promiseが普及した今²、コールバック関数というのもいまいち。コールバック関数はPromiseに包んでしまおう。こんな ↓ 感じ。

showConfirmDialogを応用した共通関数.js

//----------------
// 共通関数
//----------------
function confirmExPromise(message) {
  var _promise = new Promise(function(resolve, reject) {
    // ※別途定義されたコールバック関数を受け取る関数を呼び出す
    showConfirmDialog(message, resolve, reject);
  });
  // 戻り値はPromise
  return _promise;
}

//========================================

// ※sample2と同じ
function sample3() {
  // 確認ダイアログ表示
  confirmExPromise('Are you ready?')
    // ※OK時の処理
    .then(function() {
      console.debug('OK');
    });
}

副次的な効果

確認ダイアログの戻り値がbooleanだと、処理がダラダラ記述されがち。
このインターフェイスなら、必然的にOK時の処理が関数に分割される。すっきりする。
また、戻り値がPromiseなら、Cancel時の処理もすっきり書ける。

すっきりした.js

// (共通関数部分は省略)

function executeTask() {
  console.debug('OK!');
}

function cancelTask() {
  console.debug('Cancel!');
}

function sample4() {
  // 確認ダイアログ表示
  confirmExPromise('Are you ready?')
    .then(executeTask)  // ※OK時の処理
    .catch(cancelTask); // ※Cancel時の処理
}

最後に

まとめたものをCodePenに置いておきます。

See the Pen 確認ダイアログの戻り値はPromiseにしよう by pale2f (@pale2f) on CodePen.

1. https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises ↩

2. IEの人はpolyfillを使いましょう。 ↩