TL;DR

この記事では、Next.js と TypeScript の環境下で Swiper を用いたスライダーの実装方法について解説します。モダンなフロントエンド開発におけるスライダーコンポーネントの作成は一般的なタスクの一つであり、Swiper はその実装を容易にしてくれるライブラリです。

それでは、今回、2 つの実装方法を紹介します。

インストール

最新バージョンの Swiper をインストールするには、以下のコマンドを実行します。

npm install swiper@latest

また、React と連携するために、Swiper の React パッケージも最新バージョンにする必要があります。以下のコマンドを実行してみてください。

npm install swiper/react@latest

インストールが完了したら、プロジェクトを再起動してみてください。

Swiper の実装方法

次のコードは Next.js と Swiper を用いてスライダー（カルーセル）を作成するものですが、いくつかの追加機能や Next.js の Image コンポーネントを使っている点で後述するコードと異なります。

public ディレクトリに dummy/1.jpg 〜 3.jpg を配置しておきます。

import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

// カルーセルにする画像のソースをリストにします
const images = ['/dummy/1.jpg', '/dummy/2.jpg', '/dummy/3.jpg']

const Slider = () => {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      slidesPerView={1} //一度に表示するスライドの数
      pagination={{
        clickable: true,
      }} //何枚目のスライドかを示すアイコン、スライドの下の方にある
      navigation //スライドを前後させるためのボタン、スライドの左右にある
      loop={true}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
    >
      {images.map((src: string, index: number) => {
        return (
          <SwiperSlide key={`${index}`}>
            <Image src={src} layout="responsive" width={640} height={400} alt="test_image" />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

export default Slider

まず、このコードでは Pagination と Navigation という Swiper の追加機能を使用しています。Pagination はスライドの下部に表示される、現在何枚目のスライドを表示しているかを示すインジケータ（通常はドット）のことを指します。Navigation はスライドの左右に表示される、スライドを前後に移動するためのボタンを指します。これらの機能を Swiper に組み込むために、SwiperCore.use 関数を使っています。

次に、カルーセルに表示する画像のソースをリストとして定義しています。画像のソースは文字列の配列で表現され、各画像は SwiperSlide 内部で Image コンポーネントを使用して表示されています。

ここで重要なのが、Next.js の Image コンポーネントの使用です。このコンポーネントは Next.js 独自の機能であり、自動的に最適なサイズにリサイズされ、遅延ロードされるなど、パフォーマンスに優れた画像の表示を可能にします。Image コンポーネントには画像のソース(src)、レイアウト(layout)、幅(width)、高さ(height)、および代替テキスト(alt)を指定します。

Swiper コンポーネントのプロパティでは、一度に表示するスライドの数(slidesPerView)、Pagination の設定(pagination)、Navigation の有効化(navigation)、そしてループの有効化(loop)を設定しています。ループを true に設定すると、最後のスライドの次に最初のスライドが表示され、スライドが無限に続くようになります。

Swiper コンポーネントの基本的な使い方

このセクションは実装ではないので、読み飛ばしても構いません。 まず、Swiper コンポーネントを実装します。以下のように Slider コンポーネントを作成します。

ファイル名: components/Slider.tsx

import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'

type SlideItem = {
  id: number
  content: string
}

type SliderProps = {
  items: SlideItem[]
}

const Slider = ({ items }: SliderProps) => {
  return (
    <Swiper spaceBetween={50} slidesPerView={1}>
      {items.map((item) => (
        <SwiperSlide key={item.id}>
          <div>{item.content}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

export default Slider

そして、この Slider コンポーネントを以下のように呼び出すことができます。

import Slider from '../components/Slider'

// ここにスライダーで表示する内容を書く
const items = [
  { id: 1, content: 'Slide 1' },
  { id: 2, content: 'Slide 2' },
  { id: 3, content: 'Slide 3' },
]

const Page = () => {
  return <Slider items={items} />
}

export default Page

それでは、上記のコードについて一つずつ解説していきます。

まず最初に、Swiper と SwiperSlide コンポーネントを import しています。これらのコンポーネントは Swiper ライブラリから提供されています。そして、Swiper の CSS を読み込んでいます。これにより、Swiper の基本的なスタイリングが適用されます。

次に、SlideItem 型と SliderProps 型を定義しています。SlideItem は各スライドの内容を表す型で、SliderProps は Slider コンポーネントのプロパティを表す型です。

Slider コンポーネント内部では、Swiper コンポーネントを使ってスライダーを作成しています。Swiper コンポーネントには様々なプロパティがあり、ここでは spaceBetween と slidesPerView を設定しています。spaceBetween は各スライド間の距離を、slidesPerView は一度に表示するスライドの数を指定します。

そして、props から受け取った items を用いて、SwiperSlide コンポーネントをマッピングしています。これにより、各スライドが作成されます。

最後に、Page コンポーネント内部で Slider コンポーネントを使用しています。items にはスライドの内容を配列として指定します。この配列は Slider コンポーネントに props として渡されます。

以上が、このコードの全体的な解説になります。具体的な用途や課題に応じて、Swiper の機能や設定を調整して使用することができます。より詳細な設定方法については、次の公式ドキュメントを参照してください。

ドキュメント

以下は、Swiper に関する情報を得るための主要なリソースの一部です。これらのサイトは Swiper の開発者やコミュニティによって維持されていて、学習リソース、API ドキュメンテーション、例、およびその他の参考資料を提供しています。