useImperativeHandleで理解する クロージャと評価タイミング

Transcript

1. useImperativeHandleで理解する クロージャと評価タイミング 2026/01/07 MOSH Tech Meetup 株式会社HRBrain 渡邉 佑
2. 株式会社HRBrain 渡邉 佑 新潟県の佐渡島出身 新卒で航海士の道へ進む ウェブ制作やアナリティクスに転向 ボクササイズとサウナが好きです X: @tasuku_web GitHub: @tasukuwatanabe 1
3. useImperativeHandleを使ったコンポーネント const VideoPlayer = ({ src, ref }) => { const videoRef = useRef<HTMLMediaElement>(null) useImperativeHandle(ref, () => ({ get currentTime() { return videoRef.current?.currentTime // 動画の再生位置 } }), []) return <video ref={videoRef} src={src} /> } DOMへの直接アクセスを隠蔽し、必要な機能だけを公開 2
4. 親コンポーネントでの使用 const ParentComponent = () => { const parentRef = useRef<VideoPlayerRef>(null) const handleClick = () => { parentRef.current?.currentTime // アクセス可能 parentRef.current?.duration // アクセス不可 } return ( <> <VideoPlayer src="video.mp4" ref={parentRef} /> <button onClick={handleClick}>クリック</button> </> ) } 公開するプロパティとメソッドを子コンポーネント側で制限している 3
5. 実装中に遭遇した問題： 「取得される currentTime が常に 0 のまま更新されない」 原因は「値の評価タイミング」にあった 4
6. NG例①：プロパティの値を変数に代入する useImperativeHandle(parentRef, () => { const currentTime = videoRef.current?.currentTime // 0 const volume = videoRef.current?.volume // 1 return { get currentTime() { return currentTime }, // 0で固定される get volume() { return volume }, // 1で固定される } }, []) 問題： useImperativeHandle実行時に値が評価され、クロージャに固定される → 変数に代入した時点で値がコピーされるため、動画が再生されても更新されない 5
7. NG例②：DOMへの参照を変数に代入する useImperativeHandle(parentRef, () => { const video = videoRef.current return { get currentTime() { return video?.currentTime }, get volume() { return video?.volume }, } }, []) 問題： DOMのマウントが未完了だと、クロージャによって const video = null がキャプチ ャされ、DOMマウント完了後も変数は null のままになる ※ 条件付きレンダリングや遅延マウントなどで発生する可能性 6
8. 解決策：getter内でrefを直接参照 useImperativeHandle(parentRef, () => ({ get currentTime() { return videoRef.current?.currentTime }, get volume() { return videoRef.current?.volume } }), []) 変数に代入せず、getter内で毎回 videoRef.current を参照 → getter呼び出し時に評価されるため、最新の値を取得でき、マウントタイミングに も依存しない 7
9. まとめ 変数に代入 → クロージャにキャプチャされ、値や参照が固定される。 評価タイミングを意識して実装しましょう。