マウスやキーボードの動きからユーザーが次にどの要素を操作するかを予測するスクリプト -ForesightJS

サイト構築 -JavaScript

Post on:2025年6月4日

sponsorsr

通常のホバーエフェクトのトリガーは、要素にカーソルをホバーした後に開始されます。しかし、これはユーザーの操作（ボタンに移動）から実際のホバーイベントまで100-200ms遅れます。また、キーボード操作によるトリガーも同様です。

ユーザーが次にどの要素を操作するか予測し、マウスやキーボードを実際に操作する前にプリフェッチすることができるJavaScriptのライブラリを紹介します。

マウスやキーボードの動きからユーザーの操作を予測スクリプト -ForesightJS

ForesightJs
ForesightJs -GitHub

ForesightJsは、マウスの動きやキーボードの操作からユーザーの意図を予測して、次のターゲットになる要素を予測するJavaScriptライブラリです。他のフレームワークに依存しないため、あらゆるフレームワークと一緒に利用できます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

ForesightJsの特徴

カーソルの軌跡やタブのシーケンスを分析することで、ユーザーが操作する可能性のある要素を予測し、実際にホバーやクリックが発生する前にアクションをトリガーできるようにします。

デベロッパーはクリックやホバーなどのアクションを待つことなく、これらの予測に基づいて前もってデータをプリフェッチすることができます。これによりマウスやキーボードで操作するユーザーにとって、Webサイトやアプリの速度と応答性が向上し、ビューポートに入った瞬間にコンテンツをプリフェッチするよりも無駄が少なくなります。

カーソルの予測

ユーザーが現在ホバーしている場所ではなく、カーソルが向かう方向の基づいてデータをプリフェッチします。
キーボードの予測

ユーザーが要素からタブストップのN個分離れたときにデータをプリフェッチします。Shift+tabにも対応。
カスタマイズ可能

予測方法の設定、要素周辺のヒットエリア調整など、さまざまなカスタマイズが可能です。
デバッグモード

デバッグモードでは、軌跡の視覚化、ヒットエリアのオーバーレイ、リアルタイムで設定を調整するためのインタラクティブなコントロールパネルなど、ビジュアルデバッグ機能を備えています。

ForesightJsがどんな感じでユーザーの操作を予測するかは、デモページでお楽しみください。

Playground -ForesightJs

各ボタンは300msのサーバーレスポンス遅延をシミュレートしており、実際のシナリオを再現します。すべての設定を調べるには、「Debug Mode」をonにしてデバッガーを表示している状態でご覧ください。
また、ユーザーと同じ体験をする場合にはoffにします。

下記のGifアニメーションは、tabキーで操作したものです。フォーカスが当たると縁取りされて、その次の要素がプリフェッチ（オレンジ状態）されます。

Playground -ForesightJs

ForesightJsは、下記から利用できます。

npm install js.foresight
# or
yarn add js.foresight
# or
pnpm add js.foresight

npm install js.foresight

# or

yarn add js.foresight

# or

pnpm add js.foresight

基本的な使用例は、下記の通り。

import { ForesightManager } from "foresightjs"

// Initialize the manager if you want custom global settings (do this once at app startup)
// If you dont want global settings, you dont have to initialize the manager
ForesightManager.initialize({
  debug: false, // Set to true to see visualization
  defaultHitSlop: { top: 30, left: 30, bottom: 80, right: 30 }, // Adds invisible margin around an element to increase its hitbox
})

// Register an element to be tracked
const myButton = document.getElementById("my-button")

const { isTouchDevice, unregister } = ForesightManager.instance.register({
  element: myButton,
  callback: () => {
    console.log("prefetching")
  }, // Callback when user is predicted to interact with the element,
  hitSlop: 20, // Optional: "hit slop" in pixels. Overwrites defaultHitSlop
})

// Later, when done with this element:
unregister()