text / case

キャメルケース / パスカルケース 変換

snake_case・kebab-case・ スペース区切りなど、あらゆる表記からcamelCase /PascalCase に変換します。

使い方

01
  1. 「camelCase」または「PascalCase」タブを選択してください
  2. テキストエリアに変換したい文字列を入力すると、リアルタイムで結果が表示されます
  3. 入力は _・-・ スペース・ドット・大文字の境界で自動的に分割されます
  4. 「コピー」ボタンで変換結果をクリップボードにコピーできます

実装コード

02

コアは tokenize() 関数。 正規表現で camelCase / PascalCase の境界を検出してから区切り文字で分割し、単語の配列を作ります。 外部ライブラリ不要でそのままコピーして利用できます。

// 入力を単語トークン配列に分解（複数記法に対応）
function tokenize(input: string): string[] {
  return input
    .replace(/([a-z\d])([A-Z])/g, '$1 $2')    // camelCase 分割
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2') // HTMLParser → HTML Parser
    .split(/[\s\-_.]+/)
    .filter(Boolean)
    .map((w) => w.toLowerCase())
}

export function toCamelCase(input: string): string {
  const tokens = tokenize(input)
  if (tokens.length === 0) return ''
  return (
    tokens[0] +
    tokens.slice(1).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('')
  )
}

export function toPascalCase(input: string): string {
  return tokenize(input).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('')
}

よくある使用例・注意点

03
JavaScript / TypeScript の変数・関数名
JavaScript / TypeScript では変数名・関数名に camelCase が慣例です（例: getUserName, fetchApiData）。snake_case のDBカラム名やAPI レスポンスキーを変換するときに使えます。
クラス名・型名には PascalCase
TypeScript のクラス・インターフェース・型エイリアスは PascalCase が標準（例: UserProfile, ApiResponse）。React コンポーネント名も PascalCase が必須です。
略語（Acronym）の扱い
HTMLParser のような連続大文字は HTML + Parser と分割されます。変換結果は htmlParser（camel）/ HtmlParser（pascal）になります。略語を大文字のまま保持する場合は手動調整が必要です。
数字を含む識別子
数字は小文字と同様に扱われます。例えば「base64 encode」は base64Encode（camel）/ Base64Encode（pascal）になります。
複数行入力は1行ずつ変換
改行を含む入力は1行全体を1つの識別子として処理します。複数の識別子を変換したい場合は1行ずつ貼り付けてください。

関連ツール

04
ケバブ・スネークケース変換全角・半角変換文字数カウンターURLエンコード

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →