Reactプロジェクトのベストプラクティス☺️

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「Reactプロジェクトのベストプラクティス」についてお伝えしていきます。

Reactプロジェクトのベストプラクティス

JSX ShortHand を使用する

ブール変数をpropsで渡す場合は、JSX短縮表現を使用するようにしています。

悪い

return (
  <Navbar showTitle={true} />
);

良い

return(
  <Navbar showTitle />  
)

三項演算子の使用

条件分岐に基づいてユーザーの詳え細を表示します。

悪い

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}

良い

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

オブジェクトリテラルを活用する

オブジェクトリテラルは、コードを読みやすくするのに役立ちます。

このコードは、与えられた`user`オブジェクトから`role`プロパティを抽出し、その値に基づいて適切なコンポーネントを選択しています。

悪い

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

良い

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;

フラグメントを使用する

Fragmentを使うように意識をしています。

これにより、コードがクリーンに保たれて仮想DOMの生成が1つ少なくなり、パフォーマンスにも有効です。

悪い

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

良い

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

オブジェクトの分割を使用する

ユーザーの詳細を表示する場合、オブジェクトの分割を活用してください。

悪い

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

良い

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

JSX から JS コードを削除する

レンダリングや UI 機能の目的をまったく果たさない JS コードを JSX から移動します。

JSXからJSコードを削除すると、JSX内のコードが簡潔になり、JSコードの意味が明確になります。

悪い

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- THIS IS BAD
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

良い

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}> {post.title} </li>
    ))}
  </ul>
);