React でカードの水平スクロールを実装する

Irakli Tchigladze 2023年10月12日

React React Scroll

React 水平スクロールカード
巻物のカード一覧

Vanilla JavaScript だけで何でも構築することは技術的に可能です。 React のようなフレームワークは、コア JavaScript 言語に構造を追加し、Web アプリケーションを簡単に構築するのに役立ちます。

React には、カスタムコンポーネントを作成し、それらをすべてのユーザーと共有する開発者の大規模なコミュニティもあります。

React コミュニティの開発者は、React アプリに必要なほぼすべての機能を追加できるようにする多くのパッケージを作成しました。これらのカスタムコンポーネントは、そのしくみを理解していなくても使用できます。

この記事では、React で水平スクロール可能なカードのカルーセルを作成する方法について説明します。

React 水平スクロールカード

水平スクロール可能なカード用のカスタム React コンポーネントを作成できます。ただし、時間がかかりすぎて、既製のパッケージほどうまく機能しない可能性があります。

この記事では、react-spring-3d-carousel というパッケージを使用します。

react-spring-3d-carousel パッケージからカスタム Carousel コンポーネントをインポートする必要があります。このコンポーネントのおかげで、水平スクロールカードの実装は非常に簡単です。

カルーセルに表示される DOM 要素のリストを提供するだけです。

例を見てみましょう。

import "./styles.css";
import React, { Component } from "react";
import Carousel from "react-spring-3d-carousel";
import SampleCard from "./card";
import { config } from "react-spring";
class ExampleCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      changeSlide: ""
    };
  }
  slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

  render() {
    return (
      <div style={{ width: "40%", height: "500px", margin: "0 auto" }}>
        <Carousel
          slides={this.slides}
          changeSlide={this.state.changeSlide}
          offsetRadius="10"
          animationConfig={config.gentle}
          showNavigation
        />
      </div>
    );
  }
}
export default ExampleCarousel;

ここに、カードのリスト (配列) があります。リスト内の各オブジェクトには、key と content の 2つのプロパティがあります。

key プロパティの値は一意である必要があります。 content プロパティの値がカルーセルに表示されます。

次に、.map() メソッドを適用して、カルーセル内の各カードに onClick() イベントハンドラーを設定します。 .map() メソッドは、slides 変数に保存するオブジェクトの新しい配列を生成します。

このリストを参照して、JSX でカルーセルを表示します。

<Carousel
  slides={this.slides}
  changeSlide={this.state.changeSlide}
  animationConfig={config.gentle}
  showNavigation
/>

まず、slides 属性をオブジェクトの配列に設定します。また、現在フォーカスされているカードの現在のインデックスに changeSlide を設定します。

また、animationConfig 属性をスムーズなトランジションに設定します。これは、react-spring パッケージから config モジュールをインポートしたためにのみ可能です。

巻物のカード一覧

slides プロパティに保存されているカードのリストを見てみましょう。

slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

スライドリスト内の各オブジェクトには、<SampleCard /> コンポーネントの値を持つ content プロパティがあります。カルーセルは、ここで指定したコンテンツの水平スクロールを作成します。

たとえば、正方形の <div> 要素を指定すると、カルーセルに表示されます。

配列内の各オブジェクトの content プロパティに異なるコンポーネントを設定することもでき、カルーセルには異なるカードが表示されます。この場合、<SampleCard /> コンポーネントを配列内のすべてのオブジェクトに設定します。

props をコンポーネントに渡して、その動作、機能、および外観をカスタマイズすることもできます。公式の React ドキュメントを読んで、props の可能なユースケースについて学んでください。

<SampleCard> コンポーネントのコードを見てみましょう。

const imageUrl =
    'https://play-lh.googleusercontent.com/yPtnkXQAn6yEahOurxuYZL576FDXWn3CqewVcEWJsXlega_nSiavBvmaXwfTGktGlQ';
export default class SampleCard extends React.Component {
  render = () => {
    return (
      <div>
        <img src={imageUrl} height='150' width='150'></img>
        <h1>Card title</h1>
      </div>
    );
  };
}

この CodeSandbox のライブデモを開くと、これらのカードの横スクロールがそれぞれ表示されます。これらのカードの構造は非常に単純です。画像と <h1> テキストがあります。

この画像は、カード画像がどのように見えるかの単なる例です。 imageUrl 変数を他の画像へのリンクに置き換えると、変更が表示されます。

SampleCard コンポーネントによって返されるメインの <div> コンテナーに要素とスタイルを追加して、より複雑なカードを作成します。

著者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React 水平スクロール カード

巻物のカード一覧

関連記事 - React Scroll

React 水平スクロールカード