<p>この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック <code>useScrollTrigger</code> の作成方法を紹介します。このカスタムフックを使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。</p><h2 id="hb30cc6d771">1. useScrollTrigger の解説</h2><p>カスタムフック <code>useScrollTrigger</code> のコードを見ていきましょう。</p><pre><code>const useScrollTrigger = (
  ref: RefObject&lt;HTMLElement&gt;,
  startPosition: number = 0
) =&gt; {
  const [isTriggered, setIsTriggered] = useState(false)

  useEffect(() =&gt; {
    const handleScrollTrigger = () =&gt; {
      if (ref.current) {
        const { top, bottom } = ref.current.getBoundingClientRect()
        const windowHeight = window.innerHeight

        if (top + startPosition &lt; windowHeight &amp;&amp; bottom &gt; 0)
          setIsTriggered(true)
      }
    }

    window.addEventListener('scroll', handleScrollTrigger)
    window.addEventListener('resize', handleScrollTrigger)

    handleScrollTrigger()

    return () =&gt; {
      window.removeEventListener('scroll', handleScrollTrigger)
      window.removeEventListener('resize', handleScrollTrigger)
    }
  }, [ref])

  return isTriggered
}

export default useScrollTrigger


</code></pre><p><code>useScrollTrigger</code> は2つの引数を受け取ります。</p><ul><li><code>ref</code>: 監視対象のHTML要素への参照</li><li><code>startPosition</code>: トリガーが発生する位置のオフセット（デフォルトは <code>0</code>）</li></ul><p><code>useState</code> を使って、<code>isTriggered</code> というステートを定義します。これは、要素が表示領域内にスクロールされたかどうかを表す真偽値です。<br><code>useEffect</code> を使って、スクロールとリサイズのイベントリスナーを設定します。これらのリスナーは、ウィンドウがスクロールされたりリサイズされたりしたときに <code>handleScrollTrigger</code> 関数を呼び出し、<code>isTriggered</code> の値を更新します。<br><code>handleScrollTrigger</code> 関数では、監視対象の要素の矩形がウィンドウの表示領域内に入ったかどうかをチェックし、<code>isTriggered</code> の値を更新します。オフセットが指定されている場合、表示領域内でトリガーが発生する位置が調整されます。</p><h2 id="h46446c11cf">2. 使用方法</h2><p><code>useScrollTrigger</code> を使って、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視する方法を紹介します。</p><pre><code>import React, { useRef } from 'react'
import useScrollTrigger from '@/hooks/useScrollTrigger'

const MyComponent = () =&gt; {
  const ref = useRef&lt;HTMLElement&gt;(null)
  const isTriggered = useScrollTrigger(ref)

  return (
    &lt;div&gt;
      &lt;div ref={ref} className={isTriggered ? 'visible' : 'hidden'}&gt;
        スクロールで表示される要素
      &lt;/div&gt;
    &lt;/div&gt;
  )
}

export default MyComponent</code></pre><p>上記のコードでは、<code>useRef</code> を使って、監視対象の要素への参照を作成しています。そして、<code>useScrollTrigger</code> を使って、要素が表示領域内にスクロールされたかどうかを判定しています。<br><code>isTriggered</code> の値に応じて、要素のクラス名が切り替わります。この例では、表示領域内にスクロールされたときに <code>visible</code> クラスが適用され、それ以外の場合は <code>hidden</code> クラスが適用されます。これにより、CSSで要素の表示・非表示やアニメーションを制御することができます。<br>以下は、表示・非表示の切り替えに使用できる簡単なCSS例です。</p><pre><code>.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}</code></pre><p>このように、<code>useScrollTrigger</code> カスタムフックを使うことで、コンポーネント内で要素が表示領域内にスクロールされたかどうかを監視し、表示領域内に入った際にアニメーションや特定の処理を実行することが容易になります。</p><h2 id="ha214098e44">まとめ</h2><p>この記事では、Reactで指定されたHTML要素が表示領域内にスクロールされたかどうかを監視するカスタムフック <code>useScrollTrigger</code> の作成方法を紹介しました。<br><code>useScrollTrigger</code> を使用することで、要素が表示領域に入った際にアニメーションや特定の処理を実行することが容易になります。ぜひ、このカスタムフックをプロジェクトで活用して、スクロールに応じた動的なウェブアプリケーションを作成してください。</p>

【React】要素が表示領域内にスクロールされたか監視するカスタムフック

<p>この記事では、Reactでメディアクエリを簡単に扱うためのカスタムフック <code>useMediaQuery</code> を作成する方法を紹介します。このカスタムフックを使用することで、コンポーネントのレンダリングをデバイスや画面幅に応じて最適化できます。</p><h2 id="he43d227b7b">1. プロジェクトの構成</h2><p>まず、プロジェクトの構成を確認しましょう。以下のファイルが必要です。</p><ul><li><code>useMediaQuery.ts</code> : カスタムフック <code>useMediaQuery</code> が定義されています。</li><li><code>minmaxDecision.ts</code> : <code>minmaxDecision</code> 関数が定義されています。</li><li><code>vars.ts</code> : 画面幅の定数 <code>Device</code> が定義されています。</li><li><code>types.ts</code> : 型定義 <code>DeviceType</code> が定義されています。</li></ul><h2 id="h94ffd9dc31">2. useMediaQuery の解説</h2><p>カスタムフック <code>useMediaQuery</code> のコードを見ていきましょう。</p><pre><code>const useMediaQuery = (
  width: number | keyof DeviceType = Device.tb,
  minmax: 'min' | 'max' = 'max'
): boolean =&gt; {
  const [isMatch, setIsMatch] = useState(() =&gt; false)
  const breakpoint =
    typeof width === 'string' ? minmaxDecision(width, minmax) : width

  useEffect(() =&gt; {
    const isMatches = () =&gt;
      window.matchMedia(`(${minmax}-width: ${breakpoint}px)`).matches
    const resetIsMatch = () =&gt; {
      const nowIsMatch = isMatches()
      setIsMatch(() =&gt; nowIsMatch)
    }


    resetIsMatch()
    window.addEventListener('resize', resetIsMatch)
    return () =&gt; {
      window.removeEventListener('resize', resetIsMatch)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return isMatch
}

export default useMediaQuery</code></pre><p><code>useMediaQuery</code> は2つの引数を受け取ります。</p><ul><li><code>width</code> : 画面幅の閾値（デフォルトは <code>Device.tb</code>）</li><li><code>minmax</code> : メディアクエリのタイプ（'min' または 'max'。デフォルトは 'max'）</li></ul><p><code>useState</code> を使って、 <code>isMatch</code> というステートを定義します。これは、メディアクエリがマッチしているかどうかを表す真偽値です。<br><code>breakpoint</code> は、メディアクエリの閾値を計算します。<code>width</code> が文字列の場合、<code>minmaxDecision</code> 関数を使って計算されます。<br><code>useEffect</code> を使って、<code>resize</code> イベントリスナーを設定します。このリスナーは、ウィンドウサイズが変更されたときに <code>resetIsMatch</code> 関数を呼び出し、<code>isMatch</code> の値を更新します。</p><h2 id="h7696cab8dd">3. minmaxDecision の解説</h2><p><code>minmaxDecision</code> 関数のコードを見ていきましょう。</p><pre><code>const minmaxDecision = (
  width: number | keyof DeviceType,
  minmax: 'min' | 'max'
): number =&gt; {
  let _width: number = typeof width === 'number' ? width : Device[width]
  _width = minmax === 'max' ? _width - 1 : _width
  return _width
}

export default minmaxDecision</code></pre><p><code>minmaxDecision</code> 関数は2つの引数を受け取ります。</p><ul><li><code>width</code>: 画面幅の閾値またはデバイスタイプのキー</li><li><code>minmax</code>: メディアクエリのタイプ（'min' または 'max'）</li></ul><p>この関数は、<code>width</code> が数値の場合、そのままの値を使い、文字列の場合は <code>Device</code> オブジェクトから対応する数値を取得します。そして、<code>minmax</code> が 'max' の場合は、閾値から1を引いた値を返します。これにより、<code>max-width</code> クエリでは、閾値の1ピクセル手前までを対象とすることができます。</p><h2 id="h4044a99389">4. Device の解説</h2><p><code>Device</code> オブジェクトは、画面幅の定数を定義しています。以下のように定義されています。</p><pre><code>export const Device: DeviceType = {
  pc: 1920,
  ct: 1136,
  tb: 768,
  sp: 428
}</code></pre><p>これらの定数は、<code>useMediaQuery</code> や <code>minmaxDecision</code> 関数で使用されます。プロジェクトでサポートするデバイスや画面サイズに応じて、適切な値を定義してください。</p><h2 id="h3484014cc7">5. 使用方法</h2><p><code>useMediaQuery</code> を使って、コンポーネント内でメディアクエリを扱う方法を紹介します。</p><pre><code>// 画面幅
export type DeviceType = {
  pc: 1920
  ct: 1136 // Contents
  tb: 768 //IPad Mini
  sp: 428 //iPhone14ProMax
}

import React from 'react'
import useMediaQuery from '@/hooks/useMediaQuery'
import { Device } from '@/styles/vars'

const MyComponent = () =&gt; {
  const isMobile = useMediaQuery(Device.sp, 'max')

  return (
    &lt;div&gt;
      {isMobile ? (
        &lt;p&gt;モバイル画面です&lt;/p&gt;
      ) : (
        &lt;p&gt;モバイル画面以外です&lt;/p&gt;
      )}
    &lt;/div&gt;
  )
}

export default MyComponent</code></pre><p>上記のコードでは、<code>useMediaQuery</code> を使って、画面幅が <code>Device.sp</code> よりも小さいかどうかを判定しています。<code>isMobile</code> の値に応じて、異なる内容を表示しています。<br>このように、<code>useMediaQuery</code> カスタムフックを使うことで、コンポーネント内で簡単にメディアクエリを扱うことができます。これにより、レスポンシブデザインを実現しやすくなります。</p><h2 id="ha214098e44">まとめ</h2><p>この記事では、Reactでメディアクエリを簡単に扱うためのカスタムフック <code>useMediaQuery</code> の作成方法を紹介しました。また、<code>minmaxDecision</code> 関数や <code>Device</code> オブジェクトの定義方法についても説明しました。<br><code>useMediaQuery</code> を使って、コンポーネントのレンダリングをデバイスや画面幅に応じて最適化することができます。これにより、レスポンシブデザインの実現が容易になります。<br>ぜひ、このカスタムフックをプロジェクトで活用して、レスポンシブなウェブアプリケーションを作成してください。</p>

HIROBLOG

hooks

【React】要素が表示領域内にスクロールされたか監視するカスタムフック

【React】メディアクエリを使うカスタムフック