こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた私ですが、今日はJavaScriptのちょっといぶし銀なメソッド、`localeCompare()`（ロケール・コンペア）についてお話しさせてください。
JavaScriptを書き始めたばかりの頃って、文字列の比較といえば `===` か `!==`、あるいは大小を比べるなら `<` や `>` を思い浮かべますよね。「あ、りんごの方やりんごより大きいのね」なんて直感的に書けるので便利です。
でも、実務でアプリを作っていると、こんな壁にぶつかりませんか？
「日本語のあいうえお順にキレイにユーザーリストを並び替えたいのに、なぜかめちゃくちゃな順番になる……！」
「大文字と小文字が混ざって、ソートがバラバラになっちゃうよ……！」
大丈夫です。そんな時こそ、今回ご紹介する `localeCompare()` の出番です。
今回は、このメソッドがなぜ現場のエンジニアに重宝されているのか、身近な例えを交えながら優しく紐解いていきましょう！
—
そもそも `localeCompare()` ってなに？（身近な例えでお話します）
`localeCompare()` を一言で言うと、「人間の感覚に寄り添って、2つの文字の順序を判定してくれる優しい審判員」です。
想像してみてください。スーパーの棚卸しで、りんご（Apple）の段ボールと、バナナ（Banana）の段ボールをあいうえお順（あるいはアルファベット順）に綺麗に並べ替えるとします。
人間なら「あ、こっちが先だな」と一瞬で判断できますが、コンピュータの生データ（文字コード）は、時として人間にとって「えっ、なんでそこがそうなるの？」という並び順を平気で叩き出します。特に日本語やアクセント記号（é や ü など）が含まれる欧州の言葉なんて、コンピュータにとってはカオスそのものです。
そこで登場するのが `localeCompare()` です。このメソッドは、国の文化や言語のルール（ロケール）をちゃんと理解した上で、「どっちの文字が前なのか、後ろなのか、あるいは同じなのか」をピシッと教えてくれます。
—
基本の使い方はこれだけ！
まずは、基本的な書き方を見てみましょう。難しく考えず、リラックスしてコードを眺めてみてくださいね。
// 比較する文字列.localeCompare(比べる対象の文字列)
const result = ‘りんご’.localeCompare(‘バナナ’);
console.log(result); // 結果はいかに…？
ここで返ってくる結果（戻り値）には、ちょっとしたルールがあります。これを覚えておくだけで、もう怖くありません！
- 負の数（例: `-1`）: 基準の文字が、比べる対象よりも「前」にある（例: あいうえお順で先に来る）
- 正の数（例: `1`）: 基準の文字が、比べる対象よりも「後ろ」にある
- `0`: ふたつの文字は「まったく同じ」
つまり、先ほどの `’りんご’.localeCompare(‘バナナ’)` なら、「ばなな」のほうが先に来るので、結果はプラスの数になります。
—
実務で一番よく使う！配列の「きれいなソート」
初心者の方が一番つまずきやすいのが、配列の `sort()` メソッドと組み合わせる場面です。
日本語の文字列をきれいなあいうえお順に並び替えたいときは、`localeCompare()` とコンビを組ませるのが黄金パターンです。
実際にコードを書いてみましょう。そのままコピペしてブラウザのコンソールなどで試してみてくださいね。
// 日本語の果物リスト（ちょっと順番がバラバラ）
const fruits = [‘みかん’, ‘りんご’, ‘バナナ’, ‘いちご’, ‘すいか’];
// localeCompareを使って、人間にとって自然な「あいうえお順」にソートする
fruits.sort((a, b) => a.localeCompare(b, ‘ja’));
console.log(fruits);
// 出力結果: [“いちご”, “すいか”, “すいか…じゃなくて]
// 正解: [“いちご”, “すいか”, “バナナ”, “みかん”, “りんご”]
// （※実際の「あいうえお」の順序できれいに並びます！）
どうですか？ `sort()` の中に `a.localeCompare(b, ‘ja’)` をポンと置くだけで、見違えるほど綺麗な並び順になりましたよね。第2引数に `’ja’`（日本語環境だよ）と指定してあげるのが、優しさのポイントです。
—
隠し味：数値の大小もスマートに比較できちゃうオプション
さて、ここからが少しステップアップしたお話。現場でデータを見ていると、「ファイル1」「ファイル2」「ファイル10」のような、文字列の中に数字が含まれているケースによく出会います。
通常の文字列ソートをすると、こんな悲しい現象が起きます。
- `[“ファイル1”, “ファイル10”, “ファイル2”]` （あれ、10が2より前に来ちゃった……）
コンピュータは「1」の次を「1」と見るので、こういう並び順になりがちです。でも、人間の感覚としては「ファイル2」の次に「ファイル10」が来てほしいですよね。
そんな時も、`localeCompare()` ならオプション（設定）を追加するだけで解決できます！
const files = [‘ファイル10’, ‘ファイル2’, ‘ファイル1’];
// { numeric: true } という魔法のオプションを渡します
files.sort((a, b) => a.localeCompare(b, ‘ja’, { numeric: true }));
console.log(files);
// 出力結果: [“ファイル1”, “ファイル2”, “ファイル10”]
`{ numeric: true }` を仕込むだけで、文字列の中にある数字を「数値」として認識して、自然な順番（1, 2, 10…）で並べ替えてくれるんです。これを知ったときは、私も思わず現場で「おぉ……！」と声が出てしまいました。
—
今日のまとめと、現場からのエール
いかがでしたでしょうか？
`String.prototype.localeCompare()` は、一見すると地味なメソッドに見えますが、Webサイトのユーザービリティ（使いやすさ）をグッと引き上げてくれる、なくてはならない相棒です。
- 文字列の順番を比較したいときは `localeCompare()` を思い出すこと。
- 日本語なら第2引数に `’ja’` を指定してあげると安心。
- 数字混じりの文字列なら `{ numeric: true }` でスマートに解決！
最初は覚えることが多くて大変に感じるかもしれませんが、ひとつずつ引き出しを増やしていけば大丈夫。あなたの書くコードは確実にレベルアップしています。
それでは、また次の現場でお会いしましょう！快適なJavaScriptライフを！
コメント