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

初めに

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

超基本

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

良いコード例 基本

最低限意識して欲しいポイント7つを紹介します

1. 文字連結は直感的で分かりやすく

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

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

2. ifの乱用は行数を多く取る

// NG
if (status == 'JPN') {
  return <JapaneseHeader />;
} else {
  return <EnglishHeader />;
}

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

3. Importに規則性はあるか

// 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: 変数に値が存在するとき代入したいとき

if (temp) {
  text = temp;
} else {
  text = 'textは存在しません';
}
// Good🥴
const text = temp || 'textは存在しません';
// console.log("出力" || "出力しない");
// console.log(null || "出力");

4.2. AND: 変数に値が存在するか確認して代入したいとき

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内イベント命令系は切り離す

// 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も適度に切り出す

必ずしも全部ってわけではないが，重複は積極的に削ること．

// 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. オブジェクトは使いこなせているか

// 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ライブラリで置き換えれないか

中級編

上級編

最後に

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