はじめに
Swiperの公式ドキュメントをみてみてもいまいち「？」だったため、GPTやほかのサイトを回ってみて私なりにまとめたものをお伝えしたいと思います。
Swiper名前の由来
読んで字のごとく、「Swipe」からきています。
日本語に訳すと「指でなぞる」。スマートフォンやタブレットでのスワイプ操作を前提に設計されているため、この名前が付けられたと考えられています。
Swiperとは
スライドショーが作れるJavaScriptのプラグインです。
他にスライドショーが作れるプラグインには「slick」があります。
slickはjQueryに依存するプラグインですが、SwiperはjQueryに依存しないプラグインなので、SwiperはjQueryを読み込まない分動作が軽くなっています。
導入について
記事最初であげた公式の方法や下記のサイトとは、また違った方法でインストールする課題であったので簡単に解説します。
- 課題においてJavascriptやCSSなど静的ファイルの管理・圧縮を行うシステムとしてアセットパイプラインSprocketsを使用していた（GemfileにSprocketsに関するgem有）
-
yarn add swiperでSwiperをインストール
swiperのJavascript関係のファイルはnode_modulesディレクトリ内にインストールされる -
アセットパイプラインSprocketsはnode_modulesディレクトリ内の情報をデフォルトで検索パスに結んでいない
- 「config/initializers/assets.rb」に
Rails.application.config.assets.paths << Rails.root.join('node_modules')を入力
これによってnode_modulesディレクトリ内を読み込むことが可能になる - 「app/assets/javascripts/application.js」に
//= require swiper/js/swiper.jsを入力
これによって、アセットパイプラインSprocketsがやっとnode_modulesディレクトリ内のswiperに関する情報を読み込むことができる。
さいごに
Swiperインストールに限らず、公式とちょっと違った方法でインストールを行わなければいけないとき、頭の中でごちゃまぜになって適当にすませてしまうと、後々自分のためにならないと感じています。
今回これだけの事でしたが、私には大変難しかったのでアウトプットもかねて記事にしてみました。参考になれば幸いです。
※何か違う点があった場合はすいません💦