【ITニュース解説】Build Your Own Infinite Carousel in React (with a Custom Hook)❗

このニュース記事は、ウェブ開発で頻繁に利用される「カルーセル」（スライドショーのように画像やコンテンツを横にスライド表示する機能）を、Reactというフレームワークで外部ライブラリに頼らず自作する方法について解説している。多くのウェブサイトでカルーセルが使われているが、その多くは既存のライブラリを利用している。しかし、この記事では、なぜあえて自分でカルーセルを構築することが重要なのかを説いている。それは、既成のものを利用するだけでなく、その裏側にあるロジックを理解し、自分で実装することで、より深い知識が得られ、完全に制御可能でカスタマイズ性の高い独自のミニライブラリを作り出せるというメリットがあるからだ。

ここでいう「無限カルーセル」とは、スライドが途切れることなく、まるで終わりがないかのように連続して表示されるカルーセルのことである。通常のカルーセルでは、最後のスライドに到達するとそこで停止するか、急に最初のスライドに戻ってしまう。しかし、無限カルーセルは、ユーザーが最後のスライドから「次へ」を押しても、滑らかに最初のスライドが現れるように見える。この無限の錯覚を生み出す主要な技術は二つある。一つは、実際に表示したいスライドのリストの前後に追加のスライド（「クローン」と呼ばれる複製）を配置すること。もう一つは、ユーザーがこれらのクローンスライドの領域まで移動しすぎたとき、ユーザーに気づかれないように瞬時に表示位置をリセットすることである。これにより、ユーザーはスライドが無限に続いているかのように感じるのだ。

このカルーセルは、大きく二つの部分に分けて構築されている。一つは「InfiniteCarouselコンポーネント」で、これは実際に画面に表示されるコンテンツ（画像やテキスト）や、スライドを操作するためのボタンなど、ユーザーインターフェース（UI）の描画を担当する。もう一つは「useCarouselフック」で、こちらはカルーセルの動きを制御するすべてのロジック、つまりスライドの複製、現在の表示位置の管理、スライドの移動、自動スライド機能、そしてウィンドウサイズ変更時の調整などを担当する。このようにロジックとUIを分離することで、useCarouselフックは再利用性が高く、様々なReactプロジェクトでどんな種類のコンテンツにも適用できる汎用的なツールとなる。

useCarouselフックには、カルーセルの動作を細かく設定するためのオプションがいくつか用意されている。例えば、一度に何枚のスライドを画面に表示するか、スライド間の間隔をどのくらいにするか、自動でスライドが切り替わるまでの時間を設定できる。このフックの内部では、以下のような処理が行われている。まず、現在のスライドの位置を示す「インデックス」という数値を管理するために、Reactのrefという機能が利用される。これは、コンポーネントが再レンダリングされても値が保持されるため、スライドの位置を永続的に追跡するのに役立つ。スライドの移動は、CSSのtransform: translateX()というプロパティを使って実現される。これは、要素を水平方向に動かすための強力なCSS機能であり、スムーズなアニメーションを可能にする。

無限の錯覚を維持するための核心的な技術が「見えないリセット」である。これは、ユーザーがスライドを左右に操作して、一番端にあるクローンスライドの領域にまで移動したときに発動する。この瞬間、一時的にスライドの移動アニメーション（CSSのtransition）を無効にし、ユーザーには見えない速度で本来のコンテンツの端の位置にスライドを瞬時に戻す。その後、再びアニメーションを有効にして、何事もなかったかのようにスライドの動きを継続させる。この一連の動作が非常に高速で行われるため、ユーザーは位置がジャンプしたことに全く気づかず、スライドが無限に続いているように感じるのだ。また、指定した間隔でスライドが自動的に切り替わる「自動スライド」機能や、マウスカーソルがカルーセルの上に乗ると一時停止し、離すと再開する機能も実装されている。さらに、ウェブサイトを閲覧するデバイスの画面サイズが変わったときに、スライドの幅を適切に再計算して表示を調整する「リサイズハンドラ」も備わっており、多様な画面環境でカルーセルの見た目が崩れないように工夫されている。

InfiniteCarouselコンポーネントのユーザーインターフェースはシンプルに構成されており、スライドのリスト全体はHTMLの<ul>要素で、個々のスライド（画像など）は<li>要素で表現される。そして、ユーザーが手動でスライドを前後に操作するための「前へ」「次へ」というナビゲーションボタンが二つ配置されている。

このカルーセルは「レスポンシブデザイン」にも対応しており、CSSの「メディアクエリ」という技術を利用して、画面のサイズに応じて表示されるスライドの数を自動的に調整する。例えば、スマートフォンのような小さい画面では1〜2枚のスライドが表示され、タブレットでは3枚、デスクトップのような広い画面では4枚のスライドが表示されるように設定されている。これは、画面の幅に合わせて各スライドの幅を計算し直すCSSのルールと、前述のuseCarouselフック内のリサイズハンドラが連携することで実現している。

無限カルーセルのロジックの具体的な流れを想像してみよう。もしオリジナルのスライドが8枚（A, B, C, D, E, F, G, H）あり、一度に4枚のスライドが表示される場合、無限の錯覚を作るために、オリジナルのスライドの前に4枚、後ろに4枚のクローンスライドを配置する。例えば、内部的には「E, F, G, H（クローン） | A, B, C, D, E, F, G, H（オリジナル） | A, B, C, D（クローン）」のような順序でスライドが並んでいるイメージだ。

ユーザーがカルーセルを操作する際の重要な位置がいくつかある。「開始位置」は、表示されているスライドが最初のオリジナルスライド（A）に位置合わせされている状態を指す。ここから右にスライドを進めていくと、最後のオリジナルスライド（H）に到達し、さらに「次へ」を押すと、その先に配置されたAのクローンへと移動する。この移動が完了した瞬間、「見えないリセット」が発動し、アニメーションを一時的に停止して、実際のAスライドの位置に瞬時に表示を戻す。この戻る動作はユーザーには認識できないため、AのクローンからAのオリジナルへとスムーズに連続しているように感じる。同様に、左にスライドを進めていくと、最初のオリジナルスライド（A）を通り過ぎ、その手前に配置されたHのクローンへと移動する。ここでも移動完了時にアニメーションを一時停止し、実際のHスライドの位置に瞬時に戻す。こうして、ユーザーにはスライドが途切れることなく、無限に続くかのように見えるのだ。

最終的に、この自作された無限カルーセルは、手動でのスライド操作、カスタマイズ可能な自動スライド、マウスホバーによる一時停止、無限効果を実現する見えないリセット、そして様々な画面サイズに適応するレスポンシブデザインといった充実した機能を備えている。また、ロジック部分をカスタムフックとして分離したことで、画像だけでなく、あらゆる種類のコンテンツに対応できる高い再利用性も実現している。

このように、外部の大きなライブラリに頼らず、一から自分だけの無限カルーセルを構築する過程は、その動作原理を深く理解し、その振る舞いを完全に制御できるようになるという点で、システムエンジニアを目指す初心者にとって非常に価値のある学習経験となる。技術の内部構造を理解し、カスタマイズする自由を得ることは、将来的に高度な機能を開発したり、問題を解決したりするための基盤となるだろう。