世界の言葉に寄り添う小さな優しさ。`toLocaleLowerCase()` で学ぶ、JavaScript大文字・小文字の「お国柄」
こんにちは！日々のコーディング、本当にお疲れ様です。
JavaScriptを学び始めたばかりの頃、文字列を大文字から小文字に変換する `toLowerCase()` という命令（メソッド）に出会った方は多いのではないでしょうか。「うん、`”HELLO”` を `”hello”` にするやつね、簡単簡単！」と思いますよね。
でも、プログラミングの世界を少し深く旅していくと、`toLocaleLowerCase()` という、名前がちょっと長くて強そうなメソッドに出会うことがあります。
「えっ、何が違うの？」「どっちを使えばいいの？」と不安になってしまうかもしれませんが、大丈夫ですよ。今回は、この2つの違いを、身近な例え話を交えながら、どこよりも優しく、丁寧に紐解いていきましょう。
これを読み終える頃には、世界中のユーザーに優しいコードが書ける、素敵なフロントエンド開発者への第一歩を踏み出しているはずです！
—
そもそも「ロケール（locale）」ってなぁに？
聞き慣れない「ロケール」という言葉。難しく考える必要はありません。これは一言でいうと、「その地域や国ならではのローカルルール（お国柄）」のことです。
例えば、お買い物をするときを想像してみてください。
同じ「1,000」という数字でも、日本では「1,000円」ですが、アメリカでは「$1,000」ですし、ヨーロッパの一部ではカンマではなく「1.000」とピリオドで区切ったりしますよね。
言葉や文字にも、同じように「その地域ならではのルール」があります。
JavaScriptの `toLocaleLowerCase()` の「Locale（ロケール）」は、まさにこの「その国のルールに合わせて、優しく小文字に変換してね」とお願いするためのスイッチなのです。
—
トルコへの旅：同じ「I」でもルールが違う？
「英語のアルファベットなら、世界中どこでも同じルールでしょ？」と思うかもしれません。ここに、とっても面白い「お国柄」の罠があります。
それが、トルコ語やアゼルバイジャン語のルールです。
英語では、大文字の 「I（アイ）」 を小文字にすると、上にちょこんと点がついた 「i」 になりますよね。これは私たちにとってもお馴染みです。
ところが、トルコ語の世界には、なんと「点がない I」と「点がある I」の2種類が最初から存在しているのです！
- 点がないグループ：大文字「I」 ⇄ 小文字「ı」
- 点があるグループ：大文字「İ」 ⇄ 小文字「i」
もし、トルコにお住まいの方が、自分の大好きな街「イスタンブール（ISTANBUL）」をWebサイトに入力したとします。
これを、一般的な `toLowerCase()` で無理やり小文字に変換してしまうと、点のない「I」が、点のついた「i」に勝手に変わってしまい、「istanbul」 になってしまいます。これ、トルコの方からすると「スペルが間違っているよ！」という状態になってしまうのです。
ここで活躍するのが、今回の主役である `toLocaleLowerCase()` です。
—
実際にコードで見てみよう！
論より証拠、手元のエディタに貼り付けて動かせるサンプルコードを用意しました。
コメントを読みながら、2つの変換結果がどう変わるか、じっくり眺めてみてくださいね。
// 1. トルコ語の「イスタンブール（ISTANBUL）」という文字列を用意します
const city = “ISTANBUL”;
// 2. いつもの toLowerCase() で小文字にしてみましょう
const normalLower = city.toLowerCase();
console.log(“いつもの変換:”, normalLower);
// 実行結果 -> “istanbul” （英語のルールなので、点がついた「i」になります）
// 3. 今度は toLocaleLowerCase() を使って、「トルコ（tr）のルールでね！」と指定してみます
// 引数（カッコの中）に ‘tr’ と書くことで、トルコ語（Turkish）を指定できます
const turkishLower = city.toLocaleLowerCase(‘tr’);
console.log(“トルコ語ルールの変換:”, turkishLower);
// 実行結果 -> “ıstanbul” （トルコ語のルール通り、点がない「ı」になりました！）
どうですか？ 結果が違っていますよね！
「tr」という魔法の言葉をカッコの中に添えてあげるだけで、JavaScriptが自動的に「あ、トルコ語のルールですね、かしこまりました！」と、点のない `ı` に優しく変換してくれたのです。
—
現場のリアルな知見：どんな時にこれを使うの？
「でも、日本のWebサイトを作っているだけなら、関係ないんじゃない？」
そう思うのも無理はありません。確かに、日本語のひらがなや漢字、一般的な英数字だけを扱う場合は、いつもの `toLowerCase()` で全く問題なく動作します。
しかし、現場で働くチーフアーキテクトとしての経験から言うと、以下のような場面でこの知識がじわじわと効いてきます。
1. 多言語対応のサイト（グローバルサイト）を作るとき
世界中の人がアクセスするサイトで、ユーザー名やメールアドレスの検索を行うとき、この変換ミスがあると「登録したユーザー名でログインできない！」という悲しいトラブル（バグ）に繋がることがあります。
2. ブラウザの設定（ホスト環境）に合わせたいとき
引数を何も指定せずに `toLocaleLowerCase()` を呼び出すと、JavaScriptは「そのページを見ているユーザーのパソコンやスマホの設定（言語設定）」を自動的に読み取って、一番心地よいルールで変換してくれます。
// 引数を空っぽにすると、ユーザーの手元の環境（ブラウザの設定など）に寄り添った変換になります
const userInput = “HELLO”;
const localizedInput = userInput.toLocaleLowerCase();
—
つまずきやすいポイントへの「大丈夫ですよ」の処方箋
Q. 毎回 `toLocaleLowerCase()` を使った方がいいの？
A. 基本的には、いつもの `toLowerCase()` で大丈夫ですよ。
ほとんどのWeb制作では、英語ベースのアルファベット変換で事足ります。ただ、「世界中のユーザーが使うかもしれないな」「言語設定にこだわりたいな」という時に、この引き出しを持っていることがプロフェッショナルへの第一歩になります。知っているだけでも、あなたのコードの優しさが一段アップします。
Q. ‘tr’ とか ‘en’ とかって、何を書けばいいの？
A. これは「BCP 47 language tag」と呼ばれる、言語を表す世界共通の短いコードです。
例えば、日本語なら `’ja’`、英語なら `’en’`、トルコ語なら `’tr’` です。もし特定の言語に合わせたい場合は、このアルファベット2文字（〜4文字）を指定してあげてくださいね。
—
まとめ：世界に優しいコードを書くということ
プログラミングを学び始めたばかりの時は、ついつい「エラーを出さずに動かすこと」だけで頭がいっぱいになってしまいますよね。それはごく自然なことですし、動いた時の喜びは格別です。
でも、今回学んだ `toLocaleLowerCase()` のように、「画面の向こうにいる、自分とは違う文化や言葉を持つ誰か」を想像して用意された仕組みが、プログラミングの世界にはたくさん眠っています。
「あ、トルコ語には特別なルールがあったな。いつか多言語サイトを作る時は、これを使ってあげよう」
そんな風に、誰かの日常をほんの少し便利にする優しさをコードに込められるようになると、プログラミングがもっともっと楽しく、愛おしいものになっていきますよ。
一歩ずつ、あなたのペースで進んでいきましょう。大丈夫、あなたのコードは確実に、誰かを幸せにする力を持っています。応援していますね！
コメント