大文字・小文字をそろえるという発想
s.toUpperCase() と s.toLowerCase() は、文字列のアルファベットを全部「大文字」または「小文字」にそろえるメソッドです。 天才プログラマー視点で言うと、「比較や検索を正しく行うための前処理」として使うことが多い道具です。
「見た目を変える」だけじゃなく、「同じものとして扱うために形をそろえる」という意識が大事になります。
基本動作：全部大文字、全部小文字にする
const s = "Hello World";
console.log(s.toUpperCase()); // "HELLO WORLD"
console.log(s.toLowerCase()); // "hello world"
toUpperCase() は、アルファベットをすべて大文字に。 toLowerCase() は、アルファベットをすべて小文字に。
数字や記号、日本語などはそのままです。
const s = "Js入門2024!";
console.log(s.toUpperCase()); // "JS入門2024!"
console.log(s.toLowerCase()); // "js入門2024!"
「アルファベットだけが対象」と覚えておくとイメージしやすいです。
大文字・小文字をそろえて比較する（ここが一番重要）
文字列を比較するとき、ユーザーは「大文字か小文字か」をあまり気にしません。 でもプログラムは、"Aki" と "aki" を別物として扱います。
console.log("Aki" === "aki"); // false
そこで使うのが「ケースをそろえる」というテクニックです。
const a = "Aki";
const b = "aki";
console.log(a.toLowerCase() === b.toLowerCase()); // true
両方とも小文字にそろえてから比較することで、 「大文字・小文字の違いを無視した比較」ができます。
検索やログイン、タグの一致判定など、 「ユーザーの入力の揺れを吸収したい」場面でほぼ必須の考え方です。
例題：メールアドレスの比較で使う
メールアドレスは、大文字・小文字を区別しないことが多いです。 そのため、保存するときや比較するときに、ケースをそろえておくと安全です。
const input = "AKI@example.com";
const saved = "aki@example.com";
if (input.toLowerCase() === saved.toLowerCase()) {
console.log("同じメールアドレスとして扱える");
}
このように、 「内部的には全部小文字で扱う」というルールを決めておくと、 後からバグになりそうな揺れをかなり減らせます。
見た目を整える用途：タイトルやラベル
もちろん、「見た目を整える」ために使うこともあります。
const raw = "hello world";
const title =
raw.charAt(0).toUpperCase() +
raw.slice(1).toLowerCase();
console.log(title); // "Hello world"
ここでは、 先頭だけ大文字にして、残りを小文字にすることで、 「英語のタイトルっぽい形」に整えています。
toUpperCase() と toLowerCase() を組み合わせると、 こういう「スタイルの統一」も簡単にできます。
元の文字列は書き換えられないことも押さえておく
どちらのメソッドも、元の文字列を変更せず、新しい文字列を返します。
const s = "Hello";
const upper = s.toUpperCase();
const lower = s.toLowerCase();
console.log(s); // "Hello"
console.log(upper); // "HELLO"
console.log(lower); // "hello"
文字列は「不変（immutable）」なので、 toUpperCase() や toLowerCase() を呼んでも、元の変数の中身は変わりません。
この性質のおかげで、 「元の値を残しつつ、表示用だけ形を変える」といった使い方がしやすくなっています。
まとめ：ケース変換は「文字列を公平に扱うための前処理」
s.toUpperCase() と s.toLowerCase() は、 単なる見た目の変換ではなく、「比較や検索を正しく行うための準備」として使うのが本質です。
アルファベットを全部大文字・小文字にそろえる。 比較前にケースをそろえることで、ユーザーの入力の揺れを吸収する。 元の文字列は変わらないので、安心して「表示用」「内部用」を分けられる。
「この文字列、本当に大小文字の違いで別物扱いしていいのか？」と感じた瞬間に、 一度 toLowerCase() か toUpperCase() を通してから考える癖をつけること。
それが、文字列を賢く、そして優しく扱うための大事な一歩になります。