Zenn
🌽

React コードクリーナー for ビギナー

2021/02/02に公開
JavaScript
React
TypeScript
tech

Reactのコードをキレイに

この記事でのコードをキレイにとはコードをより少なく書くことと定義します。
あくまでも主観のため、参考程度に見てください！

不要なreturn


よくある例...

import React from 'react';

const Hello = () => {
    return <h1>Hello</h1>
};

これをキレイに書くと...

import React from 'react';

const Hello = () => <h1>Hello</h1>;

stateなどのロジックを必要としないコンポーネントはreturnを省略できるので、このように書いたほうがスタイリッシュだ。


分割代入を使おう


よくある例...

import React from 'react';

const Hello = props => (
    <div>
      <h1>{props.hoge}</h1>
      <p>{props.foo}</p>
    </div>
  );

import React from 'react';

const Hello = ({ items }) => (
  <div>
    {items.map(item => (
      <div key={item.id}>
        <h4>{item.name}</h4>
        <small>{item.timestamp}</small>
      </div>
    ))}
  </div>
);

これをキレイに書くと...

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <div>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </div>
  );

import React from 'react';

const Hello = ({ items }) => (
  <div>
    {items.map(({ id, name, timestamp }) => (
      <div key={id}>
        <h4>{name}</h4>
        <small>{timestamp}</small>
      </div>
    ))}
  </div>
);

１つ目はpropsに対して分割代入を、２つ目はmapするときの例.
可読性が増したような気がする.


不要なdivは取り除こう


よくある例...

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <div>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </div>
  );

これをキレイに書くと

import React from 'react';

const Hello = ({ hoge, foo }) => (
    <>
      <h1>{hoge}</h1>
      <p>{foo}</p>
    </>
  );

これはユースケースによるが、divで囲う必要がないときは無駄なdivはなるべく取り除きたい.
<>...</> は<React.Fragment>...</React.Fragment> を略して書いたもの.

短絡評価


よくある例...

import React from 'react';

const Hello = ({ user }) => <h1>{user && user.name}</h1>;

これをキレイに書くと...

import React from 'react';

const Hello = ({ user }) => <h1>{user?.name}</h1>;

この手法はよく使うのでマストで覚えたほうがいい.

また、次の例も紹介する.

import React from 'react';

const Hello = ({ user }) => <h1>{user.name ? user.name : 'anonymous'}</h1>;



補足すると ? は if else文と同じ意味で、user.name が true(何かしら値があれば)だったらuser.name が返される. user.name がfalseだったら 'anonymous' が返されるという仕組み.

このコードは次のように書くこともできる.

import React from 'react';

const Hello = ({ user }) => <h1>{user.name || 'anonymous'}</h1>;


import React from 'react';

const Hello = ({ user }) => <h1>{user.name ?? 'anonymous'}</h1>;

少し難しい話にはなるが１つ目の || を用いた例は user.name が false だったら 'anonymous' が返される. すなわち user.name ? user.name : 'anonymous' と同じ.

２つ目の ?? を用いた例は user.name が null だったら 'anonymous' が返される.
javascriptでは空文字や数字の0はfalse評価されてしまうが、空文字や数字の0をそのまま返したいときなどに使うことがある.

この２つはユースケースによるので、今すぐに覚える必要はない.

このブラケットってつけたほうがいいの?


次のように引数が一つの場合ブラケットを省略できる.

import React from 'react';

const Hello = props => {
  const handleClick = e => {
    e.preventDefault();
    console.log('Hello');
  };
  return (
    <form>
      <button type="submit" onClick={handleClick}>
        {props.button}
      </button>
    </form>
  );
};

これに関してはESlintによればブラケットはあったほうが良いという記述があるが賛否が分かれる.

ただTypeScriptで書く場合は型をつけるときには必要となる.

import React from 'react';

type Props = {
  ...
}

const Hello = ( {...} : Props) => {
  const handleClick = (e : React.SyntheticEvent) => {
    e.preventDefault();
    console.log('Hello');
  };
  return (
    <form>
      <button type="submit" onClick={handleClick}>
        {props.button}
      </button>
    </form>
  );
};

これは個人の好みで良いと思う.
筆者はjsで書いてるときはつけてなかったが...


最後に

VSCodeでReactを書く人は絶対に入れておくべきプラグインを紹介する.

このプラグインを入れれば便利なスニペットが使える.

例. rafceと入力すれば

Hello.js
import React from 'react'

const Hello = () => {
  return (
    <div>
      
    </div>
  )
}

export default Hello

一発でこのコードが作れるので手間が省ける!

必ず入れておきましょう！

Discussion