環境
macOS Big Sur Ver11.2.1
Rails6.1.1
webpacker5.0
この記事の目標
カルーセルが手軽に実装できるライブラリ「Swiper」をRailsアプリケーションで使うべく、javascriptのファイルを新しく作成し、ビューで読み込ませる。
今回はapplication.html.erbではなく、個別のビューファイルにｊsを読み込んでイベント発火させるのが目標。
<!DOCTYPE html>
<html>
<head>
<title>PracticeJs</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' %>
</head>
<body>
<%= yield %>
</body>
</html>
ここで読み込むとすべてのビューでjsの読み込みが行われてしまう。
これから追加するjsファイルはあくまで特定のページのみで読み込みたい。
追加したいJavascriptファイル
今回は、カルーセル用ライブラリ「swiper」をRailsアプリケーションに追加します。
以下の手順にあるとおり、swiperを使うには新しくjsのファイルを作成する必要があります。
swiperの導入手順
公式ページはこちら：公式ページ
①CDNを読み込む
CSS用とJavascript用をそれぞれ別のファイルに貼り付ける。
【CSSはこっち↓】
<!DOCTYPE html>
<html>
<head>
<title>PracticeJs</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.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
<%= yield %>
</body>
</html>
【Scriptはこっち↓】
※読み込ませたいビューファイルに貼り付けてください（今回は以下のファイル）
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
②ビューファイルに基本となるHTMLとCSSを記述する（公式ページ見てね）
公式ページからコピペしましょう。
③Swiper用の新規のJavaScriptファイルを作成
作成先：app/javascript/packs の中に任意のフォルダを作ってその中にファイルを作成。
（例）app/javascript/packs/swiper/swiper.js
内容：公式ページからコピペする
④ヘルパーメソッドを記述
app/views/users/index.html を以下のように編集。
一番最後の行に注目！
<h1>Swiperを使ってカルーセル</h1>
<!-- 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>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<%# swiperのjs読み込み %>
<%= javascript_pack_tag "swiper/swiper.js" %>
<%= javascript_pack_tag %>はRails6以降から登場したヘルパーメソッドで、javascriptファイルの読み込み時に使用します。
ここでの意味は、「app/javascript/packs/swiper に置いてあるswiper.jsというファイルを読み込んでね」ということ。
これでカルーセルの実装完了です。以降は自身で色々とカスタマイズしましょう！