テキストをPascalCase(パスカルケース)に変換する

クラス名、Reactコンポーネント、TypeScriptの型のためにテキストをPascalCase(UpperCamelCase)に変換する方法を学びます。PascalCaseとcamelCaseの違いを解説します。

Programming Cases

詳細な説明

テキストをPascalCaseに変換する

PascalCase(UpperCamelCaseとも呼ばれる)は複数の単語をセパレータなしで結合し、最初を含むすべての単語の最初の文字を大文字にします。この慣例を普及させたPascalプログラミング言語にちなんで名付けられました。

基本的な変換

入力:  user profile card
出力:  UserProfileCard

入力:  get-api-response
出力:  GetApiResponse

入力:  max_retry_count
出力:  MaxRetryCount

PascalCase vs. camelCase

唯一の違いは最初の文字です:

PascalCase: UserProfile
camelCase:  userProfile

PascalCaseが使用される場所

// TypeScript / JavaScript — クラスとReactコンポーネント
class UserService { /* ... */ }
function UserProfileCard({ name }: Props) { /* ... */ }

// TypeScript — インターフェースと型エイリアス
interface UserResponse { id: number; name: string; }
type PaymentStatus = "pending" | "completed" | "failed";

// C# — クラス、メソッド、プロパティ、名前空間
public class HttpClient { /* ... */ }
public string GetUserName() { /* ... */ }

// Go — エクスポートされた識別子(public)
func GetUserByID(id int) (*User, error) { /* ... */ }
type DatabaseConfig struct { /* ... */ }

ファイル命名規則

Reactプロジェクトでは、コンポーネントファイルは通常PascalCaseを使用します:

UserProfileCard.tsx
NavigationMenu.tsx
PaymentForm.tsx

変換アルゴリズム

  1. 入力をスペース、ハイフン、アンダースコア、またはケース遷移で単語に分割。
  2. 各単語を完全に小文字にする。
  3. 各単語の最初の文字を大文字にする。
  4. セパレータなしですべての単語を結合。

エッジケース

  • 単一単語: "hello""Hello"
  • 既にPascalCase: 入力はそのまま通過します。
  • 全大文字: "HTTP CLIENT""HttpClient"
  • 数字: "form step 2""FormStep2"

ユースケース

PascalCaseはReactやVueのコンポーネント名、TypeScriptのインターフェースと型エイリアス、C#のクラスとメソッド名、Goのエクスポートされた識別子、Javaのクラス名に必要です。コンポーネントのスキャフォールディングやテンプレートからのコード生成時に、自由形式のテキストをPascalCaseに変換することで言語の慣例に準拠できます。

試してみる — Text Case Converter

フルツールを開く