私たちは皆、そこにいたことがあります。数か月前に書いた React コンポーネントを開くと、急いでいた人が書いたコードを見ているような気分になります。おそらくあなたもそうだったからです。期限が迫っており、機能を出荷する必要がありました。今日は、その厄介なコンポーネントをリファクタリングする時間です。

それでは、私がどのように取り組んだかを紹介します。

最初の恐怖

最初に気づいたのは、コンポーネントが大きくなりすぎているということでした。状態の処理、API 呼び出しの実行、複雑な UI ロジックの管理、さらにはスタイルの直接適用など、あらゆることを実行しようとしていました。それは 540 行を超える 1 つのファイルで、読み進めると地図のないジャングルをさまよっているような気分になりました。

最初のステップは、このコードはもはや保守不可能であるという現実を受け入れることでした。それを書いた私が何が起こっているのかをほとんど理解できなかったとしても、他の人には勝ち目はありません。そこで、分解してみることにしました。

ブレイク・イット・ダウン

私はコンポーネントのさまざまな責任を特定することから始めました。明確な領域が 3 つありました:

1. 状態管理: コンポーネントの状態の処理は UI ロジックと絡み合っていました。

2. API 呼び出し: データの取得と読み込み状態の処理。

3. レンダリング UI: やや複雑な UI 構造でデータを表示します。
   これらの責任はそれぞれ分離する必要がありました。

状態および API ロジックのフックの抽出

最初に行ったのは、状態管理と API ロジックをカスタム フックに抽出することでした。これにより、コンポーネントがクリーンアップされただけでなく、他の場所でロジックをテストして再利用することも容易になりました。

ここでいくつかのコードについて言及します (元のコードではありません):

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

useDataFetching を使用して、API 呼び出しロジックを取り出し、読み込み状態とエラー状態を処理しました。これで、コンポーネントはこのフックを呼び出して必要なデータを取得するだけで済みます。これはクリーンかつシンプルです。

UI ロジックの簡素化
次に、レンダリング ロジックを確認しました。以前は、読み込み、エラー、データをすべて render 関数内でチェックしていたため、追跡するのが非常に困難でした。このロジックを次のような小さな自己完結型関数に分割しました (もちろん、元の関数ではありません ;)

function renderLoading() {
  return 
Loading...
;
}

function renderError(error) {
  return 
Error: {error.message}
;
}

function renderData(data) {
  return 
{/* Complex UI logic here */}
;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

最終講演

コンポーネントを分解した結果、ファイルは 540 行を超えていたものがわずか約 124 行になり、ロジックがはるかに理解しやすくなりました。コンポーネントは 1 つのこと、つまり UI をレンダリングすることを実行します。他のすべてはカスタム フックとユーティリティ関数にオフロードされています。

この経験は、私にとっていくつかの重要な教訓を強化しました:

• リファクタリングを恐れないでください: 特に機能する場合は、乱雑なコードをそのままにしがちです。しかし、時間をかけて片づけることで、あなたの生活、そして未来の自分の生活がずっと楽になります。

• 懸念事項の分離: 異なる懸念事項をさまざまな場所 (状態、API、UI) に保持することで、コードがよりモジュール化され、再利用可能で、テスト可能になりました。

• Keep It Simple: ロジックをより小さな関数にオフロードすることでレンダリング関数を簡素化し、コンポーネントをより読みやすくしました。

したがって、あなたと同じように乱雑なコンポーネントが放置されている場合は、ためらわずにリファクタリングしてください。それはコードをきれいにするだけではなく、開発者としての作業を楽にすることです。それを望まない人がいるでしょうか?