【JavaScript】オブジェクトの配列を特定のプロパティでソートする

1. JavaScriptでオブジェクトの配列をソートする

JavaScript において、以下のようなオブジェクトの配列があるとします。

const ary = [
  { title: 'かきくけこ', content: '...' },
  { title: 'あいうえお', content: '...' },
];

このとき、オブジェクトのプロパティtitle の値を使って、配列をソートする方法を紹介します。

2. String.prototype.localeCompare() を使う場合

String.prototype.localeCompare() を使う方法です。

以下のように書きます。

ary.sort((a, b) => a.title.localeCompare(b.title, 'ja'))

localeCompare() メソッドは、第二引数にロケール (正確には、BCP47 言語タグ)を指定できるので、日本語を表す ‘ja’ を指定しています。

参考

• String.prototype.localeCompare() – JavaScript | MDN
• Browser compatibility（各ブラウザのサポート状況）

3. Intl.Collator.prototype.compare() を使う場合

Intl.Collator の compare メソッドを使う方法です。

以下のように書きます。

const collator = new Intl.Collator('ja');
ary.sort((a, b) => collator.compare(a.title, b.title));

Intl.Collator() コンストラクタは、第一引数にロケール（正確には、BCP47 言語タグ）を指定できるので、日本語を表す ‘ja’ を指定しています。

参考

• Intl.Collator – JavaScript | MDN
• Browser compatibility（各ブラウザのサポート状況）

4. どちらを使えばよいのか？

配列要素の数が多い場合は、Intl.Collator.prototype.compare() を使いましょう。

なぜなら、特定の言語を前提とした Intl.Collator のインスタンスを予め1つ生成することで、compare() の処理が効率化されるはずだからです。そうでなければ、Intl.Collator の存在する意味がありません。これは、正規表現の処理のために RegExp というオブジェクトが用意されているのに似ています。