何をしたか
今までに作った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の最近の流れを振り返る形になって楽しかったです＾＾
以下、参考にした記事です。