ケース変換ツール — UPPERCASE、lowercase、camelCase ほか

ケース変換ツールとは？

// The tokenizer that powers every programming-case conversion
function tokenize(input) {
  return input
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')      // lower→upper: parseHTML → parse HTML
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')   // acronym boundary: XMLHttp → XML Http
    .replace(/([A-Za-z])(\d)/g, '$1 $2')          // letter→digit: file2 → file 2
    .replace(/(\d)([A-Za-z])/g, '$1 $2')          // digit→letter: 2x → 2 x
    .replace(/[\s\-_./\\]+/g, ' ')                // collapse separators
    .split(' ').filter(Boolean);
}

// Then each case is a one-liner over the tokens
const camelCase  = (s) => tokenize(s).map((t, i) => i === 0 ? t.toLowerCase() : cap(t)).join('');
const snakeCase  = (s) => tokenize(s).map(t => t.toLowerCase()).join('_');
const kebabCase  = (s) => tokenize(s).map(t => t.toLowerCase()).join('-');
const PascalCase = (s) => tokenize(s).map(cap).join('');

function cap(t) {
  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
}

主な特長

ケース変換ツールの代替比較

ケース変換の例

URGENT: PLEASE REVIEW THE Q4 BUDGET PROPOSAL BEFORE FRIDAY

user_profile_image_url

XMLHttpRequest

10 Tips for Faster JavaScript: A Complete Guide

accessControlAllowOrigin

max retries per request

this is fine, everything is going great

ケース変換ツールの使い方

1. 1

   テキストを貼り付けるか入力

   エディタをクリックして入力するか、任意のテキスト — 文、段落、識別子、見出し — を貼り付けます。すべてのケース出力が即座に更新されます。ケースの違いを見るだけなら、Sample をクリックして代表的なフレーズを読み込みましょう。

2. 2

   グリッドをスキャン

   7 つのテキストケース (UPPERCASE、lowercase、Title、Sentence、iNVERSE、aLtErNaTiNg、RaNdOm) は上部セクションにあります。8 つのプログラミングケース (camelCase、PascalCase、snake_case、kebab-case、CONSTANT_CASE、dot.case、path/case、Header-Case) は下部セクションにあります。各カードはケースラベル、1 行の説明、変換後の出力を表示します。

3. 3

   必要なケースの Copy をクリック

   各出力カードには独自の小さな Copy ボタンがあります。1 回クリックすると — そのケースがクリップボードに入り、ボタンが「Copied!」と光り、他の場所に貼り付ける準備が整います。出力テキストを先にハイライトする必要はありません。

4. 4

   必要なら random case を再シャッフル

   同じテキストで異なる RaNdOm CaSe のバリエーションが欲しい場合は、アクションバーの Re-shuffle をクリックします。Random Case の出力のみが変わり、入力テキストと他のすべての出力はそのままです。

5. 5

   完了したらクリア

   Clear をクリックするとエディタが空になり、すべての出力がリセットされます。Sample はデモテキストを再読み込みします。すべての操作は即時で、サーバーには何も送信されません。

ケース変換でよくある誤り

入力: "the quick brown fox jumps over the lazy dog"
snake_case 出力: the_quick_brown_fox_jumps_over_the_lazy_dog
結果: 誰も欲しがらない 50 文字の識別子。

入力: "quickBrownFox"
snake_case 出力: quick_brown_fox
結果: クリーンな 3 トークンの識別子。

入力: "a tale of two cities"
本ツールの Title Case: A Tale Of Two Cities
期待値 (AP スタイル): A Tale of Two Cities

一般的な大文字化には本ツールを使う。
編集者向けタイトルには AP スタイルの見出しツールを使う。
異なるツール、異なる慣例。

入力: XMLHttpRequest
PascalCase 出力: XmlHttpRequest
期待値 (頭字語保持): XMLHttpRequest

タイトルケース化された頭字語を受け入れる、または
変換後に手動で頭字語を保持する、または
頭字語のヒントを尊重するトークナイザーを使う。

入力: https://example.com/api/users
snake_case 出力: https_example_com_api_users
結果: もはや URL ではない。

入力: https://example.com/api/users
URL はそのままに — すでに適切な形式です。
スラッグ抽出には URL パスを手動で解析してください。

目標: 「user.profile.image 変数を設定する」
dot.case の出力を変数名として使用: `user.profile.image`
大半の言語ではこれは識別子ではなくプロパティアクセスです。

単一の変数には: userProfileImage (camelCase)。
名前空間化されたキーには: user.profile.image (dot.case が正しい)。
ターゲット構文にケースを合わせる。

入力: "e.g. this is an example. Read more."
Sentence case 出力: "E.g. This is an example. Read more."
`g.` が文末記号として誤って扱われた。

Sentence case を最初に実行し、少数の略語エッジケースを手作業で修正する。
または文内ピリオドを避けるために言い換える。
(NLP グレードの文検出は別カテゴリのツールです。)

代表的なユースケース

言語をまたいで識別子をリネームする開発者

JS 変数を Python の snake_case 名に、CSS クラスを React の PascalCase コンポーネントに、環境変数を設定定数に移行する。ソース名を一度貼り付け、適切な出力をコピー — 文字単位での手作業の変換は不要です。

ヘッダー名を変換するバックエンド開発者

Content-Type、Access-Control-Allow-Origin、X-Forwarded-For などの HTTP ヘッダーには特定の Header-Case の綴りがあります。camelCase の JS プロパティ名を貼り付け、正準的なヘッダー形式をコピー — fetch() オプション、サーバーミドルウェア、プロキシ設定で動作します。

ALL-CAPS のメール調子を除去するライター

転送された大文字だけのメールやチャットメッセージは叫び立てるように読めます。Sentence case に貼り付けて調子を緩めるか、Title Case で洗練された見出しの雰囲気を保ちましょう。空白と句読点はそのまま残ります。

見出しを書くマーケター

見出しには Title Case、本文コピーやキャプションには Sentence case — 現代の大半のスタイルガイド (AP、Google、Apple) が推奨する慣例です。両方を同時に見て、配置に合う方を比較できます。

URL スラッグを生成する SEO スペシャリスト

kebab-case はあらゆる CMS が期待する URL スラッグの慣例です。句読点と大文字を含むページタイトルを貼り付け、kebab-case の出力をコピー — WordPress、Ghost、Hugo のスラッグフィールドにそのまま投入できます。トークナイザーが句読点をきれいに除去します。

カラムやテーブルを命名する DBA

カラム名やテーブル名の snake_case は、PostgreSQL、MySQL、SQLite、大半の ORM で普遍的な慣例です。人間が読めるラベルや camelCase の API フィールド名を貼り付け、snake_case 版をコピーしましょう。

CSS クラスを書くフロントエンド開発者

クラス名の kebab-case は CSS 仕様の慣例です (BEM、Tailwind ユーティリティ、大半のデザインシステム)。camelCase の JS コンポーネント名を貼り付け、マッチする CSS モジュール用に kebab-case 版をコピーしましょう。

ミーム作者と皮肉愛好家

aLtErNaTiNg cAsE と RaNdOm CaSe は、皮肉に引用したり茶化したりするのに使われるスポンジボブミームのフォーマットです。Re-shuffle は入力を変えずにランダムバリアントを再生成します — 気に入るものができるまで数回生成しましょう。

トークン化と変換ルール

トークン化ルール

トークンは 4 つの境界で空白を挿入して抽出されます: 小文字から大文字 (parseHTML → parse HTML)、大文字から大文字から小文字 (XMLHttp → XML Http)、文字から数字 (file2 → file 2)、数字から文字 (2x → 2 x)。次に一般的な区切り文字 (空白、ハイフン、アンダースコア、ドット、スラッシュ、バックスラッシュ) が単一の空白に折りたたまれます。結果のトークンが分割され、トリムされ、空のものが除去されます。これは lodash と change-case パッケージの慣例と一致します。

プログラミングケースの出力は句読点を除去

camelCase、PascalCase、snake_case、kebab-case、CONSTANT_CASE、dot.case、path/case、Header-Case はすべてクリーンな識別子を生成します — 入力中の句読点 (カンマ、ピリオド、括弧) は、大半の言語の識別子に現れることができないため除去されます。句読点を保持する必要がある場合は、テキストケースの出力 (UPPERCASE、lowercase、Title、Sentence、iNVERSE、aLtErNaTiNg、RaNdOm) を使ってください。

テキストケースの出力はすべてを保持

UPPERCASE、lowercase、Title Case、Sentence case、iNVERSE cASE、aLtErNaTiNg cAsE、RaNdOm CaSe はすべて空白、改行、句読点を保持します。複数段落の文書を貼り付けても構造は残ります — 文字のケースだけが変わります。これらの変換はトークン化なしに文字単位で動作します。

Title Case (素朴なバリアント)

本ツールの Title Case は、空白区切りの各単語の最初の文字を大文字にし、残りを小文字にします。APA、Chicago、AP のスタイルガイドは、短い冠詞や前置詞 (a、an、the、of、in、for) を小文字にすることを推奨します。それらのバリアントは専用ツールに値するほど異なります。一般的な大文字化には本ツールの Title Case を、AP スタイルの見出しには見出し専用ツールを使ってください。

Sentence case の境界検出

Sentence case はすべてを小文字にしてから、入力の最初の文字と、任意の文末記号 (. ! ? 。 ！ ？) に空白が続いた後の最初の文字を大文字にします。検出器は Mr. や U.S.A. のような略語を曖昧性解消しようとはしません — そこでの誤検出は、稀な見逃しケースよりノイズが多いからです。

Alternating Case はグローバルトグルを使用

aLtErNaTiNg cAsE は各文字で小文字と大文字を切り替え、単語境界をまたぐグローバルトグルを使用します。非文字の文字はトグルを進めません。これは convertcase.net や他のミームジェネレーターが使用する慣例と一致します — 同じ入力に対して予測可能で再現可能です。

Random Case は Math.random() を使用

RaNdOm CaSe は Math.random() を使って文字ごとに独立したコイン投げを行います。Re-shuffle をクリックするたびに異なる結果が得られます。ランダムソースは暗号学的に強くありません。カジュアルなテキストには十分ですが、パスワード生成には使わないでください (それには専用のパスワードジェネレーターを使ってください)。

Unicode とロケール対応のケースマッピング

`toLocaleLowerCase()` と `toLocaleUpperCase()` を使用しているため、トルコ語のドット付き / ドットなしの İ/ı、ドイツ語の ß (標準的な扱いでは SS に大文字化)、その他ロケール依存のケースマッピングを正しく処理します。トークン化は \p{L} で任意の文字体系の文字を認識します。プログラミングケースの出力は、言語間の互換性のためにデフォルトで ASCII 識別子文字に揃えられます。

ケースを選ぶためのベストプラクティス

コードベースに合うケースを選ぶ

変数名にとって正しいケースは、最も美しいものではなく — コードベースがすでに使っているものです。JavaScript と Java: 変数とメソッドに camelCase、クラスに PascalCase。Python、Ruby、Rust: クラス名 (PascalCase) 以外のすべてに snake_case。CSS と URL: kebab-case。環境変数と定数: CONSTANT_CASE。ローカルの慣例に合わせましょう。一貫性は理論的な正しさに勝ります。

UI マイクロコピーには Sentence case を使う

Google、Apple、Microsoft のデザインシステムは、この 10 年でボタンラベル、メニュー項目、ダイアログテキスト、その他の UI マイクロコピーに Sentence case を標準化しました。UI での Title Case は今では古風で、わずかに叫び立てるように読まれます。Title Case は主要な見出し、ページタイトル、書籍タイトルに取っておきましょう。

貼り付ける前にスマートクォートを除去

Microsoft Word、Google Docs、Apple Notes からの貼り付けは、ASCII と見た目は同じでもエンコーディングが異なるスマートクォート (“”)、em ダッシュ (—)、その他のタイポグラフィ文字を引き込みます。ケース変換はそれらを正しく扱いますが、プログラミングケースの識別子に変換する場合は、コードエディタでの予期せぬ挙動を避けるために、先に手動で ASCII 等価物に置換してください。

プログラミングケースは識別子を 1 つずつ変換

camelCase、snake_case、kebab-case などは、入力全体から単一の識別子を生成します。文を snake_case に貼り付けると、1 つの長い識別子になります — 技術的には正しいですが、ほとんどの場合あなたが望むものではありません。識別子変換には 1 単語または複合語を 1 つずつ貼り付けましょう。段落長のテキストにはテキストケースの変換を使ってください。

リファクタリング前に頭字語の往復を確認

XMLHttpRequest → xml_http_request → XmlHttpRequest が標準的な往復で、頭字語は戻る際にタイトルケース化されます。コードベースが元の頭字語の大文字化を保持している場合 (XmlHttpRequest が XMLHttpRequest のまま)、往復は完全には一致しません。プロジェクト全体のリネームを行う前に、いくつかの変換をスポットチェックしましょう。

HTTP/1.1 には Header-Case、HTTP/2 には kebab-case

HTTP/1.1 はヘッダー名についてケース非依存ですが、Header-Case (Content-Type、X-Forwarded-For) が誰もが使う慣例的な人間可読の綴りです。HTTP/2 は明示的に小文字のヘッダー名を要求します — そちらには kebab-case を使ってください (content-type、x-forwarded-for)。迷ったら、kebab-case はどちらのプロトコルでも動作します。

Random Case は多様性のため、セキュリティのためではない

Random Case はミームには楽しいですが、暗号学的な意味でランダムではありません — Math.random() を使用しており、視覚的な多様性には問題ありませんが、ランダム性が重要なもの (パスワード生成、セキュリティトークン、A/B テスト) には使えません。暗号学的なランダム性には専用のパスワードジェネレーターを使ってください。

よくある質問