Reactコンポーネントと上手に付き合うコツ

  • TypeScriptとFunctionComponentを使用する
  • ファイル名ディレクトリ構成は明確にする
  • コンポーネントは独立させる
  • Importを絶対パスにする

TypeScriptとFunctionComponentを使用する

まずはじめに、Reactを使用する上でTypeScriptも使用することを推奨します。
その理由としてはReactとTypeScriptの相性がよく、コンポーネント設計の際にinterfaceを使った方がpropsの型が明確になるため、より見通しのよいコードを書くことができます。
tsxとtsxの比較を見てみましょう
jsx

 const Element = (props) => {
    return (<>{props.name}</>);
 }

tsx

 interface ElementProps {
    name: string;
 }
 const Element: React.FC<ElementProps> = (props: ElementProps): JSX.Element => {
    return (<>{props.name}</>);
 }

型が明示的にわかるためチームでの開発では大変役立ちます。
また、Class Componentを使わずにFunction Componentを使用することを推奨します。
ソースの記述量が減り、なおかつ関数による記述でソース全体の見通しがよくなります。

ファイル名ディレクトリ構成は明確にする

ピュアなReactプロジェクトであれば、create-react-app実行時にsrcフォルダが生成され、その中にファイルを入れていくことになると思います。その中でディレクトリを切ってファイルを作っていくことになりますが、当然ながら設計の段階でディレクトリ構成と命名規則をあらかじめ決めておきましょう。ファイル数が増えた時に管理が大変になります。

ディレクトリの名前にも単数系を使用するのか複数形を使用するのか決めましょう。
またコンポーネント格納フォルダ内ではディレクトリを切るのか切らないのかもあらかじめ決めましょう。
ファイル名も明確にすることが重要でプレフィックスは付けるのか付けないのかも考えましょう。

コンポーネントは独立させる

前提として設計する上でコンポーネントとモジュールの違いを理解しましょう。
両者は「部品」という意味合いになります。この二つの大きな違いは「交換可能か不可能」です。

コンポーネント

構成要素の一つであり、完結した要素であること。

モジュール

全体が交換ができる部品の集合体となる。

つまり、コンポーネントは独立した部品であるべきです。
コンポーネントを設計する時に、単体として扱える部品として考える。
また、interfaceを見ることで実装した人間以外の人間でも容易に扱えるようにしましょう。加えて、コンポーネントは呼び出し元に依存しないよう配慮すること。

Importを絶対パスにする

Reactのプロジェクトにおいてファイルの先頭ではimportを指定してファイルを呼び出します。ファイル数が増え、importの数が増えると相対パスだとソースコードの見通しが悪くなります。そこでimportを絶対パスにしてしまうという手法があります。

// 相対パス
import React from 'react';
import styles from '../App.module.css';
import Button from '../../components/Button/Button';

// 絶対パス
import React from 'react';
import styles from 'src/App.module.css';
import Button from 'src/components/Button';

Absolute paths – webpack

しかし、導入するしないはプロジェクト内できちんと話し合って決めましょう。また使用しているフレームワークにも左右される部分なので決める時は慎重に行いましょう。

関連記事