Reactで、camelCaseやsnake_caseを変換する方法

// camelCase や snake_case などの書き方を、互いに変換する関数

export type CaseStyle = 'camel' | 'pascal' | 'snake' | 'constant' | 'kebab';

// 識別子を単語に分ける
export function splitWords(input: string): string[] {
  return (
    input
      // 小文字か数字のあとに大文字が来たら分ける（userName → user Name）
      .replace(/(\p{Ll}|\p{Nd})(\p{Lu})/gu, '$1 $2')
      // 大文字が続いたあとの「大文字＋小文字」の前で分ける（XMLHttp → XML Http）
      .replace(/(\p{Lu})(\p{Lu}\p{Ll})/gu, '$1 $2')
      // 文字と数字以外（_ - . 空白など）で分ける
      .split(/[^\p{L}\p{Nd}]+/u)
      .filter((w) => w !== '')
  );
}

const capitalize = (w: string) => w.charAt(0).toUpperCase() + w.slice(1);

export function convertCase(input: string, style: CaseStyle): string {
  const words = splitWords(input).map((w) => w.toLowerCase());
  switch (style) {
    case 'camel':
      return words.map((w, i) => (i === 0 ? w : capitalize(w))).join('');
    case 'pascal':
      return words.map(capitalize).join('');
    case 'snake':
      return words.join('_');
    case 'constant':
      return words.join('_').toUpperCase();
    case 'kebab':
      return words.join('-');
  }
}

userName  UserName  user_name  USER_NAME  user-name

userID → user_id → userId
userIDs → user_i_ds → userIDs
listAPIs → list_ap_is → listApIs
user_1_name → user1Name → user1_name
address_line_2 → addressLine2 → address_line2

import { useId, useState } from 'react';
import { convertCase, type CaseStyle } from './caseConvert';

const styles: { style: CaseStyle; label: string }[] = [
  { style: 'camel', label: 'camelCase' },
  { style: 'pascal', label: 'PascalCase' },
  { style: 'snake', label: 'snake_case' },
  { style: 'constant', label: 'CONSTANT_CASE' },
  { style: 'kebab', label: 'kebab-case' },
];

export function CaseConverter({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  // 最後にコピーした書き方と、そのときの文字列。入力が変わったら「コピーしました」を消すために持つ
  const [copied, setCopied] = useState<{ style: CaseStyle; value: string } | null>(null);

  // 1行に1つの名前として、行ごとに変換する（空の行はそのまま残す）
  const lines = text.split('\n');

  async function copy(style: CaseStyle, value: string) {
    await navigator.clipboard.writeText(value);
    setCopied({ style, value });
  }

  return (
    <div className="case-converter">
      <label htmlFor={`${id}-input`}>変換する名前（1行に1つ）</label>
      <textarea
        id={`${id}-input`}
        rows={4}
        value={text}
        spellCheck={false}
        autoCapitalize="off"
        onChange={(e) => setText(e.target.value)}
      />
      <ul>
        {styles.map(({ style, label }) => {
          const value = lines.map((line) => convertCase(line, style)).join('\n');
          const done = copied?.style === style && copied.value === value;
          return (
            <li key={style}>
              <span className="label">{label}</span>
              <output>{value}</output>
              <button type="button" onClick={() => copy(style, value)} disabled={text.trim() === ''}>
                {done ? 'コピーしました' : 'コピー'}
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

.case-converter {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.case-converter textarea {
  font-family: ui-monospace, monospace;
  font-size: 16px;
}
.case-converter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.case-converter li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px;
  background: #eefafd;
  border-radius: 6px;
}
.case-converter .label {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #067a98;
}
.case-converter output {
  font-family: ui-monospace, monospace;
  white-space: pre;
  overflow-x: auto;
}
.case-converter button {
  align-self: start;
}

// API から受け取った JSON のキーを、snake_case から camelCase にする

// 型の上での変換。最初の _ の前と後ろに分け、後ろの先頭を大文字にする
export type SnakeToCamel<S extends string> = S extends `${infer Head}_${infer Tail}`
  ? `${Head}${Capitalize<SnakeToCamel<Tail>>}`
  : S;

export type CamelizeKeys<T> = T extends readonly (infer U)[]
  ? CamelizeKeys<U>[]
  : T extends object
    ? { [K in keyof T as K extends string ? SnakeToCamel<K> : K]: CamelizeKeys<T[K]> }
    : T;

// 実行時の変換。型と同じ結果になるように、_ で分けて2つ目から先頭を大文字にする
export function snakeToCamel(key: string): string {
  const [head, ...tail] = key.split('_');
  return head + tail.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
}

// JSON.parse() や response.json() の結果（配列とプレーンなオブジェクト）だけを扱う
export function camelizeKeys<T>(value: T): CamelizeKeys<T> {
  if (Array.isArray(value)) {
    return value.map((v) => camelizeKeys(v)) as CamelizeKeys<T>;
  }
  if (value !== null && typeof value === 'object') {
    return Object.fromEntries(
      Object.entries(value).map(([k, v]) => [snakeToCamel(k), camelizeKeys(v)]),
    ) as CamelizeKeys<T>;
  }
  return value as CamelizeKeys<T>;
}

{"user_id":1,"display_name":"ねこ","created_at":"2026-11-07T00:00:00Z","tags":[{"tag_id":3,"tag_name":"cat"}],"profile":{"avatar_url":null,"is_public":true}}

{"userId":1,"displayName":"ねこ","createdAt":"2026-11-07T00:00:00Z","tags":[{"tagId":3,"tagName":"cat"}],"profile":{"avatarUrl":null,"isPublic":true}}

// 変換前のキーで読もうとすると、型エラーになることを確かめる（tsc は失敗するのが正しい）
import { camelizeKeys } from './camelizeKeys';

declare const res: { user_id: number; display_name: string };
const user = camelizeKeys(res);
console.log(user.user_id);
console.log(user.displayName.toFixed());

src/typecheck-error.ts(6,18): error TS2551: Property 'user_id' does not exist on type '{ displayName: string; userId: number; }'. Did you mean 'userId'?
src/typecheck-error.ts(7,30): error TS2551: Property 'toFixed' does not exist on type 'string'. Did you mean 'fixed'?