Reactを書く時に気をつけたいこと #React

はじめに

Reactを使っての開発経験が約1年となったので私がコーディングする上で気をつけていること、これから気をつけていきたいことをこの記事にまとめたいと思います。

コンポーネントのスタイリングでインラインスタイルは避ける

style属性でコンポーネントのスタイリングを行うと小さなコンポーネントはまだ大丈夫なのですが大きなコンポーネントになってくる程、可読性が下がってくる気がしています。
- cssに切り出す、もしくはstyled-componentを使うとかが良さそうな気がしています(まだ試したこと無い)。
- プロジェクトではmaterial-uiを使っているので、試しにmakeStylesを使ってスタイリングを行ってみましたが感想は「うーん...」でした。
Reactの公式でもstyle属性を用いた方法は推奨されていないようです。

不要なdivタグは避ける

Reactでは複数タグをreturnすることはできないので、致し方なく<div>を使うことが多いと思います。


// pタグbuttonタグの2つは返せないのでdivタグで囲わざるを得ない
const Component = () => {
  return(
    <div> 
      <p>へい</p>
      <button type='button'>ボタン</button>
    </div>
  );
};

こういった時はフラグメントを使います。
- フラグメントを使うことで不要なタグがrenderされません。

// <> はFlagmentの省略記法
const Component = () => {
  return(
    <> 
      <p>へい</p>
      <button type='button'>ボタン</button>
    </>
  );
};

export default を使わない

少し前までは積極的にexport defaultを使用していたのですがどうやらあまりよろしくないらしいのでこれからはexportを使っていきたいと思います。
- export defaultとexportが混在しているとimport文で{}が必要だったり要らなかったりといった細かな違いもあるのでexportで統一していきたい所存。


// OK
export const Component = () => {
  return(
    .
    .
    .
  );
};

// NG
export default Component;

.tsx(.jsx) と .ts(.js)を使い分ける

Reactを使用しているファイルには.tsxを、使用していないファイルには.tsを付けるようにしています。
- こうすることでコンポーネントに関するファイルかどうかを拡張子で見分けがつきやすいです。
拡張子の機能の違いはstack overflowに詳しく書いてありました。

コンポーネントのプロパティに直接ごちゃごちゃ書かない

例えば、以下のようなコンポーネントがあったとします。


interface SubmitButtonProps {
  label: string;
  onSubmit: () => void;
};
 const SubmitButton: React.FC<SubmitButtonProps> = (props: SubmitButtonProps) => {
  return (
    <button type='submit' name='submit-button'>{props.label}</button>
  );
};

const SimpleForm: React.FC<SimpleFormProps> = (props: SimpleFormProps) => {
  return ( 
    <div className='simple-form'>
      <input type='text' name='login-id-field'/>
      <input type='password' name='password-field'/>
      <SubmitButton 
        label={送信} 
        onSubmit={() => {
        .
        . // 複数行
        .
        }}
      />
    </div>
  );
};

onSubmitプロパティに直接書くのではなくhandlerメソッドを定義してそれを呼ぶようにする
- こうするとプロパティ内がごちゃごちゃせずスッキリする。


const SimpleForm: React.FC<SimpleFormProps> = (props: SimpleFormProps) => {
  return ( 
    <div className='simple-form'>
      <input type='text' name='login-id-field'/>
      <input type='password' name='password-field'/>
      <SubmitButton 
        label={送信} 
        onSubmit={handleSubmit}
      />
    </div>
  );
};

const handleSubmit = () => {
 // ここにonSubmitで行いたいことを書く
};

import文の順序

import文が下のようにまとまりがなくごちゃごちゃしていると「ぬぉおおおお…」となるタイプです。

import React from 'react';
import { hogeGetAction } from '../action/HogeAction';
import { ChildComponentA } from '../ChildComponentA';
import { Button } from 'material-ui/@core'
import { connect } from 'react-redux';
import { ChildComponentB } from '../ChildComponentB';
import { fooGetAction } from '../action/FooAction';

const SampleComponent = () => {...};

私はサードパーティライブラリ → UIフレームワーク → 自作コンポーネント → その他の順で書くようにしています。

import React from 'react'
import { connect } from 'react-redux';
import { Button } from 'material-ui/@core';
import { ChildComponentA } from '../ChildComponentA';
import { ChildComponentB } from '../ChildComponentB';
import { hogeGetAction } from '../action/HogeAction';
import { fooGetAction } from '../action/FooAction';

const SampleComponent = () => {...};

スッキリ。自己満。

その他

React Hooks APIをふんだんに使って何か作りたい。