Swiperのコードは階層構造になっていますか

はじめに

Swiperを用いてトップ画像をスライダー形式に変更しようとした時に思わぬところで詰まった時の話です。

環境

ruby 3.14

rails 7.0.3.1

swiper 11.0.7

用語

スライダー形式とは

複数の画像がスライドのように、一定の間隔で切り替わるものです。ホームページのトップ画面などでよく見かけます。スライドしている画像をクリックすると、関連ページに飛べるようにも出来ます。

Swiperとは

jQueryプラグインの1つ。

jQueryとは、「表示されているページを使いやすくする」ための機能であり、jQueryプラグインとは、「Webサイト作成で特定の機能が欲しいときに、jQueryと併用して利用できる」ものです。簡単な設定で導入できるとても便利なものです。

Swiperのサイトに書いてあるコードでシンプルな実装が出来る他にも、npmやyarnなどのパッケージマネージャーを使ってSwiperをプロジェクトにインストールして、JavaScriptやCSSファイルを自分のプロジェクトに組み込む事でより高度な機能やカスタマイズが出来ます。

今回はyarnを利用してインストールします。

yarn add swiper

実装、しかし

ここから実装していき完成かと思われましたが、動きません。

トップページを見ると画面が縦並びに5つ並んでいる状態になっています。

node_modulesがRailsアプリケーションのアセットパスに加えられているか、Javascriptは読み込まれているかなどを確認しても問題なさそうです。

それでは一体なぜでしょうか。

何が原因だったか

結論から言うとビューのインデントに問題がありました。

app/views/layouts/_header.html.slim

header
  .swiper-container
    .swiper-wrapper
    - if current_site.main_images.present?
     - current_site.main_images.each do |main_image|
       = image_tag url_for(main_image), class: 'swiper-slide'
    - else
      = image_tag '/images/cover.jpg', class: 'swiper-slide'
    .swiper-pagination
    .swiper-button-prev
    .swiper-button-next

    .container.blog-title
    h1 = link_to current_site.name, root_path
    p.lead = current_site.subtitle

<!-- 省略 -->

4~6行目が問題点でした。
Swiper公式サイト：スワイパーHTMLレイアウトの追加によると、

swiper（今回はswiper-containerという書き方を採用） > swiper-wrapper > swiper-slide と階層構造になっています。

では開発者ツールのElementsを確認してみましょう。

これでは階層構造になっていません。

（この状態で開発者ツールのConsoleをチェックすると、スワイプする画像がない、もしくは画像の数が足りないといった意味の表示がされていました。画像は表示されているのになぜだとこの時僕は右往左往していました。）

早速、4~6行目を訂正しましょう。Tabキーあるいは半角でスペースキーを入力します。

app/views/layouts/_header.html.slim

header
  .swiper-container
    .swiper-wrapper
      - if current_site.main_images.present?
        - current_site.main_images.each do |main_image|
          = image_tag url_for(main_image), class: 'swiper-slide'
      - else
          = image_tag '/images/cover.jpg', class: 'swiper-slide'
    .swiper-pagination
    .swiper-button-prev
    .swiper-button-next

    .container.blog-title
    h1 = link_to current_site.name, root_path
    p.lead = current_site.subtitle

<!-- 省略 -->

ブラウザで確認すると、ちゃんとスライド機能が実装されていました。

開発者ツールのElementsを確認すると、きちんと階層になっている事が確認できます。

まとめ

インデントに対して今までは、i18nを使用するためのja.ymlファイル、rubocop対策以外は"コードを見やすくするためのもの"という認識でいたので、今回は盲点でした。

補足

今回はActiveStorage::Attachmentから取得している画像をトップ画面にスライド形式で表示させます。また今回ビューはslimの記法で書きました。

参考にさせていただいた記事