custom hooks

2025-05-13

カスタムフック化の手順

1. hooksディレクトリを作成（まだなければ）

プロジェクトのルートやsrc/配下などにhooksディレクトリを作ります。

2. カスタムフックのファイルを作成

例：useBlobMouseMove.ts

3. カスタムフックのコードを書く

// hooks/useBlobMouseMove.ts

import { useEffect, RefObject } from "react"
export function useBlobMouseMove(*blobRef*: RefObject<HTMLDivElement>) {

useEffect(() => {

const handleMouseMove = (*e*: MouseEvent) => {

if (!blobRef.current) return

const { clientX, clientY } = e

const x = clientX - blobRef.current.offsetWidth / 2

const y = clientY - blobRef.current.offsetHeight / 2

setTimeout(() => {

if (blobRef.current) {

blobRef.current.style.transform = `translate(${x * 0.05}px, ${y * 0.05}px)`

}

}, 100)

}

window.addEventListener("mousemove", handleMouseMove)

return () => window.removeEventListener("mousemove", handleMouseMove)

}, [blobRef])

}

4. 使いたいファイルでimportして利用

import { useRef } from "react"

import { useBlobMouseMove } from "@/hooks/useBlobMouseMove"

const blobRef = useRef<HTMLDivElement>(null)

useBlobMouseMove(blobRef)

return (

<div *ref*={blobRef} ... />

)

まとめ

  • hooksディレクトリにカスタムフックを作成
  • 使いたいコンポーネントでimportして使う

これで、どのページやコンポーネントでも同じマウス追従アニメーションを簡単に再利用できる

ポイント

  • hooks/useBlobMouseMove.tsx にカスタムフック（useBlobMouseMove）を作成
  • app/page.tsx で import { useBlobMouseMove } from "@/hooks/useBlobMouseMove" としてインポート
  • const blobRef = useRef(null) でrefを作成し、useBlobMouseMove(blobRef) でフックを呼び出し
  • 対象のdivに ref={blobRef} を付与

この構成で、カスタムフックの再利用性・保守性が高まり、他のページやコンポーネントでも同じアニメーションを簡単に使える状態になる

//useBlobMouseMove.tsx

ちなみに、このカスタムフックを他のworks,anout,contactなどにも適応したい場合は各ページに読ませるのか？それともLayout.tsxの共通ページに読ませるのか？どちらがいいか？

どちらが良いかの結論

  • 各ページごとにblobを表示・アニメーションさせたい場合

→ 各ページ（例：works/page.tsx, about/page.tsx, contact/page.tsx）でカスタムフックを呼び出すのがベストです。

  • 全ページ共通の背景装飾としてblobを表示・アニメーションさせたい場合

→ layout.tsx（共通レイアウト）でカスタムフックを呼び出し、blobを配置するのがベスト

各ページで呼び出す場合

  • ページごとにblobのデザインや動きを変えたい場合に柔軟。
  • そのページだけにblobを表示したい場合に最適。
  • ページ単位で管理できるので、不要なページには表示しないで済む。

layout.tsxで呼び出す場合

  • 全ページで同じblobを共通で表示したい場合に便利。
  • 例えば「全ページの背景に常にblobがある」など、グローバルな装飾にしたい場合に最適。
  • ただし、ページごとに異なるblobを出したい場合は工夫が必要。

まとめ

  • ページごとに個別のblobを出したい → 各ページでカスタムフックを使う
  • 全ページ共通のblobを出したい → layout.tsxでカスタムフックを使う
ブログ一覧に戻る