✍️

Reactでの命名を考える

2021/05/08に公開

コンポーネント名

拡張子には.jsx .tsxを使用する。
パスカルケースを使用する。
ドメインと機能を表したものにする。
ファイル名とコンポーネント名を一致させる

// good
<UserProfileEdit />
// good
<UserProfileEditForm />

// bad
<PostCard />
// good
<BlogPostCard />

Hooks名

jsxを使用する拡張子には、.jsx .tsxそれ以外には、.js .tsを使用する
use... という命名にする
ドメインと機能を表したものにする

// bad
const useLogin = () => { ...

// good
const useUserLoginEffect = () => { ...
const useAdminLoginCallback = () => { ...

props、引数、変数名

状態や性質を表すものには、形容詞を使用する。(動詞の現在分詞、過去分詞を含む)
場所、もの、など具体的で時間の経過に関係ない概念には、名詞を使用する。
prefix, suffixと、↑を組み合わせてより具体的な状況を表す
より詳細な動作を表す単語を選ぶ

// bad
<Component shape="circle"
// good
<Component shape="circular"

// bad
<Component placement="above"
// good
<Component placement="top"

// bad
<Component click={handleClick}
// good
<Component onClick={handleClick}

// bad
<Component onClick={handleGetUserData}
// good
<Component onClick={handlefetchUserData}
<Component onClick={handlePopUserData}

Discussion