React プロジェクトにおける関数名やファイル名の大文字・小文字の使用について、適切な命名規則を理解することはコードの可読性と保守性を高めるために非常に重要です。
以下に、一般的な命名規則とその理由を詳しく説明します。
コンポーネントの命名規則
関数コンポーネントの名前
React のコンポーネント（特に関数コンポーネント）は PascalCase（パスカルケース） を使用して命名します。これは各単語の最初の文字を大文字にし、単語を連結する方法です。
例:
// 正しい命名例
const Header = () => {
return <header>Header</header>;
};
const UserProfile = () => {
return <div>User Profile</div>;
};
// 誤った命名例
const header = () => {
return <header>Header</header>;
};
const userProfile = () => {
return <div>User Profile</div>;
};ファイル名
コンポーネントのファイル名も PascalCase を使用します。ファイル名とコンポーネント名を一致させることで、プロジェクト内での検索や識別が容易になります。
例:
src/
├── components/
│ ├── Header/
│ │ ├── Header.js
│ │ └── Header.css
│ ├── UserProfile/
│ │ ├── UserProfile.js
│ │ └── UserProfile.css
│ └── ...ヘルパー関数やユーティリティ関数の命名規則
関数名
ヘルパー関数やユーティリティ関数は camelCase（キャメルケース） を使用します。camelCase は最初の単語の先頭を小文字にし、以降の単語の先頭を大文字にする方法です。
例:
// 正しい命名例
export const calculateTotal = (items) => {
return items.reduce((sum, item) => sum + item.price, 0);
};
export const formatDate = (date) => {
return new Date(date).toLocaleDateString();
};
// 誤った命名例
export const CalculateTotal = (items) => {
return items.reduce((sum, item) => sum + item.price, 0);
};
export const FormatDate = (date) => {
return new Date(date).toLocaleDateString();
};ファイル名
ユーティリティ関数を格納するファイル名も camelCase または lowercase で命名することが一般的です。特に複数の関数をエクスポートする場合は、helpers.js や utils.js といった名前がよく使われます。
例:
src/
├── utils/
│ ├── helperFunctions.js
│ └── formatUtils.jsもしくは
src/
├── utils/
│ ├── calculateTotal.js
│ └── formatDate.jsその他のファイルやフォルダの命名規則
フォルダ名
フォルダ名は camelCase や kebab-case（ハイフン区切り） を使用することが一般的です。プロジェクト全体で一貫性を保つことが重要です。
例:
src/
├── components/
├── hooks/
├── utils/
├── services/
├── contexts/
└── styles/その他のファイル
設定ファイルやコンフィギュレーションファイル（例: package.json, webpack.config.js）は、一般的に全て小文字や特定の形式で命名されます。
具体的な例
以下に、コンポーネントとヘルパー関数を含む具体的なプロジェクト構成とその命名例を示します。
フォルダ構成
my-react-app/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ │ ├── images/
│ │ └── styles/
│ ├── components/
│ │ ├── Header/
│ │ │ ├── Header.js
│ │ │ └── Header.css
│ │ ├── Footer/
│ │ │ ├── Footer.js
│ │ │ └── Footer.css
│ │ └── ...
│ ├── pages/
│ │ ├── Home/
│ │ │ ├── Home.js
│ │ │ └── Home.css
│ │ ├── About/
│ │ │ ├── About.js
│ │ │ └── About.css
│ │ └── ...
│ ├── hooks/
│ │ └── useCustomHook.js
│ ├── utils/
│ │ └── helper.js
│ ├── App.js
│ ├── index.js
│ └── ...
├── package.json
└── ...
helper.js の内容と使用方法
ファイルパス: src/utils/helper.js
内容:
// src/utils/helper.js
// 名前付きエクスポート
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// デフォルトエクスポート
const helper = {
add,
subtract,
};
export default helper;使用例: コンポーネント内でのインポート
// src/components/Calculator/Calculator.js
import React from 'react';
// 名前付きエクスポートをインポート
import { add, subtract } from '../../utils/helper';
// または、デフォルトエクスポートをインポート
// import helper from '../../utils/helper';
const Calculator = () => {
const sum = add(5, 3);
const difference = subtract(5, 3);
// デフォルトエクスポートを使用する場合
// const sum = helper.add(5, 3);
// const difference = helper.subtract(5, 3);
return (
<div>
<p>Sum: {sum}</p>
<p>Difference: {difference}</p>
</div>
);
};
export default Calculator;
ファイル名: Calculator.js（PascalCase）
一貫性の重要性
プロジェクト内で命名規則を一貫して適用することが、チーム開発や長期的なメンテナンスにおいて非常に重要です。以下のポイントを意識しましょう。
- コンポーネント名とファイル名は PascalCase を使用。
- ヘルパー関数やユーティリティ関数は camelCase を使用。
- フォルダ名は一貫したスタイル（camelCase や kebab-case）を使用。
- プロジェクト全体で命名規則を統一するために、プロジェクトの初期段階で命名規則を決めておくと良いでしょう。
まとめ
- コンポーネント名とファイル名は PascalCase を使用し、一貫性を保ちます。
- ヘルパー関数やユーティリティ関数は camelCase を使用します。
- フォルダ名はプロジェクト全体で一貫したスタイル（camelCase や kebab-case）を選択します。
- 一貫性を保つことで、コードの可読性と保守性が向上します。
命名規則を守ることで、チームメンバー間での理解が深まり、バグの発生を防ぐことができます。プロジェクトの開始時に命名規則を明確にし、ドキュメントとして共有することをお勧めします。
もし他にも疑問点や詳細な例が必要であれば、遠慮なくお知らせください！
