JavaScript Tips | 文字列ユーティリティ：整形 － キャメルケース化

JavaScript JavaScript
スポンサーリンク

キャメルケースってそもそも何か

まず言葉の整理からいきます。
「キャメルケース（camelCase）」は、プログラミングでよく使う“名前の付け方”のルールの一つです。

先頭は小文字。
単語の区切りごとに、次の単語の先頭を大文字にする。

例えばこうなります。

"user name" → "userName"
"user_name" → "userName"
"user-id" → "userId"

JavaScript では、変数名・関数名・オブジェクトのプロパティ名などで
キャメルケースがよく使われます。

const userName = "Taro";
function getUserName() {}
const userInfo = { firstName: "Taro" };
JavaScript

この「キャメルケース化」を自動でやってくれるのが、
今回の「キャメルケース化ユーティリティ」です。

どんな入力を「キャメルケース」にしたいのか

業務コードだと、こんなパターンがよく出てきます。

API から来る JSON のキーが user_name（スネークケース）
DB のカラム名が user_id
画面の設定ファイルで "user-name" のように書いてある

でも、フロント側の JavaScript では userName / userId で扱いたい。
この「形式の違い」を埋めるために、
文字列をキャメルケースに変換するユーティリティを用意します。

基本のキャメルケース化の考え方

やりたいことを分解すると、こうなります。

区切り文字（スペース、ハイフン、アンダースコアなど）で単語に分割する。
最初の単語は全部小文字にする。
2単語目以降は「先頭だけ大文字＋残りは小文字」にする。
区切り文字は削除して、全部つなげる。

例えば "user_name_id" なら、

["user", "name", "id"] に分割
"user" → "user"
"name" → "Name"
"id" → "Id"
つなげて "userNameId"

という流れです。

シンプルなキャメルケース化ユーティリティ

まずは実装例

初心者でも追いやすい形で書いてみます。

function toCamelCase(value) {
  if (value == null) return "";

  const str = String(value).trim();

  if (str === "") return "";

  const words = str
    .split(/[\s_\-]+/) // 空白・アンダースコア・ハイフンで分割
    .filter(Boolean);

  if (words.length === 0) return "";

  const first = words[0].toLowerCase();

  const rest = words
    .slice(1)
    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
    .join("");

  return first + rest;
}
JavaScript

やっていることを順番に噛み砕きます。

value == null（null / undefined）のときは空文字を返す。
String(value).trim() で文字列化し、前後の空白を削る。
split(/[\s_\-]+/) で「空白・アンダースコア・ハイフン」を区切りとして単語に分ける。
最初の単語は全部小文字にする。
2単語目以降は「先頭だけ大文字＋残りは小文字」にしてつなげる。

これで、よくあるパターンはだいたいカバーできます。

具体例で動きを確認する

スネークケースからキャメルケースへ

toCamelCase("user_name");        // "userName"
toCamelCase("user_name_id");     // "userNameId"
toCamelCase("USER_NAME");        // "userName"
JavaScript

全部大文字でも、ちゃんとキャメルケースになります。

ケバブケース（ハイフン区切り）からキャメルケースへ

toCamelCase("user-name");        // "userName"
toCamelCase("user-name-id");     // "userNameId"
JavaScript

CSS のプロパティ名っぽい文字列を
JavaScript のプロパティ名に変換するときにも使えます。

スペース区切りからキャメルケースへ

toCamelCase("user name");        // "userName"
toCamelCase("  user   name  ");  // "userName"
JavaScript

前後や途中の余計なスペースも、split と filter(Boolean) で吸収しています。

業務での実用的な使いどころ

API レスポンスのキーをキャメルケースにそろえる

例えば、バックエンドがこんな JSON を返してくるとします。

{
  "user_id": 1,
  "user_name": "Taro",
  "created_at": "2026-02-13T10:00:00Z"
}

フロントでは userId / userName / createdAt で扱いたい。
そんなとき、キーをキャメルケース化する小さなヘルパーを用意します。

function camelizeKeys(obj) {
  const result = {};

  for (const key in obj) {
    const camelKey = toCamelCase(key);
    result[camelKey] = obj[key];
  }

  return result;
}

const apiResponse = {
  user_id: 1,
  user_name: "Taro",
  created_at: "2026-02-13T10:00:00Z",
};

const user = camelizeKeys(apiResponse);
// { userId: 1, userName: "Taro", createdAt: "2026-02-13T10:00:00Z" }
JavaScript

これで、アプリ内部は「キャメルケースで統一」という世界にできます。

設定ファイルや CSV から読み込んだキーの整形

設定ファイルや CSV では、
user-name や user name のように書かれていることがあります。

それを JavaScript のオブジェクトにマッピングするとき、
キャメルケース化しておくと扱いやすくなります。

const columnMap = {
  "user id": "userId",
  "user name": "userName",
};

function normalizeColumnName(name) {
  return toCamelCase(name);
}

normalizeColumnName("user id");   // "userId"
normalizeColumnName("user name"); // "userName"
JavaScript

設計として大事なポイント

「内部表現をキャメルケースで統一する」という発想

業務コードでは、
「内部で使う名前のルールを決めておく」ことがとても大事です。

JavaScript なら、
変数名・プロパティ名はキャメルケースで統一する、
というのが自然な選択です。

そのうえで、

外部から来る名前（API、DB、CSV）は、受け取った瞬間にキャメルケース化する。
内部ではキャメルケースだけを意識すればいい世界にする。

という設計にしておくと、
「このキーは user_id だっけ？ userId だっけ？」という迷いが減ります。

変換を「入口」でやるか「その場その場」でやるか

悪いパターンは、
使うたびに toCamelCase を呼び続けることです。

toCamelCase("user_name");
toCamelCase("user_name");
toCamelCase("user_name");
JavaScript

これだと、どこで何が変換されているのか分かりづらくなります。

良いパターンは、

「外から入ってきた瞬間」に一度だけキャメルケース化する
以降はキャメルケースの名前だけを使う

という流れにすることです。

小さな練習で感覚をつかむ

コンソールで、いろいろ試してみてください。

toCamelCase("user_name");
toCamelCase("USER_NAME");
toCamelCase("user-name-id");
toCamelCase("  user   name  id  ");
toCamelCase(null);
JavaScript

どう分割されて、どうつながっているかを目で見て確認すると、
「キャメルケース化のルール」が体に入ってきます。

そのうえで、自分のプロジェクトに

export function toCamelCase(value) { ... }
JavaScript

を一つ置いて、
「外部から来たキー名は必ずここを通す」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「バラバラな命名に振り回される側」から
「自分たちのルールに正規化してから扱う側」に、一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました