Reactコンポーネントのアンチパターンを徹底解説！初心者でも避けるべき使ってはいけない書き方

1. コンポーネントのアンチパターンとは？

1. コンポーネントのアンチパターンとは？

アンチパターンとは「やってはいけない使い方」や「避けるべき書き方」のことです。Reactは自由度が高いフレームワークですが、間違った書き方をするとアプリが遅くなったり、バグが増えたりしてしまいます。例えば「コンポーネントの中で直接データを変更する」「何でもかんでも一つのコンポーネントに詰め込む」といった例が典型的なアンチパターンです。

これから初心者が特に注意すべきアンチパターンをいくつか紹介していきます。

2. 状態（state）を直接書き換える

2. 状態（state）を直接書き換える

Reactでは useState というフックを使って状態（state）を管理します。しかし、初心者がよくやってしまうのが state を直接変更してしまうことです。これはReactの仕組みに反しているため、画面が更新されなくなるなど問題を引き起こします。

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // アンチパターン：stateを直接書き換え
  const badIncrement = () => {
    count = count + 1; // ❌ NG
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={badIncrement}>カウントアップ</button>
    </div>
  );
}

export default Counter;

正しい方法は setCount を使って更新することです。これによりReactが変更を検知し、画面を正しく再描画してくれます。

3. 何でもかんでも一つの巨大コンポーネントにする

3. 何でもかんでも一つの巨大コンポーネントにする

Reactの強みは「コンポーネントを小さく分けて再利用できる」点です。しかし初心者は「全部をひとつのコンポーネントに書いてしまう」ことがあります。これでは読みづらく、修正もしにくくなり、バグも増えやすくなります。

例えばナビゲーション、商品リスト、フッターなどをすべてひとつのファイルに書いてしまうのは典型的なアンチパターンです。正しくは小さく分割し、それぞれの役割を持ったコンポーネントを組み合わせるように設計します。

4. Propsを直接書き換える

4. Propsを直接書き換える

Reactでは親コンポーネントから子コンポーネントへ渡す値を「Props（プロップス）」と呼びます。Propsは読み取り専用なので、子コンポーネントで書き換えるのはアンチパターンです。

初心者は「値を変えたいから直接上書きしてしまおう」と思いがちですが、これは間違いです。正しい方法は、必要に応じて親から変更関数を渡すことです。

5. 無駄な再レンダリングを引き起こす書き方

5. 無駄な再レンダリングを引き起こす書き方

Reactはコンポーネントが再描画されるたびに関数が実行されます。そのため、毎回新しい関数やオブジェクトを生成する書き方をすると無駄な再レンダリングが発生し、アプリが重くなる原因になります。

これを防ぐには useCallback や useMemo を活用して不要な再レンダリングを抑えることが大切です。

6. コンポーネントの責務を意識しない

6. コンポーネントの責務を意識しない

「責務」という言葉は難しく感じるかもしれませんが、要するに「そのコンポーネントが何をする役割を持っているか」ということです。ボタンの見た目を決めるだけのコンポーネントなのに、同時にデータを取得したり状態を持たせたりすると混乱の元になります。これはアンチパターンです。

見た目を担当するコンポーネントと、データや状態を管理するコンポーネントを分けることで、シンプルでわかりやすいコードになります。

7. レンダリングの中で副作用を起こす

7. レンダリングの中で副作用を起こす

副作用とは、画面を描画する以外の処理（例えばAPI通信やデータ保存など）のことです。Reactでは副作用は useEffect で書くのが基本ルールです。レンダリングの中で直接APIを呼んだり、データを保存したりすると予期せぬ挙動を招きます。

8. アンチパターンを避けるための心構え

8. アンチパターンを避けるための心構え

Reactは便利な反面、自由に書けるからこそ初心者が間違った書き方をしてしまいやすいフレームワークです。アンチパターンを避けるためには「小さく分ける」「PropsやStateを正しく扱う」「副作用はuseEffectにまとめる」といった基本を守ることが大切です。

検索エンジンに評価されるサイトを作るためにも、ReactでSEOに配慮した正しいコンポーネント設計を心がけましょう。