こんにちは！パーク社員のゆんぼうです。
Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。
今回は、Javascriptの「sort」関数についてです。
動作確認した環境
OS: Windows 10 Pro
| ブラウザ名 | バージョン |
|---|---|
| Google Chrome | 62.0.3202.94 |
| Mozilla Firefox | 57.0 |
| Microsoft Edge | 41.16299.15.0 |
| Microsoft Internet Explorer (IE11) | 11.64.16229.0 |
sortとは
sortとは、配列を並び替える関数です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
sortを実装したソースコードは以下の通りです。
list.sort(function (a, b) {
if (a.value === b.value) {
return 0;
}
if (a.value < b.value) {
return -1;
} else {
return 1;
}
});
sortの引数（function(a, b {...}の部分)）は、compareFunction (比較関数)と呼ばれるものです。3種類の戻り値により、ソートが実行されます。
「0」の場合は、a と b は並び変えない
「0より小さい」の場合は、a は b の前に並び替える
「0より大きい」の場合は、b は a の前に並び替える
この「0」の場合の戻り値について、Chromeでは正常に動作しません。
以下のデモページを表示してみてください。
「source」カラムがソート前、「result」がソート後の結果です。この同じ値を持つ11個の配列をソートすると、比較関数の戻り値は0になるため、並び替えは発生しないはずです。しかし、Chromeでは並び替えが発生しています。
ECMAScript 5では仕様通りとなっています。(※コメントでご指摘いただきました。)
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
22.1.3.25 Array.prototype.sort ( comparefn )
The elements of this array are sorted. The sort is not necessarily stable (that is, elements that compare
equal do not necessarily remain in their original order).
日本語訳:
この配列の要素が、並べ替えられます(ソートされます)。 sortは、安定している必要はありません。(つまり、それは、等価性を比較する要素が、元の順番のままである必要はないということです。)
ブラウザ毎のsortの挙動
クロスブラウザ対応で注意したいこととして、Chromeでは、同じ値をソートしたときに結果が異なります。
| ブラウザ名 | 同じ値のソート |
|---|---|
| Google Chrome | 安定していない |
| Mozilla Firefox | 安定している |
| Microsoft Edge | 安定している |
| Microsoft Internet Explorer (IE11) | 安定している |
以上です。