9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

ベタ.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');
}

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

共通関数_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が普及した今2、コールバック関数というのもいまいち。コールバック関数は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を使いましょう。

9
9
2

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
9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?