Text Caseとは？開発者向けNaming Conventionsガイド

Text Caseとは？

Text caseとは、文字をどのように大文字化し、区切り、結合するかを表す形式です。日常的な例にはuppercase、lowercase、title case、sentence caseがあります。

programmingでは、text caseは実用的な問題も解決します。多くのidentifierにはspaceを含められないため、developersはcamelCase、snake_case、kebab-caseなどで単語を結合しつつ読みやすくします。

これらのconventionsは見た目だけの問題ではありません。frameworks、linters、databases、APIs、programming languagesは、特定のcasing patternを期待することがあります。

基本的なText Cases

programming固有の形式を見る前に、文章やinterfaceで使われる基本的なcaseを確認しましょう。

Programming Naming Conventions

Programming naming conventionsは、spaceなしでmulti-word namesをどう表すか、という問いに答えます。

The phrase "get user profile" becomes:

  camelCase:      getUserProfile
  PascalCase:     GetUserProfile
  snake_case:     get_user_profile
  kebab-case:     get-user-profile
  CONSTANT_CASE:  GET_USER_PROFILE
  dot.case:       get.user.profile

それぞれのconventionには理由があります。正しい選択はlanguage、framework、identifier typeによって変わります。

camelCase

camelCaseは小文字で始まり、後続の各wordを大文字で始めます。JavaScriptや関連ecosystemではvariablesやfunctionsのdefault styleです。

JavaScript、TypeScript、Javaのmethods/variables、Swift、Kotlin、多くのJSON APIsで一般的です。

// JavaScript / TypeScript
const firstName = "Alice";
const lastName = "Smith";
const isLoggedIn = true;

function getUserProfile(userId) { ... }
function calculateTotalPrice(items) { ... }
function handleFormSubmit(event) { ... }

// React event handlers
onClick, onChange, onSubmit, onKeyDown

// JSON keys by convention
{ "firstName": "Alice", "lastName": "Smith" }

PascalCase

PascalCaseはすべてのwordの先頭を大文字にします。classes、types、constructors、enums、React componentsでよく使われます。

Reactではcomponent nameは大文字で始める必要があります。小文字のJSX tagはcustom componentではなくHTML elementとして扱われます。

// Classes
class UserProfile { ... }
class ShoppingCart { ... }
class HttpRequestHandler { ... }

// React components
function NavigationBar() { return <nav>...</nav>; }
function UserAvatar({ name }) { return <img alt={name} />; }
<SearchableToolGrid />
<ThemeToggle />

// TypeScript interfaces and types
interface UserSettings { ... }
type ApiResponse<T> = { data: T; error?: string };

snake_case

snake_caseはwordsをunderscoresで区切り、通常はすべて小文字にします。PEP 8ではPython functionsとvariablesの公式styleです。

Ruby、Rust、SQL、database columns、多くのbackend APIs、configuration filesでも一般的です。

# Python
first_name = "Alice"
last_name = "Smith"
is_logged_in = True

def get_user_profile(user_id):
    ...

def calculate_total_price(items):
    ...

# SQL columns
SELECT first_name, last_name, created_at
FROM user_accounts
WHERE is_active = true;

kebab-case

kebab-caseはwordsをhyphensで区切ります。URLs、CSS class names、HTML attributes、file names、route pathsで広く使われます。

多くのprogramming languagesでは、hyphenがminus operatorとして解釈されるため、variablesにkebab-caseは使えません。

/* CSS */
.user-profile-card { ... }
.main-navigation { ... }
.is-loading { ... }

<!-- HTML data attributes -->
<button data-user-id="42" aria-label="Open menu">

// URL slugs
/blog/what-is-text-case
/tools/text-case-converter

CONSTANT_CASE

CONSTANT_CASEはUPPER_SNAKE_CASEとも呼ばれ、大文字とunderscoresを使います。変更すべきでないvalueであることを視覚的に示します。

このconventionは、constantsとenvironment variablesでほぼlanguage横断的に使われます。

// JavaScript
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const HTTP_STATUS_OK = 200;

# Python
MAX_CONNECTIONS = 100
DEFAULT_TIMEOUT = 30
DATABASE_URL = "postgresql://localhost/mydb"

// Environment variables
NODE_ENV=production
DATABASE_URL=postgres://...
NEXT_PUBLIC_API_KEY=abc123

その他のSpecial Cases

一般的なformats以外にも、次のようなspecial case stylesに出会うことがあります。

Language別Naming Conventions

主要なlanguageには、それぞれecosystem conventionがあります。従うことで、他のdevelopersにとって自然なcodeになります。

Case変換の仕組み

Case conversionは通常、inputをwordsに分割し、そのwordsをtarget formatのrulesで結合する、という2stepで行います。

1. spaces、underscores、hyphens、punctuation、uppercase letter boundariesで分割します。
2. 通常はlowercase化してwordsをnormalizeします。
3. camelCase、PascalCase、snake_case、kebab-case、その他のtarget caseとして結合します。

Input: "getUserProfile"

Step 1: split into words
  ["get", "user", "profile"]

Step 2: join with the target format
  snake_case:     get_user_profile
  kebab-case:     get-user-profile
  PascalCase:     GetUserProfile
  CONSTANT_CASE:  GET_USER_PROFILE

JavaScript

// camelCase to snake_case
"getUserProfile"
  .replace(/([A-Z])/g, "_$1")
  .toLowerCase()
  .replace(/^_/, "");
// "get_user_profile"

// snake_case to camelCase
"get_user_profile"
  .replace(/_([a-z])/g, (_, c) => c.toUpperCase());
// "getUserProfile"

// Any simple case to kebab-case
"getUserProfile"
  .replace(/([A-Z])/g, "-$1")
  .toLowerCase()
  .replace(/^-/, "");
// "get-user-profile"

API

// API response from a Python/Ruby backend
{
  "user_id": 42,
  "first_name": "Alice",
  "last_name": "Smith",
  "is_active": true,
  "created_at": "2026-01-15"
}

// Frontend JavaScript object
{
  userId: 42,
  firstName: "Alice",
  lastName: "Smith",
  isActive: true,
  createdAt: "2026-01-15"
}

Best Practices

• Language conventionに従うことで、codeがそのecosystemで自然に見えます。
• Project内で一貫させる。複数のnaming conventionsが混在すると、完全ではない1つのconventionを全体で使うより読みにくくなります。
• Linterやformatterを使うことで、naming rulesを自動的に enforce できます。
• Frameworkに合わせる: React componentsはPascalCase、CSS classesはkebab-case、database columnsはsnake_caseが一般的です。
• Abbreviationsを意図的に扱う。getURLParserとgetUrlParserのどちらを書くかを決め、ruleをdocumentしましょう。
• Team conventionsをdocumentする。style guideやcontributing fileに残します。