先生と生徒の会話形式で理解しよう

生徒

「Reactで作ったコンポーネントが長くなってごちゃごちゃしてきました。どうしたらいいですか？」

先生

「それはリファクタリングをするタイミングですね。リファクタリングとはコードを整理して読みやすく直すことです。」

生徒

「リファクタリングって難しそうですが、初心者でもできますか？」

先生

「もちろんできます。小さなポイントを意識するだけで、Reactのコンポーネントはグッときれいになりますよ。」

1. リファクタリングとは？

リファクタリングとは「動きを変えずにコードを整理すること」です。家の掃除と同じように、散らかった部屋を片付けるイメージです。コードの動作は同じでも、整理されていれば後から見てもわかりやすく、修正もしやすくなります。Reactのコンポーネントでは特にリファクタリングが重要で、再利用性や保守性が高まり、エラーも減らせます。

2. 大きすぎるコンポーネントを分割する

初心者がよくやってしまうのが「ひとつのコンポーネントに全部の処理を書く」ことです。例えばナビゲーション、本文、フッターをすべてまとめて書くと読みづらくなります。これをリファクタリングでは「小さな部品に分ける」ことで解決します。


import React from "react";

function App() {
  return (
    <div>
      <header>ヘッダー</header>
      <main>メインコンテンツ</main>
      <footer>フッター</footer>
    </div>
  );
}

export default App;

このコードをリファクタリングすると、ヘッダー、メイン、フッターをそれぞれ別コンポーネントに分けられます。そうすることで読みやすさが格段に上がります。

3. 重複コードを関数やコンポーネントにまとめる

同じようなコードを何度も書くのはアンチパターンです。例えばボタンのデザインを何度もコピーして書いていると、修正が必要なときに全部を直さなければなりません。リファクタリングでは共通部分をひとつにまとめ、使い回せるようにします。


import React from "react";

function Button({ label }) {
  return <button className="btn">{label}</button>;
}

export default Button;

こうして共通化すれば、どのページでも同じデザインのボタンを使えます。変更が必要なときも一箇所を直すだけで済みます。

4. PropsとStateの役割を整理する

Reactでは「Props（外から渡す値）」と「State（コンポーネント内部で持つ値）」があります。リファクタリングでは、どちらを使うべきかを整理することが大切です。例えば子コンポーネントで直接データを持ってしまうと複雑になるので、親からPropsで渡すようにするとシンプルになります。

5. 無駄な処理を減らす

Reactは再レンダリングが起こる仕組みなので、不要な処理を書くと動作が重くなります。リファクタリングでは useMemo や useCallback を使って処理を最適化します。例えば同じ計算を何度もしている場合は useMemo でキャッシュするのが効果的です。

6. ネーミングをわかりやすくする

コードは人間が読むためのものでもあります。関数名やコンポーネント名を「Button1」や「TestComponent」のように曖昧にするのは避けましょう。リファクタリングの基本は「名前を見ただけで何をするか分かるようにする」ことです。これにより他の人が見てもすぐ理解できます。

7. CSSの整理もリファクタリング

Reactコンポーネントの見た目を決めるCSSも散らかりやすい部分です。不要なクラスを消したり、コンポーネントごとにCSSファイルを分けたりすることで、スタイルも分かりやすくなります。最近はCSSモジュールやstyled-componentsなどを使う方法もあり、これもリファクタリングの一種といえます。

8. リファクタリングで得られる効果

リファクタリングを行うことで、Reactコンポーネントは読みやすく、修正しやすくなります。また、保守性が高まり、エラーの少ない安定したアプリケーションを作れます。さらに、検索エンジン最適化（SEO）の面でもコードが整理されていることはプラスになります。無駄のないコードは表示速度の向上にもつながり、結果的にユーザー体験も向上します。