こんにちは！JavaScriptの世界へようこそ。日々コードを書いていて、「動いた！」という瞬間は本当にワクワクしますよね。
Web開発の勉強を始めたばかりのとき、最初に覚える便利な道具のひとつが文字列の大文字・小文字変換です。
“hello”.toUpperCase(); // “HELLO”
「たったこれだけで大文字になるんだ！簡単！」と思いますよね。そう、最初はこれで100点満点です！
しかし、Webの世界は世界中と繋がっています。アプリやサイトが成長して、いろいろな国の人たちが使ってくれるようになると、「英語のルールだけではうまく変換できない」という、ちょっと不思議で面白い壁にぶつかることがあります。
でも、大丈夫ですよ！今日は、JavaScriptが用意してくれている「世界中の言葉に寄り添うための優しい仕掛け」について、身近な例えを交えながら楽しく紐解いていきましょう。
—
1. 基本のおさらい：いつもの変換機能（toUpperCase / toLowerCase）
まずは、私たちが普段よく使う基本の道具からおさらいしましょう。
これらは、言ってみれば「標準的な英語用のスタンプ」のようなものです。
- `toUpperCase()` : 小文字をすべて「大文字」に変換するスタンプ
- `toLowerCase()` : 大文字をすべて「小文字」に変換するスタンプ
アルファベットの「a」を「A」にしたり、「HELLO」を「hello」にしたり。お買い物の商品コードの検索や、メールアドレスの入力を揃えるときなど、日常のWeb制作で大活躍してくれます。
まずは、実際に動くコードを見てみましょう。エディタに貼り付けて試してみてくださいね。
// — 基本の変換パターン —
const originalText = “JavaScript is Fun!”;
// すべて大文字に変換する
const upperText = originalText.toUpperCase();
console.log(upperText);
// 出力結果: “JAVASCRIPT IS FUN!”
// すべて小文字に変換する
const lowerText = originalText.toLowerCase();
console.log(lowerText);
// 出力結果: “javascript is fun!”
とってもシンプルで分かりやすいですよね！「これさえあれば十分じゃない？」と思ってしまうかもしれません。
ですが……世界は広いのです！
—
2. 「チョボ（点）」の謎！？トルコ語で起きる不思議な事件
ここで、トルコという国に旅行に行った場面を想像してみてください。
トルコ語のアルファベットには、私たちが普段見慣れている「i」のほかに、「点（チョボ）のない i（ı）」という別の文字が存在します。
- i（点がついてる小文字）
- ı（点がついてない小文字）
トルコ語では、この2つは全く別の音を表す「別の文字」なんです。そのため、大文字にするときも次のような特別なルールがあります。
1. 点がついている小文字の `i` は、大文字になっても点が残る `İ` になる。
2. 点がついていない小文字の `ı` が、大文字の `I` になる。
ところが！ここでいつもの `toUpperCase()` という「標準スタンプ」を押してしまうと、どうなるでしょうか？
// トルコの都市「イスタンブール（istanbul）」
const cityName = “istanbul”;
// いつもの大文字変換を使ってみる
console.log(cityName.toUpperCase());
// 出力結果: “ISTANBUL” （あ！点が消えちゃった…！）
標準スタンプ（`toUpperCase`）は、「英語のルール」しか知らないため、点がついている「i」を容赦なく点の無い「I」に変えてしまいます。
現地の人からすると、「あれ？自分の名前や街の名前の文字が変わっちゃった…」という、切ない現象が起きてしまうのです。自分のお気に入りの服のボタンが勝手に掛け違えられたような違和感ですね。
—
3. 救世主登場！「toLocaleUpperCase」と「toLocaleLowerCase」
「じゃあ、トルコの人たちの言葉は正しく変換できないの……？」と不安になった方、大丈夫ですよ！
JavaScriptには、そんな世界中の地域（ロケール）の文化やルールを尊重するための「ご当地スタンプ」が用意されています。
それが、`toLocaleUpperCase` と `toLocaleLowerCase` です！
使い方はとっても簡単。括弧の中に「どの国のルール（言語コード）を使うか」を教えてあげるだけです。トルコ語なら `’tr’` と書いてあげます。
// — ご当地スタンプ（ロケール対応）を使ってみよう —
const turkishCity = “istanbul”;
// トルコ語（’tr’）のルールを指定して大文字にする
const correctTurkishCity = turkishCity.toLocaleUpperCase(‘tr’);
console.log(correctTurkishCity);
// 出力結果: “İSTANBUL” （やった！ちゃんと頭の「i」に点がついて「İ」になりました！）
どうでしょう！見事に正しいトルコ語の大文字に変換できましたね。
「Locale（ロケール）」というのは、翻訳機に「今はトルコに来ているから、トルコのアテンダントさん、案内をお願いね！」と伝えてあげるイメージです。指定された地域に合わせた「気配り」をしてくれるわけですね。
—
4. 実際に使える！実用サンプルコード
それでは、読者のみなさんが自分のエディタですぐに試せるように、実践的なサンプルコードをご用意しました。
ユーザーが入力した名前を綺麗に揃えて表示するような、現場でよくある場面を想定したコードです。そのままコピー＆ペーストして、ブラウザのコンソールなどで動かしてみてください！
/
- ユーザーの名前を国（ロケール）に合わせて綺麗に変換する関数
- @param {string} name – ユーザーの名前
- @param {string} locale – 言語コード（例: ‘en’ = 英語, ‘tr’ = トルコ語）
/
function formatUserName(name, locale = ‘en-US’) {
// toLocaleUpperCaseを使って、指定された国のルールで大文字化します
return name.toLocaleUpperCase(locale);
}
// 1. 英語圏のユーザー「alice」さんの場合
const user1 = “alice”;
console.log(“英語ルールで変換:”, formatUserName(user1, ‘en-US’));
// 出力結果: “ALICE”
// 2. トルコのユーザー「dilan」さんの場合（iが含まれています）
const user2 = “dilan”;
// いつもの変換（英語ルールになってしまう）
console.log(“通常の変換:”, user2.toUpperCase());
// 出力結果: “DILAN” (トルコ語としては不正確)
// ロケールを指定した変換（トルコ語ルール）
console.log(“トルコ語ルールで変換:”, formatUserName(user2, ‘tr’));
// 出力結果: “DİLAN” (完璧！iがİに正しく変換されました)
もし言語コード（`’tr’` や `’en-US’` など）を何も渡さずに `toLocaleUpperCase()` とだけ書いた場合は、「そのプログラムを実行しているユーザーのPCやスマホの設定（言語設定）」を自動的に読み取って変換してくれます。これもすごくスマートで優しい機能ですよね。
—
5. まとめ：知識の引き出しをひとつ増やせたあなたへ
今日のポイントを優しく振り返ってみましょう！
1. `toUpperCase()` / `toLowerCase()`
- 普段のWeb開発や英語ベースの文字列操作なら、これでバッチリ！
2. `toLocaleUpperCase()` / `toLocaleLowerCase()`
- トルコ語のように特殊な文字ルールを持つ言語や、多言語対応のサイトを作る時の強力な味方！
- 括弧の中に `’tr’` などの言語コードを渡すことで、その国の正しさで変換してくれる。
普段、日本語や英語だけを扱っていると「`toLocaleUpperCase` なんていつ使うんだろう？」と思うかもしれません。
でも、「世界にはいろんな文字のルールがあって、JavaScriptはそれを大切にする仕組みを持っているんだな」と知っているだけで、あなたのエンジニアとしての視界はぐっと広がっています。
最初からすべてを完璧に使いこなす必要はありません。「あ、トルコ語とか多言語で文字がおかしくなったら『ロケール』のメソッドがあったな！」と思い出せれば、それだけで大成功です。
一歩ずつ、楽しみながらJavaScriptと仲良くなっていきましょうね。応援しています！
コメント