JavaScript | 基礎構文：文字列操作 – 大文字小文字変換

JavaScript JavaScript
2025.12.12
スポンサーリンク

大文字小文字変換を一言でいうと

「大文字小文字変換」は、
英字の文字列を、全部大文字にしたり、全部小文字にしたりする操作 です。

JavaScript では主に

  • toUpperCase()：全部大文字にする
  • toLowerCase()：全部小文字にする

この 2 つが基本です。

ここが重要です。
大文字小文字変換は、「比較」「検索」「整形」でめちゃくちゃよく使います。
“見た目”を揃えたいとき、または“大小文字の違いを無視して比較したいとき”に使う道具 と覚えておいてください。

基本：toUpperCase と toLowerCase の使い方

文字列を全部大文字にする：toUpperCase()

toUpperCase() は、
元の文字列から、アルファベット部分をすべて大文字にした「新しい文字列」を返します。

const text = "JavaScript";

const upper = text.toUpperCase();

console.log(upper); // "JAVASCRIPT"
console.log(text);  // "JavaScript"（元は変わらない）
JavaScript

ポイントは、

  • 元の text はそのまま
  • toUpperCase() の戻り値として、大文字版が返る

というところです。

文字列を全部小文字にする：toLowerCase()

逆に toLowerCase() は、
アルファベット部分をすべて小文字にした新しい文字列 を返します。

const text = "JavaScript";

const lower = text.toLowerCase();

console.log(lower); // "javascript"
console.log(text);  // "JavaScript"
JavaScript

こちらも、元の文字列は変わりません。

日本語や記号などはそのまま

これらのメソッドは、主に 英字（A〜Z, a〜z） に対して働きます。

const text = "こんにちは JavaScript!";

console.log(text.toUpperCase()); // "こんにちは JAVASCRIPT!"
console.log(text.toLowerCase()); // "こんにちは javascript!"
JavaScript

日本語部分や記号は変わらず、
英字だけが変換されるイメージです。

ここが重要です。
toUpperCase / toLowerCase は「文字列全体を変形する」けれど、
実際に変わるのは“変換可能な文字だけ”。
変換対象じゃない文字（日本語・数字・記号など）は一切変わりません。

実用的な使いどころ①：大小文字を無視して比較したい

そのまま比較すると大小文字の違いで不一致になる

const a = "JavaScript";
const b = "javascript";

console.log(a === b); // false
JavaScript

人間の感覚では「同じ単語」に見えても、
JavaScript は 違う文字列 として扱います。

toLowerCase（または toUpperCase）で揃えてから比較

「大文字小文字の違いを無視したい」なら、
どちらも同じ方向に変換してから比較します。

const a = "JavaScript";
const b = "javascript";

const isEqual =
  a.toLowerCase() === b.toLowerCase();

console.log(isEqual); // true
JavaScript

toUpperCase() を使っても同じです。

const isEqual2 =
  a.toUpperCase() === b.toUpperCase();

console.log(isEqual2); // true
JavaScript

検索・フィルタでの典型パターン

例えば、「ユーザーが入力したキーワードで、リストから検索したい」とします。

const items = ["Apple", "Banana", "orange"];
const keyword = "a";

for (const item of items) {
  if (item.toLowerCase().includes(keyword.toLowerCase())) {
    console.log("ヒット:", item);
  }
}
JavaScript

item も keyword も toLowerCase() で小文字にしてから includes することで、
大小文字を無視した検索 ができます。

ここが重要です。
大小文字を無視したいときは、
「比較や検索の前に、両方を toLowerCase()（または toUpperCase()）で揃える」
これが定番パターンです。
“変換してから比較” をセットで覚えておくと良いです。

実用的な使いどころ②：表示のスタイルを揃える

ラベルなどを見た目だけ大文字／小文字に揃える

メニューやボタンのラベルを
全部大文字にしたいとき。

const label = "settings";

console.log(label.toUpperCase()); // "SETTINGS"
JavaScript

逆に、ユーザー入力が全部大文字でも、
「表示は全部小文字にしたい」という場合。

const input = "HELLO WORLD";

console.log(input.toLowerCase()); // "hello world"
JavaScript

ファイル拡張子のチェックなど

拡張子をチェックするとき、
ユーザーが書くケース（.PNG, .Png, .png etc）がバラバラでも
正しく判定したいことがあります。

const fileName = "photo.PNG";

const lower = fileName.toLowerCase();

if (lower.endsWith(".png")) {
  console.log("PNG 画像です");
}
JavaScript

toLowerCase() で揃えてから endsWith(".png") すれば、
.PNG でも .Png でも .png でも同じように判定できます。

ここが重要です。
入力や元データの表記揺れ（大文字／小文字）があっても、
「ロジックの中では全部小文字で扱う」のようにルールを決めてから変換してしまうと、
コードがシンプルになり、バグも減ります。

文字列はイミュータブル：変換結果は「新しい文字列」

元の文字列は必ずそのまま

toUpperCase / toLowerCase は、
元の文字列を変更しません。

let text = "hello";

const upper = text.toUpperCase();

console.log(text);  // "hello"
console.log(upper); // "HELLO"
JavaScript

「text が大文字に変わる」のではなく、
「text から大文字版の新しい文字列を“作る”」 だけです。

上書きしたいなら自分で代入し直す

もし「この変数を大文字バージョンに差し替えたい」と思ったら、
こうします。

let text = "hello";

text = text.toUpperCase();

console.log(text); // "HELLO"
JavaScript

ここでようやく、変数 text が新しい文字列を指すようになります。

ここが重要です。
「文字列はイミュータブル（変更不可）」という大原則の上に、
toUpperCase / toLowerCase が乗っている。
変換した結果を使いたいなら、“戻り値をちゃんと受け取る” ことが必須です。

ちょっと応用：最初の1文字だけ大文字、残り小文字（タイトル風）

1文字目だけ大文字にする例

例えば、「名前の頭文字だけ大文字にしたい」とします。

const name = "taro";

const capitalized =
  name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();

console.log(capitalized); // "Taro"
JavaScript

やっていることは、

1文字目 → charAt(0) で取り出して toUpperCase()
2文字目以降 → slice(1) で切り出して toLowerCase()
それらを + で結合

という流れです。

単語ごとに同じことをする（簡易版）

スペース区切りの単語それぞれを「先頭だけ大文字」にしたい場合。

const title = "hello world from javascript";

const words = title.split(" ");

const capitalizedWords = words.map((w) =>
  w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
);

const result = capitalizedWords.join(" ");

console.log(result); // "Hello World From Javascript"
JavaScript

ここでは、

  • split(" ") で単語に分割
  • map で各単語を「先頭だけ大文字、それ以外は小文字」に変換
  • join(" ") でスペース区切りの文字列に戻す

という処理をしています。

ここが重要です。
toUpperCase / toLowerCase は、charAt / slice / split / join などと組み合わせることで、
「タイトル風」「名前風」など、実用的なフォーマットを作るための部品になる。
“部分取得 → 大文字小文字変換 → 結合” という流れを意識できると、一段上の文字列処理ができるようになります。

初心者として本当に押さえておきたいポイント

toUpperCase() は「すべて大文字にした新しい文字列」を返す。
toLowerCase() は「すべて小文字にした新しい文字列」を返す。
元の文字列は変わらない（イミュータブル）。

大小文字を無視して比較・検索したいときは、
比較する両方を toLowerCase()（または toUpperCase()）で揃えてから行う。

表示のスタイルを統一したいとき（ラベル・拡張子チェックなど）にも、
「内部では全部小文字で扱う」と決めて toLowerCase() しておくとシンプルになる。

部分的な変換（先頭だけ大文字など）は、
charAt や slice と組み合わせて「切り出す → 変換 → くっつける」という流れで書く。

ここが重要です。
大文字小文字変換は、単なる「見た目の遊び」ではなく、
“表記揺れを吸収する” “表示を整える” ための、とても実務的なツールです。
「比較や検索の前に normalize（正規化）する」という発想を、toLowerCase / toUpperCase を通じて体に染み込ませていくと、文字列処理の質が一段上がります。

もし試してみたくなったら、次のような小さな練習をしてみてください。

const email = "User@Example.Com";

// 1. 表示用に全部小文字にする
console.log(email.toLowerCase());

// 2. 比較用にドメイン部分だけ小文字にして取り出す
const [local, domain] = email.split("@");
console.log(domain.toLowerCase() === "example.com"); // true
JavaScript

「変換してから比較」「変換してからチェック」という流れが、
自分の中でどれだけしっくり来るか、ぜひ確かめてみてください。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました