ロケールに対応した並べ替え
Intl.Collator で文字列を正しく並べ替えます。
「ロケールに対応した並べ替え」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
デフォルトのsortが失敗する理由
Arrayのsort()は、UTF-16のコード単位で文字列を比較します。そのため、大文字が小文字より前に並び、アクセント記号も適切に扱えません。人間が読むリストには不向きです。
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort()); // ["Apple","banana","cherry"] — capital winslocaleCompare
String.prototype.localeCompareは、ロケールの規則を使って2つの文字列を比較し、負の値、0、または正の値を返します。
console.log("apple".localeCompare("banana")); // -1
console.log("banana".localeCompare("apple")); // 1localeCompareで並べ替える
これを比較関数として渡すと、人間にとって自然な順序で並べ替えられます。
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort((a, b) => a.localeCompare(b)));
// ["Apple", "banana", "cherry"] — case-insensitive orderingIntl.Collator
多くの項目を並べ替える場合は、Intl.Collatorのほうが高速です。1度作成して、そのcompareメソッドを再利用します。
const collator = new Intl.Collator("en-US");
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort(collator.compare));アクセントとダイアクリティカルマーク
Collatorは、コード単位による比較とは異なり、ロケールに応じてアクセント付き文字を正しく並べます。
const words = ["zebra", "ela", "elf", "elan"];
const collator = new Intl.Collator("fr");
console.log([...words].sort(collator.compare));感度
sensitivityは、どの違いを考慮するかを制御します。"base"は大文字・小文字とアクセントを無視し、"accent"は大文字・小文字だけを無視し、"variant"はすべての違いを区別します。
const c = new Intl.Collator("en", { sensitivity: "base" });
console.log(c.compare("apple", "APPLE")); // 0 (treated equal)数値の並べ替え
numeric: trueを使うと、文字列内の数値を値として並べ替えられるため、「file2」が「file10」より前になります。
const files = ["file10", "file2", "file1"];
const c = new Intl.Collator("en", { numeric: true });
console.log([...files].sort(c.compare)); // ["file1","file2","file10"]大文字・小文字の優先順
caseFirst: "upper"または"lower"を使うと、ほかの違いが同じ場合に大文字と小文字のどちらを先に並べるかを決められます。
const c = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["b", "B", "a", "A"].sort(c.compare));順序ではロケールが重要
言語によってアルファベット順は異なります。スウェーデン語では、特定のアクセント付き文字がaの近くではなく、zの後に並びます。
const words = ["z", "a", "o"];
console.log([...words].sort(new Intl.Collator("sv").compare));usageで検索する
usage: "search"を使うと、Collatorが並べ替えではなく照合向けに調整されます。アクセントを区別しないフィルタリングに便利です。
const c = new Intl.Collator("en", { usage: "search", sensitivity: "base" });
function matches(a, b) { return c.compare(a, b) === 0; }
console.log(matches("cafe", "CAFE")); // trueオブジェクトの並べ替え
オブジェクトの配列を並べ替えるときは、キーに対してCollatorを使います。
const people = [{ name: "Bob" }, { name: "alice" }, { name: "Carol" }];
const c = new Intl.Collator("en");
console.log(people.sort((a, b) => c.compare(a.name, b.name)).map((p) => p.name));クイックチェック
ロケールに対応した並べ替えをテストします。
復習：ロケールに対応した並べ替え
デフォルトのsort()が適切でない理由を確認し、localeCompareと、より高速なIntl.Collatorを使いました。アクセント、感度、数値と大文字・小文字の順序、ロケール固有のアルファベット、検索時の照合にも対応しました。これでIntlコースは完了です。
よくある質問
「ロケールに対応した並べ替え」レッスンは無料ですか？
はい。「ロケールに対応した並べ替え」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「ロケールに対応した並べ替え」で何を学びますか？
Intl.Collator で文字列を正しく並べ替えます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ロケールに対応した並べ替え」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 数値と通貨をフォーマットする
- 日付と時刻をフォーマットする
- 相対時間と複数形
- ロケールに対応した並べ替え