✍️

Reactでの命名を考える

1 min read

コンポーネント名

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

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

https://github.com/airbnb/javascript/tree/master/react#naming
https://qiita.com/misuken/items/19f9f603ab165e228fe1
https://medium.com/@wittydeveloper/react-components-naming-convention-️-b50303551505

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}

https://github.com/mui-org/material-ui/issues/21964
https://qiita.com/KeithYokoma/items/2193cf79ba76563e3db6

Discussion

ログインするとコメントできます