バージョン: v8

IonSlidesからSwiper.jsへの移行

IonSlidesをお探しですか？

IonSlidesはv6.0.0で非推奨となり、v7.0.0で削除されました。Swiper.jsライブラリを直接使用することをお勧めします。移行プロセスについては、以下で詳しく説明します。

最新のタッチスライダーコンポーネントが必要な場合は、Swiper.jsをお勧めします。このガイドでは、Ionic FrameworkアプリケーションでReact向けSwiperを設定する方法について説明します。また、IonSlidesから公式のSwiper React統合に移行するために必要な移行情報についても説明します。

注意

SwiperのReactコンポーネントは、将来のSwiperリリースで削除され、代わりにSwiper Elementが使用される予定です。ただし、このガイドでは、執筆時点では最も安定したエクスペリエンスを提供するため、Reactコンポーネントへの移行方法を示します。特に、ReactはまだWeb Componentsを強くサポートしていません。

Swiper.jsをIonic Frameworkで使用するために、SwiperのReactコンポーネントを使用することは必須ではありません。

はじめに

まず、Ionicの最新バージョンにアップデートしてください

npm install @ionic/react@latest @ionic/react-router@latest

それが完了したら、プロジェクトにSwiperの依存関係をインストールします

npm install swiper@latest

注意

Create React Appを使用する開発者は、Swiperの最新バージョンでreact-scripts v5.0.0+を使用する必要があります。

スタイリッシュなスワイプ

次に、基本のSwiperスタイルをインポートする必要があります。また、Ionicが提供するスタイルもインポートします。これにより、IonSlidesで使用したのと同じCSS変数を使用してSwiperスタイルをカスタマイズできます。

Swiperが使用されているコンポーネントでスタイルをインポートすることをお勧めします。これにより、スタイルが必要な場合にのみロードされるようになります

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    ...
  );
};
export default Home;

注意

Swiper.jsをIonicで使用するために、@ionic/react/css/ionic-swiper.cssをインポートすることは必須ではありません。このファイルはIonSlidesコンポーネントとの後方互換性のために使用されており、スタイルシートで提供されるCSS変数を使用しない場合は、安全に省略できます。

セレクターの更新

以前は、ion-slidesとion-slideをターゲットにして、カスタムスタイリングを適用することができました。これらのスタイルブロックの内容は変わりませんが、セレクターを更新する必要があります。以下は、ion-slidesからSwiper Reactに移行する際のセレクターの変更リストです。

ion-slidesセレクター	Swiperセレクター
`ion-slides`	`.swiper`
`ion-slide`	`.swiper-slide`

プリプロセッサ（オプション）

SCSSまたはLessスタイルを使用する開発者向けに、Swiperはこれらのファイルのインポートも提供します。

Lessスタイルの場合は、Swiperのインポートパスでcssをlessに置き換えます

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/less';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    ...
  );
};
export default Home;

SCSSスタイルの場合は、Swiperのインポートパスでcssをscssに置き換えます

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/scss';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    ...
  );
};
export default Home;

コンポーネントの使用

Swiperは、SwiperとSwiperSlideの2つのコンポーネントをエクスポートします。SwiperコンポーネントはIonSlidesと同等で、SwiperSlideはIonSlideと同等です。

これらのコンポーネントはswiper/reactからインポートされます

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

モジュールの使用

デフォルトでは、React版Swiperは追加のモジュールをインポートしません。ナビゲーションやページネーションなどのモジュールを使用するには、まずそれらをインポートする必要があります。

IonSlidesには、ページネーション、スクロールバー、自動再生、キーボード、ズームモジュールが自動的に含まれていました。このガイドでは、これらのモジュールをインストールする方法を示します。

まず、swiperパッケージからモジュールと対応するCSSファイルをインポートする必要があります

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/keyboard';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/zoom';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

次に、Swiperコンポーネントのmodulesプロパティを使用して、これらのモジュールをSwiperに提供する必要があります

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/keyboard';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/zoom';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom]}>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

最後に、適切なプロパティを使用することで、これらの機能をオンにできます

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/keyboard';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/zoom';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper
          modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom]}
          autoplay={true}
          keyboard={true}
          pagination={true}
          scrollbar={true}
          zoom={true}
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

注意

モジュールの完全なリストについては、https://swiper.dokyumento.jp/react#usageを参照してください。

IonicSlidesモジュール

IonSlidesでは、IonicがSwiperの多数のプロパティを自動的にカスタマイズしました。これにより、モバイルデバイスでスワイプする際にスムーズなエクスペリエンスが得られました。Swiperを直接使用する場合もこれらのプロパティが設定されるように、IonicSlidesモジュールを使用することをお勧めします。ただし、このモジュールを使用することは、IonicでSwiper.jsを使用するために必須ではありません。

IonicSlidesによって設定されたプロパティを確認し、カスタマイズするものを決定することをお勧めします。

IonicSlidesモジュールをインストールするには、@ionic/reactからインポートし、modules配列の最後の項目として渡します

import React from 'react';
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/keyboard';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/zoom';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper
          modules={[Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides]}
          autoplay={true}
          keyboard={true}
          pagination={true}
          scrollbar={true}
          zoom={true}
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

注意

IonicSlidesモジュールは、配列の最後のモジュールである必要があります。これにより、ページネーション、スクロールバー、ズームなどのモジュールの設定を自動的にカスタマイズできます。

プロパティ

Swiperオプションは、IonSlidesのoptionsオブジェクトを介してではなく、<Swiper>コンポーネントに直接プロップとして提供されます。

IonSlidesを使用したアプリで、slidesPerViewとloopオプションが設定されていたとします

const MyComponent: React.FC = () => {
  return (
    <IonSlides
      options={{
        slidesPerView: 3,
        loop: true,
      }}
    >
      <IonSlide>Slide 1</IonSlide>
      <IonSlide>Slide 2</IonSlide>
      <IonSlide>Slide 3</IonSlide>
    </IonSlides>
  );
};

移行するには、これらのオプションをoptionsオブジェクトから取り出し、<Swiper>コンポーネントにプロパティとして直接指定します

const MyComponent: React.FC = () => {
  return (
    <Swiper slidesPerView={3} loop={true}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

以下は、IonSlidesからSwiper Reactに移行する際のプロパティの変更リストです。

名前	注釈
オプション	各オプションを`<Swiper>`コンポーネントに直接プロパティとして設定します。
モード	モードに基づいて異なるスタイルを適用するには、CSSで`.ios .swiper`または`.md .swiper`をターゲットにできます。
ページャー	代わりに`pagination`プロパティを使用してください。Paginationモジュールのインストールが必要です。
スクロールバー	引き続き`scrollbar`プロパティを使用できますが、最初にScrollbarモジュールをインストールしてください。

注意

Swiper Reactで利用可能なすべてのプロパティは、https://swiper.dokyumento.jp/react#swiper-propsにあります。

イベント

SwiperコンポーネントはIonic Frameworkによって提供されないため、イベント名にはonIonSlideプレフィックスは付きません。

IonSlidesを使用しているアプリで、onIonSlideDidChangeイベントを使用したとしましょう。

const MyComponent: React.FC = () => {
  return (
    <IonSlides onIonSlideDidChange={() => onSlideChange()}>
      <IonSlide>Slide 1</IonSlide>
      <IonSlide>Slide 2</IonSlide>
      <IonSlide>Slide 3</IonSlide>
    </IonSlides>
  );
};

移行するには、イベントの名前をonSlideChangeに変更します。

const MyComponent: React.FC = () => {
  return (
    <Swiper onSlideChange={() => onSlideChange()}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

以下は、IonSlidesからSwiper Reactに移行する際のイベント名の変更の完全なリストです。

IonSlidesイベント	Swiperイベント
`onIonSlideWillChange`	`onSlideChangeTransitionStart`
`onIonSlideDidChange`	`onSlideChangeTransitionEnd`
`onIonSlideDoubleTap`	`onDoubleTap`
`onIonSlideDrag`	`onSliderMove`
`onIonSlideNextStart`	`onSlideNextTransitionStart`
`onIonSlideNextEnd`	`onSlideNextTransitionEnd`
`onIonSlidePrevStart`	`onSlidePrevTransitionStart`
`onIonSlidePrevEnd`	`onSlidePrevTransitionEnd`
`onIonSlideReachStart`	`onReachBeginning`
`onIonSlideReachEnd`	`onReachEnd`
`onIonSlideTap`	`onTap`
`onIonSlideTouchStart`	`onTouchStart`
`onIonSlideTouchEnd`	`onTouchEnd`
`onIonSlideTransitionStart`	`onTransitionStart`
`onIonSlideTransitionEnd`	`onTransitionEnd`
`onIonSlidesDidLoad`	`onInit`

注意

Swiperで利用可能なすべてのイベントは、https://swiper.dokyumento.jp/swiper-api#eventsにあります。

メソッド

ほとんどのメソッドは削除され、代わりにSwiperのプロパティに直接アクセスするようになりました。

これらのプロパティへのアクセスは、Reactコンポーネントではなく、Swiperインスタンス自体のプロパティにアクセスする必要があるため、少しトリッキーになる場合があります。これを行うには、onSwiperを使用してSwiperインスタンスへの参照を取得することをお勧めします。

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperInterface } from 'swiper';
...
const Home: React.FC = () => {
  const [swiperInstance, setSwiperInstance] = useState<SwiperInterface>();
  return (
    ...
    <Swiper
      onSwiper={(swiper) => setSwiperInstance(swiper)}
    >
      ...
    </Swiper>
  )
};
export default Home;

ここから、Swiperインスタンスのプロパティにアクセスする場合は、swiperInstanceにアクセスします。たとえば、isBeginningプロパティを確認する場合は、swiperInstance.isBeginningと記述できます。ただし、swiperInstanceが最初に定義されていることを確認してください！

以下は、IonSlidesからSwiper Reactに移行する際のメソッドの変更の完全なリストです。

IonSlidesメソッド	注釈
`getActiveIndex()`	代わりに`activeIndex`プロパティを使用してください。
`getPreviousIndex()`	代わりに`previousIndex`プロパティを使用してください。
`getSwiper()`	`onSwiper`を使用してSwiperインスタンスへの参照を取得します。上記の例を参照してください。
`isBeginning()`	代わりに`isBeginning`プロパティを使用してください。
`isEnd()`	代わりに`isEnd`プロパティを使用してください。
`length()`	代わりに`slides`プロパティを使用してください。（例：swiperRef.slides.length）
`lockSwipeToNext()`	代わりに`allowSlidesNext`プロパティを使用してください。
`lockSwipeToPrev()`	代わりに`allowSlidePrev`プロパティを使用してください。
`lockSwipes()`	代わりに`allowSlideNext`、`allowSlidePrev`、および`allowTouchMove`プロパティを使用してください。
`startAutoplay()`	代わりに`autoplay`プロパティを使用してください。
`stopAutoplay()`	代わりに`autoplay`プロパティを使用してください。

エフェクト

キューブやフェードなどのエフェクトを使用している場合は、他のモジュールと同様にインストールできます。この例では、フェードエフェクトを使用します。まず、swiperからEffectFadeをインポートし、modules配列に指定します。

import React from 'react';
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
import { EffectFade } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper modules={[EffectFade, IonicSlides]}>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

次に、エフェクトに関連付けられたスタイルシートをインポートする必要があります。

import React from 'react';
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
import { EffectFade } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/effect-fade';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper modules={[EffectFade, IonicSlides]}>
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

その後、swiperのeffectプロパティを"fade"に設定することでアクティブ化できます。

import React from 'react';
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
import { EffectFade } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/effect-fade';
import '@ionic/react/css/ionic-swiper.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Swiper modules={[EffectFade, IonicSlides]} effect="fade">
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
        </Swiper>
      </IonContent>
    </IonPage>
  );
};
export default Home;

注意

Swiperのエフェクトの詳細については、https://swiper.dokyumento.jp/react#effectsを参照してください。

まとめ

Swiperがインストールされたので、新しいSwiper機能をお楽しみいただけます。まずはSwiper Reactの紹介から始め、次にSwiper APIドキュメントを参照することをお勧めします。

よくある質問

この移行の例はどこにありますか？

ion-slidesと対応するSwiperの使用例を含むサンプルアプリは、https://github.com/ionic-team/slides-migration-samplesにあります。

この移行に関するヘルプはどこで入手できますか？

移行で問題が発生した場合は、Ionicフォーラムに投稿してください。

バグレポートはどこに提出すればよいですか？

問題を提起する前に、SwiperディスカッションボードまたはIonicフォーラムに投稿して、コミュニティによって問題を解決できるかどうかを確認してください。

Swiperライブラリで問題が発生している場合は、新しいバグをSwiperリポジトリに提出する必要があります：https://github.com/nolimits4web/swiper/issues

IonicSlidesモジュールで問題が発生している場合は、新しいバグをIonic Frameworkリポジトリに提出する必要があります：https://github.com/ionic-team/ionic-framework/issues

はじめに​

スタイリッシュなスワイプ​

セレクターの更新​

プリプロセッサ（オプション）​

コンポーネントの使用​

モジュールの使用​

IonicSlidesモジュール​

プロパティ​

イベント​

メソッド​

エフェクト​

まとめ​

よくある質問​

この移行の例はどこにありますか？​

この移行に関するヘルプはどこで入手できますか？​

バグレポートはどこに提出すればよいですか？​

目次