コンポーネントの命名を考える

4 min read

パスカルケース(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 />

ただし、システム上のユビキタスな単語については、略称であってもそれに準じる方が可読性は良いと思う。

参考

Next Read

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] BEMの使い方を知る

BEM とは / BEM の基本的な使い方 / おわり

[Vue.js] Vuexの使い方を知る

Flux のアーキテクチャを知る / Vuex とは / Vuex の構成要素とデータの流れ / Vuex 使用所管

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考