ユーザーのマウスやキーボードの動き（運動量や方向）から次にどの要素を操作するか予測するスクリプト -ForesightJS
Post on:2025年7月15日
sponsorsr
ユーザーがWebサイトにアクセスした際、マウスやキーボードの動きをから次にどの要素を操作するか予測し、プリフェッチすることができるJavaScriptのライブラリを紹介します。
1ヵ月ほど前に紹介したForesightJSですが、この短期間にバージョンアップされ、さらにパワーアップしました！
ForesightJS
ForesightJS -GitHub
どんな感じかは、サイト見るだけで分かります。下記はトップページでのマウス操作をアニメーションgif化したもので、マウスが次にどこに向かうのか、マウスの速度はどのくらいなのか、運動量や方向などが矢印で可視化されます。
デベロッパーはクリックやホバーなどのアクションを待つことなく、これらの予測に基づいて前もってデータをプリフェッチすることができます。これによりマウスやキーボードで操作するユーザーにとって、Webサイトやアプリの速度と応答性が向上し、ビューポートに入った瞬間にコンテンツをプリフェッチするよりも無駄が少なくなります。
-
- カーソルの予測
- ユーザーが現在ホバーしている場所ではなく、カーソルが向かう方向の基づいてデータをプリフェッチします。
-
- キーボードの予測
- ユーザーが要素からタブストップのN個分離れたときにデータをプリフェッチします。Shift+tabにも対応。
-
- カスタマイズ可能
- 予測方法の設定、要素周辺のヒットエリア調整など、さまざまなカスタマイズが可能です。
-
- デバッグモード
- デバッグモードでは、軌跡の視覚化、ヒットエリアのオーバーレイ、リアルタイムで設定を調整するためのインタラクティブなコントロールパネルなど、ビジュアルデバッグ機能を備えています。
ForesightJsは、マウスの動きやキーボードの操作からユーザーの意図を予測して、次のターゲットになる要素を予測するJavaScriptライブラリです。他のフレームワークに依存しないため、あらゆるフレームワークと一緒に利用できます。
MITライセンスで、商用プロジェクトでも無料で利用できます。
ForesightJsの特徴
ForesightJsがどんな感じでユーザーの操作を予測するかは、デモページでお楽しみください。
各ボタンは300msのサーバーレスポンス遅延をシミュレートしており、実際のシナリオを再現します。すべての設定を調べるには、「Debug Mode」をonにしてデバッガーを表示している状態でご覧ください。
また、ユーザーと同じ体験をする場合にはoffにします。
下記のGifアニメーションは、マウスで操作したものです。フォーカスが当たると縁取りされて、その次の要素がプリフェッチ（オレンジ状態）されます。
sponsors
