プログラミング初心者のための入門ブログエンジニアが未来を切り開く。スクロールイベントこの広告は、90日以上更新していないブログに表示しています。人気記事スクロールイベント現在のウィンドウ位置を取得ページ上のDOM要素にアクセス最後にスクロールイベントスクロールイベントは、Webページで最もよく使用されるイベントの1つです。ほとんどの場合では必要なのは『一番上までスクロール』することだけです。長いコンテンツページがありそこに移動すると、下にスクロールされたままになり、一番上に戻るのが非常に面倒になるためです。その前にReactのコンポーネントを作成しスクロールイベントリスナーで現在のウィンドウ位置を取得する方法を学ばなければいけません。本日はその取得方法を解説していきます。Reactフックでカスタムフックを作成し、再利用可能なコンポーネントにします。それでは簡単な例で学んでいきましょう。penのコンソールで出力を確認できます。それでは、コードを分割しながら説明していきます。useState(0);上記の通り、useScrollカスタムフックとなります。scrollpositionのローカル状態でuseStateで初期値をゼロとして定義します。PositionUp();useEffectフック内にaddEventListenerでスクロールイベントを追加し、ユーザーがスクロールするたびにscrollpositionの初期値である状態を更新します。状態の変更はpageYOffsetを使用します。これは、Windowのプロパティで垂直方向のスクロール量となります。Windowはブラウザタブになります、なのでタブのスクロールを監視します。useScroll;removeEventListenerでコンポーネントをアンマウントしたら、スクロールリスナーをクリア(削除)にするために呼び出し関数を返します。カスタムフックの下部に最後はreturnでscrollpositionを返します。この、作成したカスタムフックを任意のファイルにインポートして新しい変数として割り当て、使用していくだけとなります。console.log(scrollPosition);return(<div></div>)}これはコンポーネントに対してアニメーションを追加する場合に役立つことがあります。ページ上のDOM要素にアクセスページ上のDOM要素にアクセスする為には、当ブログの記事で一度解説したのですがuseRefフックを使用する必要があります。useRefフックに精通がない場合はまず、下記を参照ください。useCallbackフックも使用します。一般的で非常に簡単な例で確認していきましょう。スクロールイベントリスナーをページのdivにアクセスします。className="content">コンソールで確認しながら下にスクロールして下さい。);}既存のApp.cssにスタイルを追加します。penのコンソールで確認できます。[]);handleScrollingはスクロールでのイベントリスナーとなります。useCallbackフックで、handleScrolling関数そのものをメモ化します。コンポーネントが再レンダリングされるときには、キャッシュから関数を取得するだけで、今度は同じ関数になり、子コンポーネントでの再レンダリングはトリガーされません。useCallbackフックは、再レンダリング時のフェーズのみ有効であることです。初回レンダリング時には役に立たないだけでなく、有害でもあります。useCallbackおよびuseMemoフックが役立つのと同様に、このフックがこれらの値や関数をキャッシュに格納するためにメモリの一部を使用していることも、あなたは理解しておいて下さい。初回レンダリング時に、アプリの動作がわずかですが遅くなる可能性がございます。乱用しすぎの最適化注意ということです。useMemoおよびuseCallbackフックの使用方法で解説しておりますので参照ください。[handleScrolling]);useEffectフックである2番目の引数(配列)の依存関係を確認してみるとhandleScrollingという関数が変更された時のみにフックが実行されます。この依存関係はフック内で使用していますので自動で追加されていき、つまりこのフックは一度だけ実行されます。上記のコードをカスタムフックとして独立させる場合、下記のようにします。useCallbackフックを使用して、スクロール操作を処理するためのコードをカプセル化します。useEffectフックでイベントリスナーを追加し、スクロール時に呼び出すコールバック関数を登録します。イベントリスナーの登録が不要になった時に、クリーンアップ関数を返すことで、メモリリークを防止します。このカスタムフックを他のコンポーネントで使用するには、下記のように呼び出します。コンソールで確認しながら下にスクロールして下さい。);}上記のように、useScrollingカスタムフックをAppコンポーネントで呼び出すことができます。scrollContainer要素に割り当てることで、スクロールイベントを処理できるようになります。最後にReactでは、現在のスクロール位置を追跡することは非常に困難でもあります、アプリケーションに不要な負荷をかけ、ユーザーエクスペリエンスを劇的に低下させる可能性があることに注意しながら扱うようにして下さい。ページ内のDOM要素にアクセスする場合にはRefの扱い方にも気を付けて下さい。本日は以上となります。最後まで読んで頂きありがとうございますこの記事が気に入ったら、ブックマークし他の方に共有してください。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。