Case Converter
Case Converterの使い方|変換ミスで事故らないために
2025-10-03
:::note ※Case Converterの操作方法と、ツール連動の「行動」記事です :::
このツールを作った理由
手動で snake_case → camelCase を変換していた。間違えた。user_name を userName にするところを 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 | レスポンスの変換確認 |
| React | PascalCase | コンポーネント名 |
| CSS | kebab-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設計時のカラム名変換テクニック |
手動変換は事故る。ツールを使う。それだけ。