【Ruby on Rails】jQueryを使用せず、railsでv7のSwiperを導入する方法

Swiperとは
導入
インストール
node_modulesのPATHを追加
js、cssファイルの読み込み
swiper.jsファイルの作成
Viewに記述
CSSに記述
実装完了
おまけ：swiperを初期化するタイミング
まとめ

Swiperとは

Swiperは、Webサイト、Webアプリ、モバイルアプリで利用できる無料のタッチスライダー機能です。

jQueryに依存しないで、スライダー機能を実装できます。

デモ

このようなスライダー機能が簡単に実装できます。

注意：2021年12月24日現在　swiperの最新バージョンはv7.3.4です。

アップデートされると実装方法が変更されることがあるので、公式をチェックしてください。

公式

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

導入

Swiperの導入方法は二種類あります。

CDNから利用する方法
インストールして読み込む方法

今回はインストールして読み込む方法を紹介します。

インストール

初めにswiperをインストールします

npmの場合

$ npm install swiper

yarnの場合

$ yarn add swiper
$ yarn install

インストール後、node_modulesディレクトリ配下にswiperディレクトリがあるはずです。

node_modulesのPATHを追加

Swiperはjs、cssファイルを読み込むことで使用できるようになります。

まずは、アセットパイプラインで検索されるように、node_modulesのPATHを追加します

config/initializers/assets.rbに記述することで、標準のassets/*に加えて追加のPATHをパイプラインに追加することができます。

#追加
Rails.application.config.assets.paths << Rails.root.join('node_modules')

PATHが追加されているか rails consoleで確認

$ rails console
[1] pry(main)> Rails.application.config.assets.paths // 実行
=> 
 ~~
 #<Pathname:/Users/tkg/ ~省略~ /node_modules>, // この記述があれば、OK
 ~~

js、cssファイルの読み込み

jsファイルはapplication.js、cssファイルはapplication.cssに読み込み設定を記述します。

すべてのモジュールを使用したいので、swiper-bundleを読み込みます。

// 追加。順番を変更するとうまく動きません
//= require swiper/swiper-bundle.min.js  // swiperディレクトリのswiper-bundle.min.jsを読み込み
//= require swiper.js                    // 後ほど作成するjsファイル

/* 追加
@import 'swiper/swiper-bundle.min.css';

swiper.jsファイルの作成

application.jsに記述したswiper.jsをassets/javascripts配下に作成します。

公式の説明でswiperを初期化する必要があるので、そのコードをコピペ。

document.addEventListener('DOMContentLoaded', function() {      // 発火タイミングを指定    
  const swiper = new Swiper('.swiper', {                        // 初期化
                 // オプションを記述
                 loop: true,                                    // ループを許可
  })
});

<head>タグ内で、swiper.jsファイルを読み込む際は　document.addEventListener('DOMContentLoaded', function() { }の記述が必要です。

Viewに記述

<head>内でjsとcssを読み込みます。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <!--アセットされたjsとcssを読み込み -->
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

swiper、swiper-wrapper、swiper-slideの3つのクラスを記述し、要素はswiper-slideクラスの中に配置します。

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSSに記述

状況によって好きに記述してください。

.swiper {
  width: 600px;
  height: 300px;
}

実装完了

エラーなど起きる場合は、一度サーバーを再起動してみてください。

おまけ：swiperを初期化するタイミング

公式のデモでは、<body>の一番下でswiperの初期化のコードを記述しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <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 class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>

    <!-- Swiper JSを読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Swiper 初期化-->
    <script>
      var swiper = new Swiper(".mySwiper", {});
    </script>
  </body>
</html>

このように記述するのは、DOMが準備されてから<script>タグを実行される必要があるからです。

厳密に言うと、初期化コードにmySwiperというクラスを指定しているので、その要素が存在しないと実行されないからです。

<head>内でswiper.jsを読み込む場合、DOMがまだ準備される前に読み込まれてしまうので、swiper.jsが発火するタイミングを指定してあげる必要があります。

そこで出てくるのが、document.addEventListener('DOMContentLoaded', function() { }です。

DOMContentLoadedイベントはHTML の初期文書が完全に読み込まれ解釈された時点で発火し、スタイルシート、画像、サブフレームの読み込みが完了するのを待たないので、<body>の一番下に<script>タグを記述する方法と同じような動きをします。

詳細説明は以下のURLでされています