HOWTO · React

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

React コミュニティによって開発された多くのパッケージのおかげで、React で水平スクロールを実装するのは非常に簡単です。この記事では、その方法を示します。

著者 Irakli Tchigladze公開日 2023-06-21更新日 2023-10-12

このページの内容

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>
    );
  };
}