こんにちは！フロントエンドの現場で、日々コードと格闘しているチーフアーキテクトです。
JavaScriptで文字列を比較するとき、みなさんはどうしていますか？ おそらく最初は `a === b` や `a > b` といった比較演算子を使うはずです。でも、ある時ふと気づくんですよね。「あれ？ 数字の並びがおかしいぞ？」「アルファベットの小文字と大文字が混ざると順序が崩れる…」と。
そんなとき、多くのプロが「これを知っておけば一生モノ」として頼りにするのが `localeCompare()` というメソッドです。
今日は、この「文字列比較の最終兵器」について、肩の力を抜いて一緒に見ていきましょう。大丈夫、難しいことは一つもありません。
—
1. なぜ「普通の比較」じゃダメなの？
例えば、お買い物リストを作るとします。「Apple」「banana」「Cherry」という3つの単語を並べ替えるとき、コンピュータは頭が固いので、文字の「コード番号（Unicode）」だけで判断します。
すると、大文字の「A」や「C」が小文字の「b」よりも先にきてしまい、人間が直感的に感じる「辞書順（A→b→C）」とはズレてしまうことがあるんです。
さらに、フランス語の「é（アクサン付きのe）」なんかが出てくると、もうお手上げ。そこで登場するのが `localeCompare()` です。これは「その国や言語のルールに従って、人間らしく並べ替えてね」とお願いする魔法の杖なんです。
—
2. まずは基本を使ってみよう
`localeCompare()` は、比較対象との関係を「数値」で返してくれます。
- 負の数 (-1など)：前にあるよ
- 0：同じだよ
- 正の数 (1など)：後ろにあるよ
const apple = “apple”;
const banana = “banana”;
// appleとbananaを比較
const result = apple.localeCompare(banana);
if (result < 0) {
console.log("appleはbananaより先に来ます");
} else if (result > 0) {
console.log(“appleはbananaより後ろです”);
} else {
console.log(“全く同じ文字列です！”);
}
—
3. 本領発揮！「オプション」で賢く制御する
`localeCompare()` が本当にすごいのは、第2引数以降のオプションです。ここを使いこなすと、現場の要件にピタリとハマる実装ができます。
① 数字を「数値」として扱う（numeric: true）
通常、コンピュータは「10」と「2」を比べると、「1」が「2」より小さいので「10の方が先！」と判断します。これだとリストが「1, 10, 2」の順になってガッカリしますよね。
そんな時はこう書きます。
const list = [“item 10”, “item 2”, “item 1”];
// 数値として判定させるオプション
list.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
console.log(list);
// 結果: [“item 1”, “item 2”, “item 10”]
// ちゃんと人間が期待する順番になりましたね！
② 大文字・小文字・アクセントを無視する（sensitivity）
「Cafe」と「café」を同じものとして扱いたい、あるいは大文字小文字を区別せず並べたい。そんな時もオプション一つです。
const word1 = “cafe”;
const word2 = “café”;
// baseは「文字の形だけ」を比較する設定
const isSame = word1.localeCompare(word2, undefined, { sensitivity: ‘base’ });
if (isSame === 0) {
console.log(“アクセント記号を無視すれば、これらは同じです！”);
}
—
4. 現場のチーフからのアドバイス：怖がらないで！
初めてこのメソッドを見たとき、「引数とかオプションとか難しそう…」と感じるかもしれません。でも、「これは、コンピュータに人間界の辞書のルールを教えてあげるための道具なんだ」と考えてみてください。
- ユーザーが入力したデータをきれいに並べたいとき
- 多言語対応のWebサイトを作るとき
こういう時に `localeCompare()` を思い出せば、あなたはもう一歩、プロフェッショナルなフロントエンドエンジニアに近づいています。
最初は完璧に覚えようとしなくて大丈夫。「あれ、並び順が変だな？」と思ったら、このページを思い出して `localeCompare()` を覗きに来てください。
コードは道具です。使っていくうちに、必ずあなたの指に馴染んでいきますよ。今日から少しだけ、コードに「人間味」を足してみませんか？
コメント