TL;DR

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

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

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 として渡されます。

もう一つの実装方法

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

import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react' //カルーセル用のタグをインポート
import SwiperCore, { Pagination, Navigation } from 'swiper' //使いたい機能をインポート
import 'swiper/css/bundle'
SwiperCore.use([Pagination, Navigation])

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

const Slider = () => {
  return (
    <Swiper
      slidesPerView={1} //一度に表示するスライドの数
      pagination={{
        clickable: true,
      }} //　何枚目のスライドかを示すアイコン、スライドの下の方にある
      navigation //スライドを前後させるためのボタン、スライドの左右にある
      loop={true}
    >
      {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 に関する情報を得るための主要なリソースの一部です。これらのサイトは Swiper の開発者やコミュニティによって維持されていて、学習リソース、API ドキュメンテーション、例、およびその他の参考資料を提供しています。