JavaScriptの命名規則：変数、関数、クラスなど
6 分で読了
JavaScriptの命名規則は言語自体では強制されませんが、エコシステム全体で広く従われています。このガイドではJavaScript/TypeScript開発者が知っておくべきことをすべてカバーします。
変数と関数：camelCase
変数、関数、メソッド名はcamelCaseを使用します。最初の単語は小文字、以降の単語は大文字で始まります：
const userName = "Alice";
let totalPrice = 0;
function getUserById(id) { /* ... */ }
const calculateShipping = (weight) => weight * 2.5;クラスとコンポーネント：PascalCase
クラス、Reactコンポーネント、コンストラクタ関数はPascalCaseを使用します：
class UserAccount { /* ... */ }
class HttpClient { /* ... */ }
// Reactコンポーネント
function UserProfile({ name }) { /* ... */ }
const ShoppingCart = () => { /* ... */ };定数：SCREAMING_SNAKE_CASE
真の定数（値が変わることがなく、コンパイル時に既知のもの）は大文字とアンダースコアを使用します：
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;注意：すべてのconst変数がこの意味での「定数」ではありません。const user = getUser()は通常の変数なのでcamelCaseを使います。
ブール変数
ブール値にはis、has、can、shouldをプレフィックスとして付けます：
const isLoading = true;
const hasPermission = false;
const canEdit = user.role === "admin";
const shouldRedirect = !isAuthenticated;プライベートフィールド
モダンJavaScriptでは#プレフィックスで真にプライベートなクラスフィールドを定義します。古いアンダースコア規則（_name）もライブラリではまだ一般的です：
class User {
#password;
constructor(name, password) {
this.name = name;
this.#password = password;
}
}ファイル名
| タイプ | 規則 | 例 |
|---|---|---|
| Reactコンポーネント | PascalCase | UserProfile.tsx |
| ユーティリティモジュール | camelCase | dateUtils.ts |
| 設定ファイル | kebab-case | eslint-config.js |
| テストファイル | ソースに合わせる | UserProfile.test.tsx |
| CSSモジュール | PascalCaseまたはkebab | UserProfile.module.css |
TypeScript固有の規則
- インターフェース：PascalCase、
Iプレフィックスなし。UserPropsでありIUserPropsではない。 - 型エイリアス：PascalCase。
type ApiResponse = { ... } - 列挙型：列挙型名もメンバーもPascalCase。
enum Color { Red, Green, Blue } - ジェネリクス：大文字1文字。
T、K、V
Reactのイベントハンドラ
イベントハンドラ関数にはhandleプレフィックス、propsにはonプレフィックスを使います：
// Props: onSubmit, onClick, onChange
// ハンドラ: handleSubmit, handleClick, handleChange
<Button onClick={handleSubmit} />JavaScript規則に変換
snake_caseを返すPython APIを扱っていますか？camelCaseコンバーターでキーを変換できます。Reactコンポーネントの命名にはPascalCaseコンバーターをお試しください。すべての形式をケース変換ハブで比較できます。