3秒でわかる
単語の先頭をすべて大文字にして続けて書く命名規則。クラスや React コンポーネントの名前に使われ、変数名との見分けを付ける役割を持ちます。
もう少し詳しく
どういうものか
複数の単語をつなげて 1 つの名前にするとき、それぞれの単語の頭文字を大文字にし、区切り記号を使わずに連結する書き方です。UserProfile、HttpRequest、OrderService のような形になります。先頭も大文字になることから、アッパーキャメルケースとも呼ばれます。名前は Pascal 言語の慣習に由来します。
多くの言語で、クラスや型など「設計図にあたるもの」の名前に割り当てられています。Python は PEP 8 でクラス名にこの形を指定し、Java はクラスとインターフェース、TypeScript は型や interface、React は自作コンポーネントに使います。
なぜ必要か
読む側が、名前の形だけで正体を推測できるようになるためです。User と書いてあれば型かクラス、user なら値の入った変数だろう、という判断が、定義を探しに行かなくても付きます。コードを読む時間は書く時間より長いので、この差は積み上がります。
React では、この規則が単なる慣習を越えて動作に直結します。JSX は先頭が小文字のタグを HTML 要素、大文字のタグをコンポーネントとして扱うため、命名を間違えると描画そのものが失敗します。
具体例
同じ意味の名前を、言語ごとの使い分けと合わせて並べます。
// 型とクラスは先頭大文字
interface UserProfile {
displayName: string;
createdAt: Date;
}
class OrderService {
// メソッドと変数は先頭小文字
private cachedOrders: UserProfile[] = [];
findByEmail(emailAddress: string) {
return this.cachedOrders;
}
}
// React コンポーネントも先頭大文字
function ProfileCard({ user }: { user: UserProfile }) {
return <div>{user.displayName}</div>;
}class OrderService: # クラスは先頭大文字
MAX_RETRY = 3 # 定数は大文字とアンダースコア
def find_by_email(self, email_address): # 関数と変数はスネークケース
return []つまずきやすいところ
略語の扱いが揺れます。HTTPRequest と HttpRequest はどちらも見かけますが、大文字が連続すると単語の切れ目が読めなくなるため、略語も先頭だけ大文字にする形が主流です。プロジェクト内で片方に統一することが重要で、どちらを選ぶかは大きな問題ではありません。
ファイル名との不一致も起きます。React では ProfileCard.tsx のように、コンポーネント名とファイル名を揃えるのが一般的です。大文字小文字を区別しない環境で開発し、区別する環境へデプロイすると、そこで初めて読み込みに失敗するという厄介な壊れ方をします。
似た用語との違い
| 書き方 | 例 | 主な用途 |
|---|---|---|
| パスカルケース | UserProfile | クラス、型、コンポーネント |
| キャメルケース | userProfile | 変数、関数、メソッド |
| スネークケース | user_profile | Python の変数、DB の列名 |
| ケバブケース | user-profile | URL、CSS のクラス名 |
覚え方
ラクダのこぶが先頭にもあるのがパスカル、2 つ目のこぶから始まるのがキャメル。先頭が大きいかどうかだけの違いだと押さえておけば混同しません。
