reactuse

Reactuse

このスキルは、react.js / next.js プロジェクト向けの reactuse ライブラリに関する、判断と実装のガイドです。要件に最適な reactuse フックを対応付け、適切な使用パターンを適用し、実装を簡潔で保守しやすく、高速に保つため、独自コードよりフックベースのソリューションを優先します。

適用するタイミング

• React.js / Next.js での開発作業を支援する際は、このスキルを適用します。
• 要件を実装できる reactuse フックがないか、必ず最初に確認します。
• 可読性、保守性、パフォーマンスを向上させるため、カスタムコードより reactuse フックを優先します。
• 要件に最適なフックを対応付け、そのフックの呼び出しルールに従います。
• フックの表にある Invocation フィールドを参照してください。例：
  • AUTO：該当する場合、自動的に使用します。
  • EXTERNAL：必要な外部依存関係がユーザーによってすでにインストールされている場合にのみ使用します。そうでない場合は再検討し、本当に必要な場合に限り、インストールを依頼します。
  • EXPLICIT_ONLY：ユーザーから明示的に依頼された場合にのみ使用します。

    NOTE プロンプトまたは AGENTS.md にあるユーザーの指示は、フックのデフォルトの Invocation ルールより優先される場合があります。

フック

以下に記載するすべてのフックは、reactuse ライブラリの一部です。各セクションでは、フックを機能別に分類しています。

重要：各フックの項目には、簡潔な Description と詳細な Reference が記載されています。フックを使用する際は、必ず ./references にある該当ドキュメントで使用方法と型宣言を確認してください。

上流でブロックされているカテゴリ：Reactuse は最近のリリースで Humor フック（useFul、useLess、useOnce）もエクスポートしています。このスキルでは、上流でジョークまたは本番環境向けではないユーティリティとされているため、意図的にサポートも推奨もしていません。

ヘルパー

Hook	Description	Invocation
cn	React の className 用に、条件付きのクラス名を正規化します。	HIGH
createContext	プロバイダーとセレクターフックを備えた、型付きコンテキストを作成します。	HIGH
createContextHook	1 つのフックの結果を React サブツリー内にスコープします。	LOW
createEventEmitter	サブスクリプションフックを備えた、型安全なイベントエミッターを作成します。	LOW
createReactiveContext	更新が最適化された、型付きコンテキストセレクターを作成します。	LOW
createSharedHook	複数のコンシューマー間でフックのインスタンスを共有します。	LOW
createStore	状態、サブスクリプション、フックを備えた外部ストアを作成します。	MEDIUM
makeDestructurable	1 つの値をオブジェクト形式とタプル形式のどちらでも利用できるようにします。	LOW
target	DOM ターゲットを Reactuse フックが想定する形式でラップします。	MEDIUM

Elements

Hook	Description	Invocation
useActiveElement	現在フォーカスされている要素を追跡します。	LOW
useAutoScroll	コンテナーを自動的に最下部までスクロールします。	LOW
useClickOutside	対象要素の外側をクリックしたときにコールバックを呼び出します。	HIGH
useContextMenu	右クリックや長押しのジェスチャーをメニューの状態に変換します。	LOW
useDoubleClick	オプションのシングルクリックハンドラーとともにダブルクリックを検出します。	MEDIUM
useDraggable	ポインターの移動をドラッグ位置の状態に変換します。	LOW
useDropZone	ファイルの状態を持つドラッグ＆ドロップ領域を作成します。	MEDIUM
useFileDialog	ファイル選択ダイアログを開き、選択されたファイルを返します。	LOW
useFocus	フォーカス状態を追跡し、フォーカス／ブラーを制御します。	MEDIUM
useFocusTrap	指定された要素内にフォーカスを閉じ込めます。	MEDIUM
useHover	要素のホバー状態を追跡します。	MEDIUM
useImage	ブラウザーで画像を読み込み、画像固有の読み込み状態を返します。	LOW
useLockScroll	要素またはドキュメント本文のスクロールをロックします。	MEDIUM
useLongPress	長押し操作を検出します。	MEDIUM
usePaint	キャンバスに描画し、描画制御機能を提供します。	LOW
useScript	スクリプトを読み込み、その状態を返します。	LOW
useSize	要素の幅と高さを監視します。	LOW
useSticky	スティッキー要素が固定されているかを検出します。	LOW
useTextareaAutosize	内容に応じてテキストエリアのサイズを自動調整します。	MEDIUM
useTextDirection	要素のテキスト方向を取得および設定します。	MEDIUM
useWindowFocus	ウィンドウの現在のフォーカス状態を返します。	LOW
useWindowSize	ウィンドウの現在の幅と高さを返します。	LOW

Async

Hook	Description	Invocation
useAsync	Promise を返すコールバックの読み込み、エラー、データの状態を追跡します。	MEDIUM
useLockCallback	コールバックが同時に複数回実行されるのを防ぎます。	MEDIUM
useMutation	読み込み、エラー、成功の状態を持つミューテーションロジックを定義します。	HIGH
useOptimistic	非同期更新が完了する前に、楽観的な値を表示できます。	MEDIUM
useQuery	中断可能な非同期読み取りを、クエリの状態と更新制御でラップします。	HIGH

ライフサイクル

Hook	説明	呼び出し頻度
useAsyncEffect	非同期の副作用を実行します。	MEDIUM
useDidUpdate	更新時のみ（初回のマウント時を除く）エフェクトを実行します。	HIGH
useIsFirstRender	初回のレンダー時のみ true を返します。	LOW
useIsomorphicLayoutEffect	クライアントでは useLayoutEffect、サーバーでは useEffect を使用します。	HIGH
useMount	コンポーネントのマウント時にコールバックを一度実行します。	HIGH
useShallowEffect	依存関係が浅く、または深く変化した場合にのみエフェクトを実行します。	LOW
useUnmount	コンポーネントのアンマウント時にコールバックを実行します。	HIGH

ブラウザー

Hook	説明	呼び出し
useAudio	オーディオの再生（再生／一時停止／停止）、音量、再生速度、スプライトセグメントを管理します。	LOW
useBattery	バッテリーの状態とサポート状況を返します。	LOW
useBluetooth	Bluetooth デバイスを要求し、接続します。	LOW
useBreakpoints	レスポンシブブレークポイントとヘルパー述語を管理します。	MEDIUM
useBroadcastChannel	タブ間／ウィンドウ間のメッセージングを可能にします。	LOW
useBrowserLocation	リアクティブな位置情報の状態と、履歴を移動するためのコントロールを返します。	MEDIUM
useClipboard	クリップボードからテキストを読み取り、コピーします。	MEDIUM
useCopy	テキストをコピーし、遅延後にステータスをリセットします。	MEDIUM
useCssVar	CSS カスタムプロパティを読み書きします。	LOW
useDeviceList	選択 UI 向けに、利用可能なメディア入力デバイスと出力デバイスをグループ化します。	MEDIUM
useDisplayMedia	ビデオ要素を画面キャプチャストリームに接続します。	LOW
useDocumentEvent	ドキュメントにイベントリスナーをアタッチします。	LOW
useDocumentTitle	ドキュメントのタイトルを読み取り、更新します。	LOW
useDocumentVisibility	ドキュメントの表示状態を返します。	LOW
useEventListener	対象にイベントリスナーをアタッチします。	HIGH
useEventSource	EventSource のリアクティブラッパーを提供します。	LOW
useEyeDropper	EyeDropper API へのアクセスを提供します。	LOW
useFavicon	現在のファビコンを読み取り、更新します。	LOW
useFileSystemAccess	File System Access API を介してローカルファイルを読み書きします。	LOW
useFps	1 秒あたりのフレーム数を測定します。	LOW
useFullscreen	要素の全画面表示状態を制御します。	LOW
useGamepad	接続されたゲームパッドとアクティブ状態を返します。	LOW
useGeolocation	最新のブラウザー位置情報を React の状態に保持します。	MEDIUM
useMeasure	要素のサイズと位置を測定します。	LOW
useMediaControls	オーディオ／ビデオ要素のコントロールと状態を提供します。	LOW
useMediaStream	カメラまたはマイクのキャプチャをメディア要素に接続します。	MEDIUM
useMediaQuery	メディアクエリに一致するかどうかを返します。	MEDIUM
useMemory	現在の JS ヒープメモリ使用量を返します。	LOW
useNetwork	オンライン状態と接続情報を追跡します。	LOW
useNotification	通知の許可状態と最新の通知を管理します。	MEDIUM
useOnline	ユーザーがオンラインかどうかを返します。	MEDIUM
useObjectUrl	オブジェクト URL を作成および取り消します	LOW
useOtpCredential	ユーザーエージェントから OTP 認証情報を要求します。	LOW
usePermission	ブラウザーの権限クエリ状態を追跡します。	MEDIUM
usePictureInPicture	ビデオ要素のピクチャーインピクチャーモードを制御します。	LOW
usePointerLock	リアクティブなポインターロックコントロールを提供します。	LOW
usePostMessage	ウィンドウ／フレーム間でメッセージを受信および送信します。	LOW
useRaf	各アニメーションフレームでコールバックを実行します。	LOW
useShare	ネイティブの共有ダイアログを起動します。	MEDIUM
useSpeechRecognition	ブラウザーの音声認識を文字起こし状態に変換します。	LOW
useSpeechSynthesis	テキストを音声出力に変換し、再生状態を管理します。	LOW
useVibrate	オプションの間隔を指定して振動を起動します。	LOW
useVirtualKeyboard	仮想キーボードの状態を追跡し、コントロールを提供します。	LOW
useWakeLock	Wake Lock API の状態を制御します。	LOW
useWebSocket	コンポーネントを WebSocket エンドポイントに接続した状態に保ちます。	MEDIUM
useWebWorker	Web Worker を React のデータおよびライフサイクル状態に接続します。	LOW
useWebWorkerCallback	自己完結型の関数をメインスレッド外で実行します。	LOW

ユーティリティ

フック	説明	呼び出し
useBatchedCallback	呼び出しをまとめて、コールバックに渡します。	MEDIUM
useConst	一度だけ初期化される定数値を返します。	HIGH
useDebounceCallback	キャンセルメソッドを備えたデバウンス処理済みコールバックを作成します。	HIGH
useDebounceEffect	依存関係が変化したとき、遅延後にエフェクトを実行します。	HIGH
useDebounceState	デバウンス処理済みの状態セッターを作成します。	HIGH
useDebounceValue	値のデバウンス処理済みバージョンを返します。	HIGH
useDevicePixelRatio	現在のデバイスのピクセル比を返します。	LOW
useEvent	常に最新のハンドラーを呼び出す、安定したコールバック参照を返します。	HIGH
useLastChanged	最後に変更された時刻を記録します。	LOW
useLatest	常に最新の値を指す、安定した ref を返します。	MEDIUM
usePrevious	前の値を返します。	LOW
useThrottleCallback	キャンセルメソッドを備えたスロットル処理済みコールバックを作成します。	MEDIUM
useThrottleEffect	依存関係が変化したとき、遅延期間ごとに最大1回エフェクトを実行します。	MEDIUM
useThrottleState	スロットル処理済みの状態セッターを作成します。	MEDIUM
useThrottleValue	値のスロットル処理済みバージョンを返します。	MEDIUM

状態

Hook	説明	呼び出し頻度
useBoolean	切り替え用ヘルパーを使ってブール値の状態を管理します。	HIGH
useControllableState	制御状態と非制御状態のパターンに対応します。	MEDIUM
useCookie	Cookie の値を読み取り、書き込みます。	MEDIUM
useCookies	すべての Cookie を単一のオブジェクトとして管理します。	MEDIUM
useCounter	上限と下限を設定して数値カウンターを管理します。	LOW
useCycleList	順序付きの選択肢を、現在の値と移動用ヘルパーの組み合わせとしてモデル化します。	MEDIUM
useDefault	値が null または undefined の場合に、指定されたデフォルト値を返します。	MEDIUM
useDisclosure	開閉状態をヘルパーとともに管理します。	HIGH
useField	1 つの非制御フィールドをバリデーションおよびヘルパー状態に接続します。	MEDIUM
useForm	型付けされた非制御フォームの値とバリデーションを調整します。	MEDIUM
useHash	URL のハッシュ値を管理します。	LOW
useList	ヘルパーメソッドを使って配列を管理します。	MEDIUM
useLocalStorage	localStorage の値を管理します。	HIGH
useMap	ヘルパーメソッドを使って Map を管理します。	HIGH
useMask	マスク済みの値、未加工の値、表示値、カーソル状態を同期させます。	MEDIUM
useMergedRef	複数の ref を単一の ref コールバックに統合します。	MEDIUM
useObject	更新やキー操作用のヘルパーメソッドを使ってオブジェクトの状態を管理します。	MEDIUM
useOffsetPagination	オフセットベースのリストのページネーション状態を管理します。	MEDIUM
useQueue	追加・削除用のヘルパーを使ってキューを管理します。	MEDIUM
useRafState	requestAnimationFrame 内で状態を更新します。	LOW
useRefState	代入時に更新される ref のような状態を作成します。	LOW
useSessionStorage	sessionStorage の値を管理します。	MEDIUM
useSet	ヘルパーメソッドを使って Set を管理します。	MEDIUM
useStateHistory	元に戻す／やり直しの履歴とともに状態を保持します。	MEDIUM
useStep	次へ／戻るためのヘルパーを備えたステッパーを作成します。	MEDIUM
useStorage	Web Storage の値を管理します。	HIGH
useToggle	ユーティリティ関数を備えたブール値の切り替え機能です。	HIGH
useUrlSearchParam	単一の URL 検索パラメーターを状態と同期します。	HIGH
useUrlSearchParams	複数の URL 検索パラメーターを状態と同期します。	HIGH
useValidatedState	有効性と最後に有効だった値を、値とともに保持します。	MEDIUM
useWizard	ウィザードのステップと履歴を管理します。	MEDIUM

ユーザー

Hook	説明	呼び出し頻度
useBrowserLanguage	現在のブラウザー言語を返します。	MEDIUM
useOperatingSystem	ユーザーエージェントに基づいて、ユーザーのオペレーティングシステムを返します。	LOW
usePreferredColorScheme	ユーザーが希望するカラースキームを返します。	MEDIUM
usePreferredContrast	ユーザーのコントラスト設定を返します。	MEDIUM
usePreferredDark	ユーザーがダークモードを希望しているかどうかを返します。	MEDIUM
usePreferredLanguages	ユーザーが希望する言語を返します。	MEDIUM
usePreferredReducedMotion	動きを抑える設定を返します。	LOW

センサー

Hook	説明	呼び出し頻度
useDeviceMotion	snapshot と watch() を介してデバイスの動きのデータを提供します。	LOW
useDeviceOrientation	現在のデバイスの向きを提供します。	LOW
useHotkeys	キーボードショートカットの適用範囲を、対象または返される ref に設定します。	MEDIUM
useIdle	ユーザーがアイドル状態かどうかと、最後にアクティブだった時刻を追跡します。	LOW
useInfiniteScroll	スクロール領域の端に近づくと、条件付きで読み込みを開始します。	MEDIUM
useIntersectionObserver	要素の交差状態を追跡します。	MEDIUM
useKeyboard	対象に keydown／keyup リスナーを登録します。	MEDIUM
useKeyPress	特定のキーが押されているかどうかを追跡します。	MEDIUM
useKeysPressed	現在押されているすべてのキーを追跡します。	LOW
useMouse	ページおよび要素を基準としたマウス座標を追跡します。	LOW
useMutationObserver	要素の DOM の変更を監視します。	LOW
useOrientation	現在の画面の向きとロック制御を返します。	LOW
usePageLeave	マウスがページから離れたことを検出します。	LOW
useParallax	マウスまたはデバイスの向きに基づいて、視差効果を作成します。	LOW
usePerformanceObserver	パフォーマンスエントリーを監視します。	LOW
useResizeObserver	要素のサイズ変更を監視します。	LOW
useScroll	スクロール状態を追跡し、スクロール用ヘルパーを提供します。	LOW
useScrollIntoView	要素が表示領域に入るようスクロールし、トリガーを公開します。	LOW
useScrollTo	トリガーを使って特定の位置までスクロールします。	LOW
useSwipe	タッチやポインターの動きをスワイプ状態に変換します。	LOW
useTextSelection	テキスト選択の詳細を追跡します。	LOW
useVisibility	要素がビューポート内に表示されているかどうかを追跡します。	MEDIUM
useWindowEvent	window オブジェクトにイベントリスナーを設定します。	LOW
useWindowScroll	window のスクロール位置を追跡し、scrollTo を公開します。	LOW

時間

フック	説明	呼び出し
useInterval	一時停止・再開を制御できるインターバルを作成します。	HIGH
useProgress	自動的に進行する制御機能付きの進捗状態を作成します。	MEDIUM
useStopwatch	開始・一時停止・リセットを制御できるストップウォッチを作成します。	HIGH
useTime	現在時刻を複数のフィールドに分けて提供します。	MEDIUM
useTimeout	遅延後にコールバックを実行し、ready フラグを返します。	MEDIUM
useTimer	制御機能とコールバックを備えたカウントダウンタイマーを作成します。	MEDIUM

デバッグ

フック	説明	呼び出し
useLogger	コンポーネントのマウント、更新、アンマウントを記録します。	LOW
useRenderCount	コンポーネントがレンダリングされた回数を返します。	LOW
useRenderInfo	任意のログ出力とともに、レンダリング回数とタイミング情報を提供します。	LOW
useRerender	必要に応じてコンポーネントを強制的に再レンダリングします。	MEDIUM