JavaScript にはwindow.confirmというダイアログを表示してユーザーの応答を要求し、その応答内容を使えるメソッドが存在します。
window.confirm – Web API ｜ MDN
名前の通り確認のために使うのが主であり、凝ったデザインが不要なページの確認をはさむ操作でよく使うメソッドです。これを並び替えの比較関数に用いることで簡単にユーザーに比較を任せたソートを作れます。具体的には次です。
arr.sort((a, b) => window.confirm(`${a} > ${b} ?`));
かなり短いです。JavaScript の sort は次の様に並び替えの順序を定めます。このため true か false を返せばそのまま大なり小なりの役割を果たしてくれます。
compareFn(a, b) の返値 |
ソート順 |
|---|---|
| > 0 | a を b の後に並べる |
| < 0 | a を b の前に並べる |
| === 0 | a と b の元の順序を維持する |
Array.prototype.sort() – JavaScript ｜ MDN
このソートを実際に組み込んだコードとデモが次です。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>対話ソートデモ</title>
</head>
<body>
<div id="display"></div>
<button onclick="handleSort()">並び替え開始</button>
<script>
const arr = [0, 4, 3];
document.getElementById('display').innerText = JSON.stringify(arr);
const handleSort = () => {
arr.sort((a, b) => window.confirm(`${a} > ${b} ?`));
document.getElementById('display').innerText = JSON.stringify(arr);
}
</script>
</body>
</html>
単なる数字ですといまいち良いところがないですが、複雑なモノの主観ランキングを簡易につけようとする時は便利です。次の様に構造体を JSON 化して表示するだけで違う構造の同士などの複雑な比較を人間の感覚でそれっぽくできます。
const arr = [{name: '浜松太郎'}, {name: '静岡太郎'}, {type: '猫'}];
arr.sort((a, b) => window.confirm(`${JSON.stringify(a)} > ${JSON.stringify(b)} ?`));
