テキストをcamelCase(キャメルケース)に変換する

JavaScript、TypeScript、Javaの変数名付けのためにテキストをcamelCaseに変換する方法を学びます。camelCaseのルール、単語境界、他の命名規則との使い分けを解説します。

Programming Cases

詳細な説明

テキストをcamelCaseに変換する

camelCaseは複数の単語を結合し、すべてのスペースと区切り文字を削除し、最初の単語を除く各単語の最初の文字を大文字にします。識別子の中央にある大文字が「こぶ」のように見えることからその名前が付けられました。

基本的な変換

入力:  user first name
出力:  userFirstName

入力:  get-api-response
出力:  getApiResponse

入力:  MAX_RETRY_COUNT
出力:  maxRetryCount

単語境界の検出方法

優れたcamelCaseコンバーターは複数のタイプの単語境界を認識します:

  1. スペース: "hello world"helloWorld
  2. ハイフン: "background-color"backgroundColor
  3. アンダースコア: "created_at"createdAt
  4. ケース遷移: "XMLParser"xmlParser
  5. ドット: "my.variable.name"myVariableName

camelCaseが使用される場所

// JavaScript / TypeScript — 変数、関数、メソッド
const userName = "Alice";
function getUserProfile(userId) { /* ... */ }
element.addEventListener("click", handleClick);

// Java — 変数、メソッド、パラメータ
String firstName = "Alice";
public void setUserName(String name) { /* ... */ }

// JSONキー(慣例)
{ "firstName": "Alice", "lastName": "Smith" }

camelCase vs. PascalCase

違いは単純です:camelCaseは小文字で始まり、PascalCaseは大文字で始まります。JavaScript/TypeScriptの慣例:

  • camelCase — 変数、関数、メソッド、プロパティ
  • PascalCase — クラス、コンポーネント、型

頭字語の処理

"XML HTTP request" → xmlHttpRequest  (推奨 — 頭字語を単語として扱う)
"XML HTTP request" → xmlHTTPRequest  (あまり一般的ではない — 頭字語を保持)

ほとんどのスタイルガイド(Google、Airbnb)は可読性を向上させるために頭字語を小文字にすることを推奨しています。

エッジケース

  • 単一単語: "hello""hello"(変更不要)。
  • 既にcamelCase: 入力はそのまま通過します。
  • 数字: "item 2 count""item2Count"
  • 先頭/末尾の区切り文字: "--my-var--""myVar"

ユースケース

camelCaseはJavaScript、TypeScript、Javaの変数名と関数名の標準です。JSON APIキー、CSS-in-JSプロパティ名、フロントエンドフレームワークのプロパティ(React、Vue、Angular)の慣例でもあります。異なる命名規則間のマッピング(データベースのカラム名(snake_case)からJavaScriptのオブジェクトプロパティへの変換など)に不可欠です。

試してみる — Text Case Converter

フルツールを開く