コンポーネントの命名を考えるための規則
パスカルケース(PascalCase)にする
コンポーネントの命名には、パスカルケース（PascalCase）を使うこと。パスカルケースは、複数の単語を繋げた場合に、各単語の最初の文字を大文字にして綴る書き方。
単語の区切りが視認しやすいく（可読性）、エディタの自動補完にマッチしやすい。
/**
* ファイル
*/
// Bad
import todoList from './TodoList';
// Good
import TodoList from './TodoList';
/**
* コンポーネント
*/
// Bad
<todolist />
// Good
<TodoList />
ファイル名をコンポーネント名と一致させる
コンポーネントのファイル名を、そのコンポーネントの名前と完全に一致させる。
ファイル名をコンポーネント名と一致させる。コンポーネントのディレクトリがある場合は、index.{js,ts}を用意する。
// Bad
import TodoList from "./TodoList/TodoList";
import TodoList from "./TodoList/index";
// Good
import TodoList from "./TodoList";
コンポーネントを呼び出す際に、ファイル名とコンポーネント名が一致しているため、コードの可読性が向上する。
密結合コンポーネントの名前
コンポーネント間の依存関係が強く、密結合なコンポーネントの場合、それを示す名前を付ける。親コンポーネントと密結合した子コンポーネントには、親コンポーネントの名前をプレフィックスとして含む。
// Bad
<TodoList />
<TodoItem />
// Good
<TodoList />
<TodoListItem />
このルールに従うことで、開発者がコードの依存関係をすぐに理解できるようになり、コードの可読性が向上する。
コンポーネント名に接頭辞もしくは接尾辞を付ける
コンポーネントの機能や意味をより明確にするため、接頭辞や接尾辞を使ってコンポーネント名に情報を追加する。例えばButtonコンポーネントの場合、そのボタンが何をするかを示す接尾辞を追加することで、より具体的な名前にする。
Baseを継承してButtonを作っていくため、関連性をもたせるためにBaseButton（ButtonBase）という命名にする。
// Button
/// 接頭辞
<BaseButton />
<PrimaryButton />
<SubmitButton />
/// 接尾辞
<ButtonBase />
<ButtonPrimary />
<ButtonSubmit />
接頭辞の方が語感の良さがあるため、万人受けしやすい。ただ、接尾辞の場合はButton...と打つだけで自動補完が効きやすい利点はある。
なるべく略語は使わない
略語は、開発者間で共通認識が必要となるため、プロジェクト全体での一貫性を保ちにくくなる。また、略語が理解しにくいと、コンポーネントの使用や修正が困難になる場合がある。適切な名前を付けるためには、コンポーネントが何をしているかを正確に表現し、わかりやすい名前を付けることが重要。
また、エディタに自動補完が効くため略するメリットはなく、名称省略によるコード量の削減もコードの minify されてしまえば無意味だと言える。
// Bad
<Ttl />
<Btn />
// Good
<Title />
<Button />
（ただし、システム上のユビキタスな単語については、略称であってもそれに準じる方が可読性は良い場合もある）