【Javascript】文字列を大文字/小文字へ変換する方法

今回の記事は、

  • Javascriptを使って文字列を大文字/小文字へ変換したい
  • 最初の文字だけ大文字に変換したい

という方に向けた記事になっています。

この記事の前半では「Javascriptを使って文字列を大文字/小文字へ変換する方法」をご紹介しつつ、後半ではその応用編として「最初の文字列だけ大文字に変換する方法」について解説していきます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Javascriptを使って文字列を大文字に変換する方法

Javascriptで文字列を大文字に変換するためには、toUpperCase()メソッドを使用します。

使い方自体はとても簡単で、文字列をレシーバとして、このtoUpperCase()メソッドを呼び出すだけで大丈夫です。

基本的な使い方

"文字列".toUpperCase()

それでは早速、様々な文字列に対してこのtoUpperCase()メソッドを使っていきましょう。

実装コード

<script>
const text_1 = "Javascript"
const text_2 = "プログラミング"
const number_1 = 10

console.log(text_1.toUpperCase())
console.log(text_2.toUpperCase())
console.log(number_1.toUpperCase())
</script>

出力結果

// console.log(text_1)の結果
"JAVASCRIPT"

// console.log(text_2)の結果
"プログラミング"

// console.log(number_1)の結果
Uncaught TypeError: number_1.toUpperCase is not a function

それぞれの出力結果を見てみると、文字列の中でも大文字/小文字の区別があるもののみ変換され、日本語の場合には特に変化はないことがご確認頂けるかと思います。

また、このtoUpperCase()メソッドは文字列以外に使用してしまうと上記のようなエラーが発生してしまいますので、くれぐれもご注意くださいね。

Javascriptを使って文字列を小文字に変換する方法

続いては、逆に小文字に変換する方法を見ていきましょう。

小文字に変換するには、toLowerCase()メソッドを使用します。

使い方は先ほどのtoUpperCase()メソッドと全く同じですので、早速具体例を見ながらその挙動を確認していきましょう。

実装コード

<script>
const text_3 = "JAVASCRIPT"
const text_4 = "プログラミング"
const number_2 = 10

console.log(text_3.toLowerCase())
console.log(text_4.toLowerCase())
console.log(number_2.toLowerCase())
</script>

出力結果

// console.log(text_3)の結果
"javascript"

// console.log(text_4)の結果
"プログラミング"

// console.log(number_2)の結果
Uncaught TypeError: number_2.toLowerCase is not a function

こちらも基本的にはtoUpperCase()メソッドと全く同じで、大文字/小文字の区別があるもののみ変換され、文字列以外に使用するとエラーが発生しているのがご確認頂けると思います。

【応用編】最初の文字だけ大文字にする方法

さて、toUpperCase()メソッドとtoLowerCase()メソッドの使い方や挙動をご確認いただいたところで、最後にそれを応用して、「最初の文字だけ大文字にする」方法をご紹介します。

Javascriptには「最初の文字だけ大文字にする」ための専用のメソッドは存在していないため、自作する必要があります。

自作するとはいえその方法はとても簡単で、以下のプロセスを踏むことで実現可能です。

  • 1. toLowerCase()メソッドで文字列を小文字に変換する
  • 2. charAt()メソッドとtoUpperCase()メソッドを使って最初の文字だけ大文字に変換する
  • 3. slice()メソッドを使って最初の文字以外の文字を取得する
  • 4. ステップ2, 3で取得した文字列を結合する

それでは具体的なコードを見ていきましょう。

実装コード

<script>
const text_5 = "Ruby on Rails"
const loweredText_5 = text_5.toLowerCase()
  
const newText_5 = loweredText_5.charAt(0).toUpperCase() + loweredText_5.slice(1)
  
// テンプレートリテラルを使用すると以下のように記述できます
const newText_5 = `${loweredText_5.charAt(0).toUpperCase()}${loweredText_5.slice(1)}`

console.log(newText_5)
</script>

出力結果

"Ruby on rails"

上記のようにtoUpperCase()、toLowerCase()、charAt()、slice()メソッドを組み合わせることで最初の文字だけ大文字に変換することができます。

コピペでそのまま動きますので、機会があればぜひ実際の開発でも使ってみてくださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、Javascriptを使って文字列を大文字/小文字へ変換する方法について解説してきましたがいかがでしたか?

Javascript側で便利なメソッドを用意してくれているため、とても簡単かつ直感的に使用できるのがお分かり頂けたかと思います。

【2020年版】Javascriptでブラウザを判定する方法まとめ【コピペで使える】 のようにブラウザを判定する際にも使用したりしますので、ぜひこの機会に覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。