画像をスライダー形式にするswiperをyarnで導入するところまで

yarnとは？

JavaScript(node.js)のパッケージマネージャで、2016年にFaceBookが公開したものです。
他にもパッケージマネージャーとしては「npm」とう言うものものありますが、今回は、yarnを使います。

yarnの仕組みは簡単で、$ yarn add 〇〇と言う形で、使いたいパッケージをインストールすると、package.jsonと言うファイルに、インストールしたパッケージに関する情報が記載され、$ yarn installを実行すると、開発環境下にパッケージ（関係するファイル一式）がインストールされ、パッケージを使うことができます。$ yarn installを実行すると、yarn.lockと言うファイルが生成され、固定されます。

実は、gemの管理とよく似ていて、gemの場合は、Gemfileに記載されたgemは、どの環境でも$ bundle installすればgem同士の互換性など考慮して良しなに調整してインストールしてくれて使えるようになりますが、yarnも似たような管理方法で、package.jsonに記載されているパッケージは、$ yarn installすれば、どの環境でも使えるようになります。

例えば、開発現場などで、ローカルにリモートリポジトリを$ git cloneして、手元で開発する場合も、$ yarn installすれば、package.jsonに記載されているnodeのパッケージをローカルにインストールして環境構築できます。

それでは、yarnを使って画像をスライダー形式にできる「swiper」と言うパッケージを導入していきます。

swiperの公式サイトに行くと、以下のようなデモが見れて、ソースコードも見れますので、かなり便利です！

yarnのinstall

まず、homebrewでyarnをPCにインストールします。

$ brew lsでyarnが既に入っているか確認できます。

画面では一番最後のところに「yarn」の記載があるので、この場合はインストールされていますね。
記載がない場合はインストールされていないので、以下コマンでインストールします。

$ brew install yarn

yarnでパッケージを導入

package.jsonを作成するために以下のコマンドを打ちます。（gemで言う所の$ bundle initに似てますね。）もともとファイルがあればやる必要はないです。

$ yarn init

次に、swiperを導入します。

$ yarn add swiper

こうすると、package.jsonにswiperの記載がなされるはずです！

インストールします。

$ yarn install

必要なファイルがnodeディレクトリ配下に作成されます！

導入したファイルの読み込み設定

マニフェストファイルに導入したファイルのpathを記載して、読み込みの設定を書きます。

例）

//=requireswiper/js/swiper.js//=requireswiper.js

ディレクトリのpathはnode部分は省略できるので、swiperから書きます。//= require swiper.jsは、後ほど、viewと連動させるためのファイルの読み込みを書いていますが、ここは各自でやり方は色々あると思います。

scssにもスタイルの読み込みを書きます。

@import'swiper/css/swiper';

この後の部分の記載を失念してしまうのが、ハマりポイントで、私もハマりました。

導入したnode以下のファイルを読み込むようにするための設定を書く必要があります

Rails.application.config.assets.paths<<Rails.root.join('node_modules')

これで準備は完了です。

あとはview側の実装や、jsファイルの作成などは、swiperの公式ドキュメントを見れば、コピペで実装できます！

https://swiperjs.com/demos/

yarnでswiperを導入するところまでの解説でした！