Rails6.1でSwiperライブラリを使いたい

# 環境
macOS Big Sur Ver11.2.1
Rails6.1.1
webpacker5.0

# この記事の目標
カルーセルが手軽に実装できるライブラリ「Swiper」をRailsアプリケーションで使うべく、javascriptのファイルを新しく作成し、ビューで読み込ませる。
今回はapplication.html.erbではなく、個別のビューファイルにｊsを読み込んでイベント発火させるのが目標。

```ruby:app/views/layouts/application.html.erb
<!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の導入手順
公式ページはこちら：[公式ページ]("https://swiperjs.com/get-started")
##### ①CDNを読み込む
CSS用とJavascript用をそれぞれ別のファイルに貼り付ける。
【CSSはこっち↓】

```ruby:app/views/layouts/application.html.erb
<!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はこっち↓】
※読み込ませたいビューファイルに貼り付けてください（今回は以下のファイル）

```ruby:app/views/users/index.html
<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 を以下のように編集。
一番最後の行に注目！

```ruby: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というファイルを読み込んでね」ということ。

これでカルーセルの実装完了です。以降は自身で色々とカスタマイズしましょう！