【JavaScript】capitalize（キャピタライズ）とは？使い方や実装方法をわかりやすく解説！

JavaScriptで文字列操作をしていると、「capitalize（キャピタライズ）」という言葉を目にすることがあります。聞き慣れない用語かもしれませんが、UI表示などではとてもよく使われる重要な操作です。

この記事では「capitalize（キャピタライズ）」について以下の内容をわかりやすく解説します。

  • capitalizeとは？
  • JavaScriptでのcapitalize関数の実装方法
    • capitalize関数を作る方法
    • lodashのcapitalizeを使う方法
  • 全単語をキャピタライズ（Title Case）したい場合

capitalizeとは？

capitalize（キャピタライズ）は、文字列の先頭の1文字を大文字にし、それ以降を小文字にする処理です。

たとえば、以下のような変換になります。

元の文字列キャピタライズ後
"hello""Hello"
"javascript""Javascript"
"JAVASCRIPT""Javascript"
"wORLD""World"

このように、最初の1文字を大文字にして、残りをすべて小文字にします。

capitalizeを使うシーン例

capitalizeは、以下のような場面でよく使われます。

  • ユーザー名を画面に整えて表示したいとき
    • 例："taro" → "Taro"
  • カテゴリ名やタグなどのラベル表示を整えたいとき
    • 例："technology" → "Technology"
  • APIのレスポンスがすべて小文字だった場合に、見た目を整えたいとき

英語のUIや、人名・地名の整形に使われることが多いです。

JavaScriptでのcapitalize関数の実装方法

JavaScriptにはcapitalize関数はデフォルトで存在しません。そのため、以下のいずれかの方法で対応する必要があります。

  • 自分でcapitalize関数を作る方法（軽量で依存なし）
  • lodashライブラリのcapitalizeを使う方法（確実で安心）

自分でcapitalize関数を作る方法

JavaScriptで作成したcapitalize関数を以下に示します。

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

console.log(capitalize('hello')); // Hello
console.log(capitalize('world')); // World

charAtメソッドで文字列の最初の1文字目を取得し、toUpperCaseメソッドで大文字にします。その後、sliceメソッドで2文字目以降をを取得し、toLowerCaseメソッドで小文字にすることで、capitalize関数を実装しています。

capitalize関数の作り方は様々な方法があります。例えば、以下のサンプルコードではstr[0].toUpperCase()で文字列の最初の1文字目を大文字にしています。

function capitalize(str) {
  if (!str) return '';
  return str[0].toUpperCase() + str.slice(1).toLowerCase();
}

なお、実際の開発では、関数に予期しない値が渡されることもあります。たとえば、数値やnull、空文字などです。そのようなときにエラーが起きないようにするには、入力チェック（バリデーション）を加えておくと安心です。以下にサンプルコードを示します。

function capitalize(str) {
  if (typeof str !== 'string' || str.length === 0) return '';
  return str[0].toUpperCase() + str.slice(1).toLowerCase();
}

console.log(capitalize(123)); // "" （数値 → 空文字）
console.log(capitalize('apple')); // "Apple"
console.log(capitalize('')); // "" （空文字 → 空文字）

lodashのcapitalizeを使う方法

lodashは、JavaScriptでよく使われる便利なユーティリティライブラリです。lodashには、capitalizeが標準で用意されています。ここでは、lodashのcapitalizeを使う方法について解説します。

まずはlodashをプロジェクトにインストールします。

npm install lodash
または
yarn add lodash

以下のコードのようにcapitalize関数を使います。

const { capitalize } = require('lodash');

console.log(capitalize('hello world')); // "Hello world"
console.log(capitalize('JAVASCRIPT')); // "Javascript"

lodash.capitalizeは1文字目を大文字にし、それ以降を小文字に変換します。ライブラリを使うことで、自作のミスを避けつつ安定した動作が得られます。

【補足】全単語をキャピタライズ（Title Case）したい場合

もし"hello world" → "Hello World"のように、各単語の先頭を大文字にしたい場合、capitalizeではなくlodashのstartCaseとtoLowerを使うのがおすすめです。以下にサンプルコードを示します。

const { startCase, toLower } = require('lodash');

const str = startCase(toLower('hello world'));
console.log(str); // "Hello World"

このようにすれば、複数単語をそれぞれキャピタライズすることができます。

本記事のまとめ

この記事では『capitalize（キャピタライズ）』について、以下の内容を説明しました。

  • capitalizeとは：文字列の最初の1文字を大文字にし、それ以降を小文字にする処理
  • JavaScriptには標準でcapitalize関数はない：自作関数やlodashなどで対応
  • 自作関数の書き方：シンプルな方法から入力チェックを含めた実用的な実装まで紹介
  • lodashを使えばより安心・便利：startCaseやtoLowerでTitle Caseも対応可能

ユーザー名やラベル、APIレスポンスなど、見た目を整える場面でcapitalizeは非常に役立ちます。場面に応じて自作するか、信頼性の高いライブラリを使うかを選び、コードの品質とメンテナンス性を高めていきましょう。

お読み頂きありがとうございました。

スポンサーリンク