Case Converter

Case Converter

任意の文字列を 11 種類の命名規則に一度に変換 — camelCase、PascalCase、snake_case、kebab-case、その他多数。さらにすべてのキーを再帰的に書き換える JSON-keys バッチモードも。すべてブラウザ内で動作。

Case Converter — TL;DR

任意の文字列を 11 種類の命名規則に一度に変換 — camelCase、PascalCase、snake_case、kebab-case、その他多数。さらにすべてのキーを再帰的に書き換える JSON-keys バッチモードも。すべてブラウザ内で動作。

いずれも複数語の識別子(あるいはファイル名、URL、CSS クラス)をスペースなしで書く方法です。camelCase は最初以外のすべての単語の頭文字を大文字にします(`userFirstName`)。JavaScript、Java、Swift で使われます。snake_case はすべて小文字でアンダースコア区切り(`user_first_name`)。Python、Ruby、SQL で使われます。kebab-case はハイフンを使います(`user-first-name`)。CSS、HTML、URL スラッグ、コマンドラインフラグで使われます。PascalCase は最初の文字も大文字にした camelCase(`UserFirstName`)で、多くの言語でクラス名 / 型名に使われます。

トークナイザーは 2 つの境界ルールを使います:小文字から大文字(`a` の後に `B` = 分割)と 大文字連続から Title(大文字の連続の後に小文字が続く場合、最後の大文字の前で分割)。これにより `XMLHttpRequest` は `[XML, Http, Request]` → `xml_http_request` / `xmlHttpRequest` / `XmlHttpRequest` になります。`userIDToken` は `[user, ID, Token]` → `user_id_token` になります。これは多くの言語のスタイルガイドが推奨する挙動と一致します。

識別子も JSON もあなたのデバイスから出ません。DevTools → Network を開けば、変換中もコピー中も外部へのリクエストがゼロであることが確認できます。

11 の命名規則を、貼り付け一発で

定番の camelCase / snake_case から dot.case / path/case まで — さらにネストされたオブジェクトのすべてのキーを書き換える JSON-keys バッチモードも搭載。

11 種類のケーススタイルを一度に

camelCase、PascalCase、snake_case、CONSTANT_CASE、kebab-case、COBOL-CASE、dot.case、path/case、Title Case、Sentence case、UPPERCASE、lowercase。一度貼り付ければ、すべての出力が瞬時に表示されます。

スマートなトークン分割

あらゆる入力スタイルにわたって識別子を正しく分割します — `XMLHttpRequest` → `xml_http_request`、`userIDToken` → `user_id_token`。略語、数字、混在するセパレーター(_、-、.、/)も混乱なく処理します。

JSON-keys バッチモード

ネストされた JSON オブジェクトを貼り付けると、選択したスタイルですべてのキーを — 再帰的に — 書き換えます。任意で文字列の値も変換可能。配列、型、構造はそのまま保持されます。

ワンクリックコピー

各出力行にはコピーボタンが付いており、クリックするだけで値がクリップボードに入ります。視覚的に確認でき、トースト通知のスパムもありません。

設計段階からプライバシー重視

すべての変換はあなたのデバイス上の JavaScript で実行されます。識別子も JSON もクリップボードのアクティビティも、一切送信されません。DevTools → Network を開けば、外部へのリクエストがゼロであることを確認できます。

小さく、速い

純粋な JavaScript、フレームワークのランタイムなし。コールドロードは gzip 後 25 KB 未満。任意の文字列の 11 種類の変換すべてが 1 ms 未満で完了します。

コンバーターの使い方

2 つのモード — 単一文字列と JSON-keys バッチ。

  1. 1

    モードを選ぶ

    1 つの識別子やフレーズには 単一文字列 — 一度入力 / 貼り付けすれば、11 種類すべてのケース出力が表示されます。ネストされた API レスポンスや設定ファイルのすべてのキーを変換したいときは JSON キー(バッチ) を選びます。

  2. 2

    入力を貼り付ける

    単一文字列モードはあらゆる入力を受け付けます — `userFirstName`、`user_first_name`、`user-first-name`、`USER FIRST NAME`、さらには `XMLHttpRequest` も。トークナイザーが正しく分割し、すべての出力スタイルで再結合します。JSON モードは有効な JSON オブジェクトを受け付け、深さは問いません。

  3. 3

    ターゲットスタイルを選ぶ

    単一文字列モードでは 11 種類の出力がすべて同時に表示されます — 必要なものを選んでください。JSON モードではドロップダウンから 1 つのターゲットケースを選び、オブジェクトのすべてのキーがそのスタイルに書き換わります。

  4. 4

    コピーして貼り付け

    任意の出力行の隣のコピーアイコンをクリックすると、クリップボードに送られます。JSON 出力では結果ブロック全体をコピーし — そのままコードベースや API クライアントに貼り付けられます。

コードレビュー、リファクタリング、API 配管のために

一度貼り付けてすべてのスタイルを得る方が、地道に手作業で改名するより速い 4 つのよくある場面。

バックエンド ↔ フロントエンドの境界

バックエンドが返すのは `user_first_name`、フロントエンドが欲しいのは `userFirstName`。貼り付け、コピー、貼り付け — 完了。JSON バッチモードを使えば、サンプル API レスポンスのすべてのキーを 1 ステップで変換できます(その結果に基づいて codegen テンプレートを書きましょう)。

言語をまたいだリファクタリング

Python ライブラリを JavaScript に移植中?Python ソースの snake_case 識別子を取り出して camelCase 出力にかけ、結果を JS ポートに貼り付けましょう。スマートトークナイザーは `__double_underscore` や末尾の数字も壊さずに処理します。

ENV 変数 ↔ ランタイム設定

`MY_AWESOME_FEATURE_FLAG`(env 変数の慣例)を `myAwesomeFeatureFlag`(JS 変数)や `my_awesome_feature_flag`(Python)に変換。CONSTANT_CASE / camelCase / snake_case のラウンドトリップは正確です。

CSS / ファイル命名

BEM は kebab-case を期待します:`.user-card__avatar--large`。デザイナーから JS 変数名(`userCardAvatarLarge`)を渡された?1 ステップで変換できます。Tailwind ユーティリティ、npm パッケージ名、URL スラッグ、CLI フラグ名にも便利 — いずれも kebab-case を好みます。

100% プライベート — ブラウザ内で動作

識別子も JSON もあなたのデバイスから出ません。DevTools → Network を開けば、変換中もコピー中も外部へのリクエストがゼロであることが確認できます。

  • すべてのトークン分割、ケース変換、JSON 走査は、あなたのマシン上の JavaScript として実行されます — ページソースで確認できます。
  • クリップボードへの書き込みは標準の navigator.clipboard.writeText API を使用し、何もログに残りません。
  • ログイン不要、識別子の値に関するテレメトリーなし、サードパーティ API なし。Cookie は cookie 同意の状態用に 1 つ、言語設定用に 1 つを使うのみです。

関連ガイド

命名規則、API 設計、リファクタリングに関する厳選記事。

よくある質問

camelCase、snake_case、kebab-case の違いは何ですか?

いずれも複数語の識別子(あるいはファイル名、URL、CSS クラス)をスペースなしで書く方法です。camelCase は最初以外のすべての単語の頭文字を大文字にします(`userFirstName`)。JavaScript、Java、Swift で使われます。snake_case はすべて小文字でアンダースコア区切り(`user_first_name`)。Python、Ruby、SQL で使われます。kebab-case はハイフンを使います(`user-first-name`)。CSS、HTML、URL スラッグ、コマンドラインフラグで使われます。PascalCase は最初の文字も大文字にした camelCase(`UserFirstName`)で、多くの言語でクラス名 / 型名に使われます。

スマートトークナイザーは略語をどう扱いますか?

トークナイザーは 2 つの境界ルールを使います:小文字から大文字(`a` の後に `B` = 分割)と 大文字連続から Title(大文字の連続の後に小文字が続く場合、最後の大文字の前で分割)。これにより `XMLHttpRequest` は `[XML, Http, Request]` → `xml_http_request` / `xmlHttpRequest` / `XmlHttpRequest` になります。`userIDToken` は `[user, ID, Token]` → `user_id_token` になります。これは多くの言語のスタイルガイドが推奨する挙動と一致します。

JSON-keys バッチモードは何をしますか?

JSON オブジェクト — 深くネストされたものでも — を貼り付け、変換先のケーススタイルを選択します。ツールはツリー全体を深さ優先で走査し、すべてのキー(配列内のキーも含む)を変換し、再構築した JSON を出力します。配列、型(number / boolean / null)、構造は完全に保持されます。「文字列の値も変換する」をオンにすると、文字列の値もすべて同じトークナイザーで書き換えます。

プロジェクトではどの規則を使うべきですか?

まずは 言語 の主流の規則に従い、次に チーム の規則に従ってください。デフォルトとしては:JS / Java / Swift / Kotlin / Go では camelCase(エクスポート名は PascalCase)、Python / Ruby / Rust / SQL カラムでは snake_case、CSS クラス / HTML 属性 / URL パス / npm パッケージ / CLI フラグでは kebab-case、環境変数や言語の定数では SCREAMING_SNAKE_CASE。レイヤー間で変換する場合(snake_case API → camelCase フロントエンド)、変換境界を 1 つに絞り、システムの他の部分は一貫性を保ちましょう。

サーバーに何か送信されますか?

いいえ。トークン分割、すべての変換、JSON-keys バッチモードはすべてブラウザ内の JavaScript で実行されます。DevTools → Network を開けば、利用中に外部へのリクエストがゼロであることを確認できます。Cookie は cookie 同意の状態用に 1 つ、言語設定用に 1 つを使うのみです。