@yuufuji0000 (yuu)posted at 2021-04-17

Rails開発でSwiperが作動しない原因を知りたい

Q&A

Railsの開発環境でSwiperが動かない

現在、Railsを用いてアプリケーション開発を行っているのですが、Swiperを導入して画像のスライド機能を入れたいと思ったのですが、公式サイトに記載の通りに各フォルダにコードを記述してみたのですがスライドが動かない現象が起きてしまいました。

もし、Swiperを使用してビューファイルの作成をしたことがある方がおりましたら、解決に至るヒントは原因をご指摘頂けたら幸いです。

開発環境
rubymine
ruby(3.0.1)
rails(6.1.3.1)

発生している問題・エラー

・画像の<>をクリックしてもスライドが作動しない状態です。
エラーを確認したところ、Swiperが定義されていないと表記されており、application.html.erbでSwiperが読み込まれていないのではと考えております。

Started GET "/main.js" for ::1 at 2021-04-17 12:12:53 +0900

ActionController::RoutingError (No route matches [GET] "/main.js"):

・またmain.jsに関するルーティングのエラーと表記されており、main.jsを探せていない原因もあると考えておりますが、javascriptのルーティングのエラーは初めて目にしたので何が原因なのか掴めずにいます。

該当するソースコード

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Locat</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  </head>

  <body>
    <%= yield %>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

app/views/upload/index.html.erb

<body>
  <%= render "shared/header" %>
  <!-- Slider main container -->
  <div class="swiper-container">
    <!-- 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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
  <h1>Upload#index</h1>
  <p>Find me in app/views/upload/index.html.erb</p>
</body>

app/javascript/main.js

const swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
});

app/javascript/packs/applications.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
require("../main")

app/config/routes.rb

Rails.application.routes.draw do
  get 'upload/index'
  root to: "upload#index"
end

試してみたこと

・main.jsを削除して再定義してみたが、Swiperが定義されていないと表示されてしまい、解決に至らなかった。

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="main.js"></script>

・Swiperを起動するためのコードをindex.htm.erbのbody内に記述して挙動を確認してみたが変わらずエラーが起きてしまった。

Are you sure you want to delete the question?