何をしたか

今までに作ったRailsアプリは

Sprockets + JSのライブラリはCDNでレイアウトファイルから読み込み
Webpacker + JSのライブラリはnpmで読み込み

のパターンしか作ったことがなかったのですが、この度、

Sprockets + JSのライブラリはnpmで読み込み

というアプリを作ることになり、やり方をメモしようと思います。
具体的にはhttps://swiperjs.com/というライブラリの導入プロセスを紹介していきます。

npm + Rails の初め方

npm自体は、node.jsをダウンロードするとついてきます。Railsの環境構築時にnode.jsはインストールされているはずなので、

$ npm -v

でバージョンが表示されたらOKです。

ライブラリのインストール

インストールしたいライブラリをnpmで導入します。

$ npm install swiper

npmバージョン４からは--saveオプションをつけなくてもpackage.jsonを更新してくれます。

アセットパイプラインにパスを追加

node_modules配下のパスを見ながら、アセットパイプラインにパスを追加します。今回のswiperの場合、必要なファイルswiper-bundle.jsは下記の位置にありました。

node_modules
└── swiper
    └── swiper-bundle.js

なので、application.jsには、以下の様に記入します。

assets/javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require swiper/swiper-bundle.js  # 追記
//= require_tree .

初期化に必要なファイルを追加

初期化に必要なコードがあれば、assets/javascripts内に別ファイルを作るか、application.js内に、記載します。今回はapplication.js内に記しました。

assets/javascripts/application.js

$(function() {
  new Swiper('.swiper-container', {
    loop: true,

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

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

  })
})

完成

これで、無事swiperが動作する様になりました＾＾

感想・参考記事等

RailsとJSの最近の流れを振り返る形になって楽しかったです＾＾
以下、参考にした記事です。

アセットパイプライン - Railsガイド
Railsで利用するフロントエンドのライブラリをnpmからインストールする
Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳）