こんにちは、りです。
先日Swiper.jsは4.5.0から8.2.4(時点最新)へアップデートされました、（怖いバージョン差😂）、今回はその対応STEPSとバージョンの解説をまとめました。

概要

1.アップグレード対応STEPS:

STEP1: Swiperのアップデート
STEP2: クラス名を変える
STEP3: CSSとJSを読み込ませるように修正する

2.注意点:

V6.5.1未満場合脆弱性がある
V5.4.5以降はIE11では対応していなかった

3.参考資料

1.アップグレード対応STEPS

Swiperのリリース情報確認: 2022-06-13にv8.2.4をリリース、v4.5.0は2019-02-22😂.
今回のバージョン差は大きくなってしまいましたから、新旧バージョンの違いを比較するよりも、直接新しいものを使ったほうが早そうと思います。

1.1 Swiperのアップデート

従来の導入方法に従って、今回もYarnというパッケージマネージャーを使いました

公式サイトで紹介されている導入方法

yarnで最インストールする

$ yarn remove swiper #古いパッケージをアンインストールする
$ yarn add swiper #バッケージをインストールする
$ yarn install　#開発環境下にインストール

yarn.lockとpackage.jsonを更新されます。
※ package.jsonをテキストエディターで開き、したいバージョンに編集して、yarn installを実行しても良い。

1.2 クラス名を変える

下記のように、HTMLのクラスswiper-containerをswiperに変更する


  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
   ⬇︎
  <div class="swiper">  ##ここだけ
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
  </div>

1.3 8系のCSSとJSを読み込ませるように修正する

css

【V4】app/assets/stylesheets/該当ページ.scss

@import '/swiper/dist/css/swiper.min';

【V8】app/assets/stylesheets/該当ページ.scss

@import 'swiper/swiper-bundle.min';

js

【V4】index.js

import Swiper from 'swiper'

【V8】index.js

import Swiper, { Navigation, Pagination } from 'swiper'

2. 注意点

① V6.5.1未満場合は脆弱性があるので、早めにアップグレードして良さそう！

swiper における脆弱性

② V5.4.5以降はIE11では対応していなかったけど、2022 年 6 月 16 日（日本時間）にIEのサポートが終了しましたから、最高じゃん

3. 参考資料