JavaScriptのtoUpperCaseを駆使して文字列を大文字化する8つの方法

●toUpperCaseメソッドとは？

皆さん、JavaScriptで文字列を扱う際に、大文字への変換が必要になったことはありませんか？

そんな時に活躍するのが、toUpperCaseメソッドです。

toUpperCaseメソッドは、文字列内の小文字を大文字に変換してくれる便利な機能です。

このメソッドを使いこなすことで、データの整形やバリデーションがスムーズに行えるようになります。

○toUpperCaseの基本的な使い方

それでは、toUpperCaseメソッドの基本的な使い方について見ていきましょう。

toUpperCaseメソッドは、文字列に対して直接呼び出すことができます。

例えば、次のようなコードを実行すると、文字列内の小文字がすべて大文字に変換されます。

const str = "Hello, World!";
console.log(str.toUpperCase()); // "HELLO, WORLD!"

このように、toUpperCaseメソッドを呼び出すだけで、簡単に文字列を大文字に変換できるのです。

○サンプルコード1：文字列を大文字に変換する

実際に、toUpperCaseメソッドを使って文字列を大文字に変換してみましょう。

const message = "This is a sample message.";
const upperMessage = message.toUpperCase();
console.log(upperMessage); // "THIS IS A SAMPLE MESSAGE."

上記のコードでは、messageという変数に格納された文字列に対して、toUpperCaseメソッドを呼び出しています。

その結果、文字列内のすべての小文字が大文字に変換され、upperMessage変数に格納されます。

実行結果を見ると、もとの文字列が大文字に変換されていることがわかります。

●文字列の一部を大文字に変換する方法

先ほどは、toUpperCaseメソッドを使って文字列全体を大文字に変換する方法を解説してきました。

しかし、実際の開発現場では、文字列の一部だけを大文字に変換したいケースも多いと思います。

例えば、ユーザーが入力した文字列の先頭だけを大文字にしたい場合や、特定の位置にある文字だけを大文字に変換したい場合などです。

そんな時は、どうすればよいのでしょうか？

これから、文字列の一部を大文字に変換する方法について、具体的なサンプルコードを交えながら解説していきますので、ぜひ参考にしてみてくださいね。

○サンプルコード2：文字列の先頭のみ大文字に変換

まずは、文字列の先頭だけを大文字に変換する方法から見ていきましょう。

次のようなコードを実行すると、文字列の先頭の文字だけが大文字に変換されます。

const str = "hello, world!";
const capitalizedStr = str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalizedStr); // "Hello, world!"

このコードでは、まずcharAt()メソッドを使って文字列の先頭の文字を取得し、それに対してtoUpperCase()メソッドを呼び出して大文字に変換しています。

そして、slice()メソッドを使って先頭の文字以外の部分を切り出し、大文字に変換した先頭の文字と結合しています。

実行結果を見ると、文字列の先頭だけが大文字になっていることがわかりますね。

○サンプルコード3：特定の位置の文字を大文字に変換

次に、文字列の特定の位置にある文字を大文字に変換する方法を見ていきましょう。

次のコードは、文字列の3番目の文字を大文字に変換する例です。

const str = "hello, world!";
const capitalizedStr = str.slice(0, 2) + str.charAt(2).toUpperCase() + str.slice(3);
console.log(capitalizedStr); // "heLlo, world!"

このコードでは、slice()メソッドを使って文字列を3つの部分に分割しています。

1. 先頭から2文字目まで（インデックス0〜1）
2. 3文字目（インデックス2）
3. 4文字目以降（インデックス3〜）

そして、2番目の部分（3文字目）に対してcharAt()メソッドとtoUpperCase()メソッドを呼び出して大文字に変換し、他の部分と結合しています。

実行結果を見ると、3文字目だけが大文字になっていますね。

○サンプルコード4：正規表現を使って特定のパターンの文字を大文字に変換

最後に、正規表現を使って特定のパターンの文字を大文字に変換する方法を見ていきましょう。

次のコードは、文字列内の全ての母音（a, e, i, o, u）を大文字に変換する例です。

const str = "hello, world!";
const capitalizedStr = str.replace(/[aeiou]/g, (match) => match.toUpperCase());
console.log(capitalizedStr); // "hEllO, wOrld!"

このコードでは、replace()メソッドの第一引数に正規表現/[aeiou]/gを指定しています。

これは、文字列内の全ての母音にマッチするパターンを表しています。

第二引数には、マッチした文字列に対して実行する関数を指定しています。

ここでは、アロー関数を使って、マッチした文字列（match）に対してtoUpperCase()メソッドを呼び出しています。

実行結果を見ると、文字列内の母音がすべて大文字に変換されていることがわかります。

●toUpperCaseメソッドと他のメソッドの組み合わせ

ここまで、toUpperCaseメソッドの基本的な使い方や、文字列の一部を大文字に変換する方法について解説してきました。

JavaScriptには、文字列操作に役立つ他のメソッドも数多くあります。

実際の開発現場では、これらのメソッドを組み合わせて使うことで、より効率的で可読性の高いコードを書くことができます。

ここでは、toUpperCaseメソッドと他のメソッドを組み合わせる方法を見ていきましょう。

○サンプルコード5：split()とmap()を使った単語ごとの大文字化

文字列を単語ごとに分割し、それぞれの単語の先頭を大文字に変換するには、split()メソッドとmap()メソッドを組み合わせると便利です。

次のコードは、文字列を空白で分割し、各単語の先頭を大文字に変換する例です。

const str = "hello world, how are you?";
const capitalizedWords = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1));
console.log(capitalizedWords.join(" ")); // "Hello World, How Are You?"

このコードでは、まずsplit(" ")を使って文字列を空白で分割し、単語の配列を取得しています。

次に、map()メソッドを使って配列の各要素（単語）に対して処理を行っています。

アロー関数の中で、charAt(0)で単語の先頭文字を取得し、toUpperCase()で大文字に変換しています。

そして、slice(1)で先頭文字以外の部分を取得し、大文字に変換した先頭文字と結合しています。

最後に、join(" ")で単語の配列を空白で結合し、文字列に戻しています。

実行結果を見ると、各単語の先頭が大文字になっていることがわかります。

○サンプルコード6：replace()とtoUpperCase()の組み合わせ

replace()メソッドとtoUpperCase()メソッドを組み合わせることで、特定の文字列を大文字に変換することができます。

次のコードは、文字列内の”javascript”という文字列を大文字に変換する例です。

const str = "I love javascript! javascript is awesome!";
const replacedStr = str.replace(/javascript/g, match => match.toUpperCase());
console.log(replacedStr); // "I love JAVASCRIPT! JAVASCRIPT is awesome!"

このコードでは、replace()メソッドの第一引数に正規表現/javascript/gを指定しています。

これは、文字列内の”javascript”という文字列にマッチするパターンを表しています。

第二引数には、マッチした文字列に対して実行する関数を指定しています。

ここでは、アロー関数を使って、マッチした文字列（match）に対してtoUpperCase()メソッドを呼び出しています。

実行結果を見ると、”javascript”という文字列がすべて大文字に変換されていることがわかります。

●よくあるエラーと対処法

ここまで、toUpperCaseメソッドの使い方や応用例を見てきましたが、実際にコードを書いているとエラーに遭遇することがあります。

初心者の方は、エラーメッセージを見ても何が原因でエラーが発生しているのかわからず、戸惑ってしまうこともあるでしょう。

ここでは、toUpperCaseメソッドを使用する際によく発生するエラーとその対処法について解説します。

エラーの原因を理解し、適切に対処できるようになりましょう。

○TypeError: toUpperCase() is not a function

次のようなコードを実行すると、”TypeError: toUpperCase() is not a function”というエラーが発生することがあります。

const num = 123;
console.log(num.toUpperCase()); // TypeError: toUpperCase() is not a function

このエラーは、toUpperCaseメソッドを文字列以外のデータ型に対して呼び出した場合に発生します。

上記のコードでは、数値型の変数numに対してtoUpperCaseメソッドを呼び出しているため、エラーが発生しています。

このエラーを避けるためには、toUpperCaseメソッドを呼び出す前に、対象が文字列であることを確認する必要があります。

次のように、typeof演算子を使ってデータ型をチェックすることができます。

const num = 123;
if (typeof num === "string") {
  console.log(num.toUpperCase());
} else {
  console.log("文字列ではありません");
}

実行結果

文字列ではありません

このように、typeof演算子で変数のデータ型が文字列であることを確認してから、toUpperCaseメソッドを呼び出すようにすれば、エラーを防ぐことができます。

○文字化けが発生する場合の対処法

toUpperCaseメソッドを使用して日本語の文字列を大文字に変換しようとすると、文字化けが発生することがあります。

const str = "こんにちは";
console.log(str.toUpperCase()); // "こんにちは"

実行結果

こんにちは

上記のコードでは、日本語の文字列に対してtoUpperCaseメソッドを呼び出していますが、期待通りに大文字に変換されていません。

これは、toUpperCaseメソッドが、アルファベットの大文字化にしか対応していないためです。

日本語の文字列を大文字に変換したい場合は、toLocaleUpperCase()メソッドを使用します。

const str = "こんにちは";
console.log(str.toLocaleUpperCase()); // "こんにちは"

実行結果

こんにちは

toLocaleUpperCase()メソッドは、言語に依存した適切な大文字変換を行うため、日本語の文字列でも問題なく動作します。

ただし、日本語の場合、大文字と小文字の区別がないため、見た目上は変化がないように見えます。

●toUpperCaseメソッドの実践的な応用例

さて、ここまでtoUpperCaseメソッドの基本的な使い方や、エラー対処法について解説してきましたが、実際の開発現場では、どのようにtoUpperCaseメソッドが活用されているのでしょうか？

ここからは、toUpperCaseメソッドの実践的な応用例を見ていきたいと思います。

実際のコードを交えながら、toUpperCaseメソッドがどのように活用されているのか、具体的に解説していきますので、ぜひ参考にしてみてください。

○サンプルコード7：ユーザー入力の整形

Webアプリケーションを開発していると、ユーザーからの入力をそのまま受け取ると、データの不整合が起きてしまうことがあります。

例えば、ユーザー名の入力欄では、大文字と小文字が混在していても問題ないことがありますが、データベースに保存する際は、統一された形式で保存したい場合があります。

そんな時は、toUpperCaseメソッドを使ってユーザーの入力を整形することができます。

const nameInput = document.getElementById("nameInput");
const submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", () => {
  const name = nameInput.value;
  const formattedName = name.toUpperCase();
  console.log("整形後のユーザー名：" + formattedName);
  // ここでformattedNameをデータベースに保存する処理を行う
});

上記のコードでは、ユーザー名の入力欄（nameInput）とSubmitボタン（submitButton）を取得しています。

Submitボタンがクリックされたら、入力欄の値を取得し、toUpperCaseメソッドを使って大文字に変換しています。

変換後の値はformattedName変数に格納されます。

実行結果

整形後のユーザー名：JOHN DOE

このように、toUpperCaseメソッドを使ってユーザーの入力を整形することで、データの一貫性を保つことができます。

○サンプルコード8：データのソートやフィルタリング

toUpperCaseメソッドは、データのソートやフィルタリングにも活用できます。

例えば、商品名のリストを商品コードの昇順でソートしたい場合、商品コードは大文字と小文字が混在しているかもしれない。

そんなときは、商品コードの大文字・小文字を統一したうえでソートを行う必要があります。

const products = [
  { name: "商品A", code: "ABC123" },
  { name: "商品B", code: "def456" },
  { name: "商品C", code: "GHI789" },
];

const sortedProducts = products.sort((a, b) => {
  const codeA = a.code.toUpperCase();
  const codeB = b.code.toUpperCase();
  if (codeA < codeB) {
    return -1;
  }
  if (codeA > codeB) {
    return 1;
  }
  return 0;
});

console.log(sortedProducts);

実行結果

[
  { name: "商品A", code: "ABC123" },
  { name: "商品B", code: "def456" },
  { name: "商品C", code: "GHI789" }
]

上記のコードでは、商品名とそれに対応する商品コードを持つオブジェクトの配列productsを定義しています。

sort()メソッドを使って配列を商品コードの昇順でソートしたい場合、比較関数の中でtoUpperCase()メソッドを使って商品コードを大文字に統一してから比較を行っています。

実行結果を見ると、商品コードが昇順に並んでいることが確認できます。

まとめ

JavaScriptでの文字列操作は、Webアプリケーション開発において非常に重要な要素の一つです。

toUpperCaseメソッドを始めとする文字列操作メソッドを使いこなすことで、より洗練されたコードを書くことができるようになります。

本記事で学んだ知識を活かし、実際の開発でtoUpperCaseメソッドを活用してみてください。

すると、今まで以上にスムーズで効率的な文字列処理ができるようになるはずです。

常に学習を怠らず、新しい知識を吸収し、実践に移すことが、エンジニアとしてのスキルアップにつながります。

今回学んだtoUpperCaseメソッドを、自分のコーディングにどう活かせるか、ぜひ考えてみてくださいね。