[リファクタリング]: componentにまとめることの意義、可読性と変更容易性(初心者向け)

この記事は初心者向けなので、普段からコードを書いてる方にとってはあたりまえすぎる内容になっていると思います。ご容赦くださいw

サンプルコードとして視覚的にわかりやすいようNextjs(Reactjs)にしています。

良いコードとは

• 読みやすい（可読性）
• 変更が簡単にできる（変更容易性）

であるという前提で、リファクタリングをどのような方針でやっていくかを説明していきます。

以下のようなコードがあるとして

const Page: NextPage = () => {
  return (
    <>
      <h1>テスト用のサイト</h1>
      <div
        style={{
          width: "100px",
          height: "100px",
          boxShadow: "0 4px 15px rgba(0,0,0,.2)"
        }}
      >
        <p>aaaaaaaaaa</p>
      </div>
    </>
  )
}

繰り返し使うコードについてはまとめる意識があるかもしれないが、一度だけしか出てこないコードにおいても

const Page: NextPage = () => {
  return (
    <>
      <h1>テスト用のサイト</h1>
      <Card>
        <p>aaaaaaaaaa</p>
      </Card>
    </>
  )
}

type Props = {
  children: React.ReactNode,
}

const Card: React.FC<Props> = () => {
  return (
    <div
      style={{
        width: "100px",
        height: "100px",
        boxShadow: "0 4px 15px rgba(0,0,0,.2)"
      }}
    >
      {children}
    </div>
  )
}

のようにすることでPage componentだけをみてもcardを使っていることがわかりやすくなる。
このようにコードを小さくして名前をつけていくことでコードの詳細まで追っていくことなく読みやすいコードになる。
これで可読性が高いコードができた。

変更容易性については後ほど