【コード品質】綺麗なReactコード 基本7例 

# 初めに
- Reactは，HTMLやJSを混同して記述できるJSXが使われているだけあって多様な書き方で実装できてしまう
- 多様な書き方のコードが複雑に絡み合えば，説明，保守は難しくなる
- 最低限統一するルールは持つべきである

##### 超基本
✅ Prettierやformatterの設定は，開発者間で共有されていること
✅ Warning, 例外処理
✅ 無駄なconsoleはない
✅ 最低限度のコーディング規約は把握していること

# 良いコード例 基本
最低限意識して欲しいポイント7つを紹介します
## 1. 文字連結は直感的で分かりやすく

```jsx
// NG
const apiUrl = origin + '/api/v2/user/' + userId;

// Good🥴
const apiUrl = `${origin}/api/v2/user/${userId}`;
```

## 2. ifの乱用は行数を多く取る
```jsx
// NG
if (status == 'JPN') {
  return <JapaneseHeader />;
} else {
  return <EnglishHeader />;
}

// Good🥴
return status == 'JPN' ? <JapaneseHeader /> : <EnglishHeader />;
```

## 3. Importに規則性はあるか

```jsx
// NG
import React from 'react';
import { useState } from 'react';
import './style/logo.scss';
import logo from './image/logo.png';
import Button from '@material-ui/core/Button';
import useContext from 'react';

// Good🥴
/* 1段: React, Reactフレームワーク系 */
import React, { useContext, useState } from 'react';

/* 2段: UIフレームワーク系, その他外部ライブラリ */
import Button from '@material-ui/core/Button';

/* 3段: オリジナル，内部ライブラリ */
import './style/logo.scss';
import logo from './image/logo.png';
```

## 4. AND/OR文はReactと相性良い，ただ使いすぎに注意
短い命令はコンポーネント記述内に綺麗に収まる
#### 4.1. OR: 変数に値が存在するとき代入したいとき

```jsx
if (temp) {
  text = temp;
} else {
  text = 'textは存在しません';
}
// Good🥴
const text = temp || 'textは存在しません';
// console.log("出力" || "出力しない");
// console.log(null || "出力");
```
#### 4.2. AND: 変数に値が存在するか確認して代入したいとき
```jsx
if (response) {
  text = response.text;
}
// Good🥴
const text = response && response.text;
// console.log("出力しない" && "出力");
// console.log(null && "出力しない");　<- 出力 null
// console.log("出力しない" && null);　<- 出力 null

// 🤔　3項以降は直感的でなくなる
const text = response && reponse.text || 'textは存在しません';
```


## 5. render内イベント命令系は切り離す
```jsx
// NG
return (
  <Button
    onClick={(event) => {
      console.log(event.target);
    }}
  >
    Push
  </Button>
);

// Good🥴
const displayConsole = (e) => {
  console.log("target:", e.target);
};

return <Button onClick={displayConsole}>Push</Button>;
```

## 6. Styleも適度に切り出す
必ずしも全部ってわけではないが，重複は積極的に削ること．

```jsx
// NG
return (
  <>
    <Box
      style={{
        height: '100%',
        color: warning,
        background: 'black',
      }}
    >
      {text1}
    </Box>
    <Box
      style={{
        height: '100%',
        color: warning,
        background: 'black',
      }}
    >
      {text2}
    </Box>
  </>
);

// Good🥴
const boxStyle = {
  height: '100%',
  color: warning,
  background: 'black',
};

return (
  <>
    <Box style={boxStyle} onClick={displayConsole}>
      {text1}
    </Box>
    <Box style={boxStyle} onClick={displayConsole}>
      {text2}
    </Box>
  </>
);
```
## 7. オブジェクトは使いこなせているか
```jsx
// NG
switch (user.type) {
  case user:
    return <User />;
  case admin:
    return <AdminUser />;
  case host:
    return <HostUser />;
}

// Good🥴
const userView = {
  user: <User />,
  admin: <AdminUser />,
  host: <HostUser />,
};

return userView[user.type];
```

### 8. UIライブラリは使いこなせているか
✅ HTML記述に頼りすぎていないか
✅ 書かれているコードは，利用しているUIライブラリで置き換えれないか


### 中級編

https://qiita.com/JNJDUNK/items/2dbb511e38ddbba038b4

### 上級編
https://qiita.com/JNJDUNK/items/4ac302482be451153bd9

# 最後に
コードの綺麗さは，追求すると迷走してしまう．そして，これらは**強制するものでなく，チーム内で気づき，経験を基に育んで行くもの**だと考えている．細かいところまで強要することは，エンジニアの積極性を低下させ，成長の妨げにつながる．指摘する際には，主観的でなく，プロダクトからみて，なぜそうするべきなのかを述べるべきである．最後に，他にコード品質で気をつけていることなど，教えていただけたら非常にありがたいです．