先生と生徒の会話形式で理解しよう

生徒

「先生！JavaScriptで文字を全部大文字にしたり、小文字にしたりする方法ってありますか？」

先生

「ありますよ。JavaScriptではtoUpperCase()やtoLowerCase()というメソッドを使うと、簡単に文字列を変換できます。」

生徒

「メソッドっていうのは何ですか？」

先生

「メソッドというのは、特定のオブジェクトに対して使える“機能”のことです。例えば文字列に対して『大文字にする』という機能を呼び出すのがtoUpperCase()です。」

生徒

「なるほど！じゃあ、具体的にどう使うのか教えてください！」

先生

「では、まず基本的な使い方から見ていきましょう。」

1. toUpperCase()で文字列を大文字に変換する

JavaScriptのtoUpperCase()メソッドを使うと、文字列のすべての英字を大文字に変換することができます。大文字というのは、アルファベットでいう「A・B・C…」の形ですね。

例えば、「hello」という文字列を「HELLO」にしたい場合は次のように書きます。


const text = "hello";
const upperText = text.toUpperCase();
console.log(upperText);

実行結果は次のようになります。


HELLO

このように、toUpperCase()を使うだけで簡単に大文字に変換できます。

2. toLowerCase()で文字列を小文字に変換する

反対に、toLowerCase()メソッドを使うと文字列のすべての英字を小文字に変換できます。小文字は「a・b・c…」の形ですね。

次の例では「HELLO」を「hello」に変換してみましょう。


const text = "HELLO";
const lowerText = text.toLowerCase();
console.log(lowerText);

実行結果は次の通りです。


hello

とてもシンプルでわかりやすいですね。

3. 大文字・小文字を組み合わせて使う

ときどき「最初の1文字だけ大文字にしたい」「タイトルのように見せたい」という場合があります。これはtoUpperCase()とtoLowerCase()を組み合わせることで簡単に実現できます。

例えば、「javascript」という文字列の最初の文字だけを大文字にする場合は、次のように書きます。


const text = "javascript";
const capitalized = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
console.log(capitalized);

実行結果は以下の通りです。


Javascript

charAt(0)は文字列の最初の1文字を取り出すメソッドです。slice(1)は2文字目以降を取り出します。それらを組み合わせて、最初の文字だけを大文字にしているわけです。

4. 日本語や特殊文字に注意しよう

toUpperCase()やtoLowerCase()は、基本的に英語のアルファベットにだけ影響します。日本語や数字、記号には変化がありません。

次の例を見てみましょう。


const text = "こんにちは JavaScript!";
console.log(text.toUpperCase());

実行結果は次のようになります。


こんにちは JAVASCRIPT!

日本語部分は変わらず、英字の「JavaScript」だけが大文字に変換されています。このように、英字以外の文字はそのまま残る点に注意しましょう。

5. 実践！入力された文字をすべて大文字に変換する

では実際に、ユーザーが入力した文字を自動的に大文字に変換する例を見てみましょう。HTMLのフォームとJavaScriptを組み合わせて使います。


<input type="text" id="inputText" placeholder="文字を入力してください">
<button id="convertBtn">大文字に変換</button>
<p id="result"></p>

<script>
  const input = document.getElementById("inputText");
  const btn = document.getElementById("convertBtn");
  const result = document.getElementById("result");

  btn.addEventListener("click", () => {
    const upper = input.value.toUpperCase();
    result.textContent = upper;
  });
</script>

このプログラムを実行すると、入力した文字をボタンを押すだけで大文字に変換して表示してくれます。実際のWebアプリやフォームでもよく使われるテクニックです。

6. 応用：メールアドレスなどでは小文字に統一する

Webサービスを作るとき、メールアドレスのように大文字・小文字の区別をしないデータでは、すべて小文字に統一するのが一般的です。

次のようにtoLowerCase()を使えば、入力ミスを防ぐことができます。


const email = "Example@Gmail.Com";
const normalized = email.toLowerCase();
console.log(normalized);

実行結果：


example@gmail.com

このように統一しておくことで、システム上の判定がしやすくなります。

まとめ

文字列の大文字・小文字変換はJavaScriptの基本操作

JavaScriptにおける文字列操作の中でも、大文字・小文字の変換はとても基本的で重要な知識です。 toUpperCase や toLowerCase は、プログラミング初心者でも直感的に使える便利なメソッドであり、フォーム入力、ユーザー名、メールアドレス、検索機能など、実際のWeb開発のさまざまな場面で活躍します。文字列をそのまま扱うのではなく、目的に応じて形を整えることで、プログラムの動きが安定し、ユーザーにとっても使いやすい仕組みを作ることができます。

toUpperCase と toLowerCase の役割を振り返る

toUpperCase は、文字列に含まれる英字をすべて大文字に変換するメソッドです。ログインIDやコード表示、入力内容を目立たせたい場合によく使われます。一方、toLowerCase は英字をすべて小文字に変換します。メールアドレスやユーザー入力を統一したいときに非常に重要です。大文字と小文字の違いによる判定ミスを防ぐためにも、あらかじめ小文字に揃える処理は実務でも頻繁に行われます。

組み合わせることで表現の幅が広がる

記事の中で紹介したように、charAt や slice と組み合わせることで、先頭文字だけを大文字にする、残りを小文字にする、といった柔軟な表現が可能になります。これは、タイトル表示や名前の整形など、見た目を整える処理で特に役立ちます。 JavaScriptの文字列は一文字ずつ扱えるため、基本的な操作を理解しておくことで、応用的な処理にも自然と対応できるようになります。

まとめとしてのサンプルプログラム

最後に、今回学んだ内容をまとめて確認できるシンプルなサンプルを見てみましょう。入力された文字列を小文字に統一し、先頭だけを大文字に変換する例です。


const inputText = "jAVAsCrIPT";
const formatted =
  inputText.charAt(0).toUpperCase() +
  inputText.slice(1).toLowerCase();

console.log(formatted);

このように、基本的なメソッドを組み合わせるだけで、読みやすく整った文字列を作ることができます。難しい処理を覚える前に、まずはこのような基本操作に慣れることが大切です。

先生と生徒の振り返り会話

生徒

「最初は大文字と小文字を変えるだけでも難しそうに感じましたけど、実際にコードを見ると意外とシンプルですね。」

先生

「そうですね。JavaScriptの文字列操作は、名前が分かりやすいので覚えやすいんです。まずは基本のメソッドをしっかり使えるようになることが大切ですよ。」

生徒

「メールアドレスを小文字に揃える理由も分かりました。実際のWebサービスで使われている処理だと思うと、理解しやすかったです。」

先生

「その感覚はとても大事です。今回学んだ toUpperCase や toLowerCase は、 JavaScriptの基礎として何度も使うことになります。」

JavaScriptの文字列を大文字・小文字に変換する方法（toUpperCaseなど）