確認ダイアログは共通関数になりがち
確認ダイアログを表示する処理って、ベタに書くとこんな ↓ 感じ。
function sample0() {
// 確認ダイアログ表示
if (!window.confirm('Are you ready?')) {
return;
}
// ※OK時の処理
console.debug('OK');
}
window.confirm
を直に呼び出すのは如何なものかと、こんな ↓ 共通関数を定義したりする。
//----------------
// 共通関数
//----------------
function confirmExBoolean(message) {
// 戻り値はboolean
return window.confirm(message);
}
//========================================
function sample1() {
// 確認ダイアログ表示
if (!confirmExBoolean('Are you ready?')) {
return;
}
// ※OK時の処理
console.debug('OK');
}
これをさらに、Promise
1を使ったこういう ↓ 感じにしておきたい。
//----------------
// 共通関数
//----------------
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
に包んでしまおう。こんな ↓ 感じ。
//----------------
// 共通関数
//----------------
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時の処理もすっきり書ける。
// (共通関数部分は省略)
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.
-
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises ↩
-
IEの人はpolyfillを使いましょう。 ↩