Next.jsで最低限知っておきたい「コンポーネント」と「フック」の整理術

Next.jsで開発していると、気づいたら page.tsx がとんでもなくごちゃごちゃになっていること、ありませんか？

特にプロジェクトの規模が大きかったり、実装する処理が複雑だったりすると、こうなりがちです。

• useState や useEffect が何十個も並ぶ
• DOM部分は条件分岐だらけ
• もはや何がどこで何をしているのか分からない

カオスなpage.tsxを防ぐには

こういった事態を避けるには、こまめなリファクタリングがとても重要です。

そして、その際に知っておきたいキーワードが 「コンポーネント」 と 「フック」 です。

コンポーネントとは

「見た目（UI）をつくる部品」 です。

JSX（HTMLの箇所）を返す関数で、<Header /> や <Button /> のように使えます。

🔍 コンポーネント化する基準

• 他の場所でも使い回せそう
• コード量が多く、切り出したほうが可読性が上がる

上記どちらかに当てはまったら、コンポーネント化してしまってOKと自分は考えてます。

下記の画像はsrc/components/にフォルダを置いてコードをコンポーネント化した時のものです

このように分けられていると、

例えばアイテムを修正したいとなった時、Itemディレクトリの中だけを見ればいいので分かりやすいです。またscssも分離されているので単純に見やすいですね。

これが全てpage.tsxとpage.module.scssに書かれてると可読性が下がるのは想像しやすいと思います。

フックとは

「動き」や「状態管理」を担当するロジックのまとまりです

代表的なのは useState, useEffect など。

フック自体は画面には表示されず、コンポーネントの中で使うためのものです。

🔍 フック化する基準

コンポーネントと同じく、

• 複数の場所で使い回したいロジック
• page.tsxが肥大化しているので処理だけ別にまとめたい

といった場合にフックとして切り出すのが効果的です。

自分は下記画像のように切り分けました

フックはコンポーネントとちがってイメージが少し湧きづらいと思います

useZoomClass.tsのコードは全部で200行くらいのファイルです
useEffectとuseStateを使ってクラス名を変換する処理を書いています

今回は分かりやすいように簡単なコードに直しました、内容は適当です

export function useZoomClass(count: number) {
  const [hogehoge, sethogehoge] = useState('')
  const [hugahuga, sethugahuga] = useState('')

  useEffect(() => {
    if(count > 10){
      sethogehoge(class1)
      sethugahuga(class2)
    } else {
      sethogehoge(class3)
      sethugahuga(class4)
    }
  }, [count])

  return {
    hogehoge
    hugahuga
  }
}

それをpage.tsxで下記のように書きます

const { hogehoge, hugahuga } = useGameProgression(count)

こうすることでhoeghogeやhugahugaはcountの数によって変動するようになりました。

ロジックだけ切り出してpage.tsxには変数名だけ置いてあげると非常に見やすくなります

終わり

誰かのリファクタの参考になれば幸いです！