パスカルケース(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";
単一インスタンスのコンポーネント名には接頭辞にTheを付ける
単一インスタンスのコンポーネントとは、アプリケーションに対して固有（ページごとに 1 回しか使用されることはない）なコンポーネントを指す。1 つしか存在しえないことを示すためにTheという接頭辞を付ける。
// Bad
<Header />
/// そもそも単一インスタンスコンポーネントではない
<TheHeader simple={true} />
// Good
<TheHeader />
ちなみにこのコンポーネントは固有であるため、プロパティを受け入れることはない。もしプロパティが必要になった場合、それは単一インスタンスコンポーネントではなく、現時点ではページごとに 1 回しか使われていないだけで、単なる再利用可能なコンポーネントだということになる。
密結合コンポーネントの名前
親コンポーネントと密結合した子コンポーネントには、親コンポーネントの名前をプレフィックスとして含むべきです。
// Bad
<TodoList />
<TodoItem />
// Good
<TodoList />
<TodoListItem />
コンポーネント名に接頭辞もしくは接尾辞を付ける
例えばButtonの場合、Baseを継承してButtonを作っていくため、関連性をもたせるためにBaseButton（ButtonBase）という命名にする。
// Button
/// 接頭辞
<BaseButton />
<PrimaryButton />
/// 接尾辞
<ButtonBase />
<ButtonPrimary />
接頭辞の方が語感の良さがあるため、万人受けしやすい。ただ、接尾辞の場合はButton...と打つだけで自動補完が効きやすい利点はある。
なるべく略語は使わない
エディタに自動補完が効くため略するメリットはないし、名称省略によるコード量の削減もコードの minify されてしまえば無意味。
// Bad
<Ttl />
<Btn />
// Good
<Title />
<Button />
ただし、システム上のユビキタスな単語については、略称であってもそれに準じる方が可読性は良いと思う。
参考
