CreaTools LogoCreaTools
Case Converter

Case Converterの使い方|変換ミスで事故らないために

2025-10-03

:::note ※Case Converterの操作方法と、ツール連動の「行動」記事です :::

このツールを作った理由

手動で snake_case → camelCase を変換していた。間違えた。user_nameuserName にするところを username にした。

レビューで指摘されて直した。でもまた間違えた。

手動変換は事故る。だからツールを作った。

🚀 今すぐ使う → Case Converter を開く


できること

文字列を入力すると、10種類の命名規則に一括変換する。

  • camelCase / PascalCase / snake_case / UPPER_SNAKE_CASE
  • kebab-case / dot.case
  • Title Case / Sentence case / lowercase / UPPERCASE

変換元の形式は自動判定。どの形式で入力しても正しく分解される。


3つのモード

単一変換

文字列を入力すると、全10形式の変換結果を一覧表示。

必要な形式の「コピー」ボタンをクリックするだけ。

JSON一括変換

JSONを貼り付けて、キーを一括変換。

ネストしたオブジェクトや配列も再帰的に処理する。APIレスポンスの形式変換に便利。

これが一番使う。FE/BEの変換で重宝する。

複数行一括変換

1行1変数で入力すると、まとめて変換。

出力形式は改行・カンマ・タブ・JSON配列・Before→After から選べる。


用途プリセット(複数行モード)

プリセット変換先私の使いどころ
DB設計snake_caseカラム名の一括生成
API(JS/TS)camelCaseレスポンスの変換確認
ReactPascalCaseコンポーネント名
CSSkebab-caseクラス名

私がよく使うパターン

パターン1:DB設計時

日本語のカラム名リストを英語に翻訳 → snake_case に一括変換。

ユーザーID → user_id
作成日時 → created_at

パターン2:API連携

バックエンド(snake_case)のJSONをフロントエンド(camelCase)用に変換。

// Before
{ "user_name": "tanaka" }

// After
{ "userName": "tanaka" }

パターン3:命名チェック

既存コードの変数名が規則に沿っているか確認。おかしいところを見つけたら直す。


迷ったときの判断

迷い私の判断
どのモードを使うかJSON変換が一番多い
プリセットを使うか使う。設定ミスを防げる
手動変換か手動はやらない。事故る

この記事で解決しない場合

知りたいこと読むべき記事
命名規則の全体像命名規則の使い分け
FE/BEの変換フロントエンドとバックエンドの命名規則と変換
DBの命名DB設計時のカラム名変換テクニック

手動変換は事故る。ツールを使う。それだけ。