JavaScriptで文字列をキャメルケースに変換する方法

キャメルケースとは？

キャメルケース（camel case）とは、フレーズ内の各単語や略語の先頭を大文字で表記し、単語間にスペースや区切り文字を一切入れない書き方のことです。
たとえば「Concurrent hash maps」という文字列をキャメルケースに変換すると、次のようになります。

ConcurrentHashMaps

この形式は、JavaやJavaScriptなどのプログラミングにおいて、クラス名や変数名の命名規則として広く使われています。

JavaScriptでキャメルケース変換を実装する

JavaScriptでは、文字列を受け取ってキャメルケースに変換する関数を、以下のようにシンプルに実装できます。

サンプルコード

function camelize(str) {
    // 文字列をすべてのスペースで分割する
    return str.split(' ')
        // trim()で余分な空白を取り除く
        .map(a => a.trim())
        // 各単語の先頭1文字を大文字に変換し、残りと連結する
        .map(a => a[0].toUpperCase() + a.substring(1))
        // すべての文字列を結合して1つの文字列に戻す
        .join("")
}
console.log(camelize("Concurrent hash maps"))

実行結果

ConcurrentHashMaps

コードの処理の流れ

この関数がどのように動作しているのか、処理を段階的に見ていきましょう。

1. split(' ')：元の文字列をスペース区切りで配列に分割します。「Concurrent hash maps」なら ["Concurrent", "hash", "maps"] になります。
2. map(a => a.trim())：各要素から前後の余分な空白を除去し、データを整えます。
3. map(a => a[0].toUpperCase() + a.substring(1))：各単語の先頭1文字だけを toUpperCase() で大文字化し、substring(1) で取得した2文字目以降と連結します。
4. join("")：配列の全要素を区切り文字なしで結合し、最終的な文字列として返します。

注意点

この実装では最初の単語も大文字になるため、厳密には「パスカルケース（Pascal Case／アッパーキャメルケース）」と呼ばれる形式になります。最初の単語を小文字のままにしたい場合は、最初の要素だけ先頭文字をそのまま使うように処理を調整してください。

また、空文字列を渡すと a[0] が undefined になりエラーが発生するため、実運用では入力値のチェックを追加しておくと安全です。