swiperをyarnで導入して、画像をスライダー形式にする！

yarnとは？

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

yarnの仕組みは簡単で、

１、使いたいパッケージをインストールする

$ yarn add 〇〇

２、package.jsonと言うファイルに、追加したパッケージに関する情報が記載される

３、開発環境下にパッケージ（関係するファイル一式）をインストール

$ yarn install

もしくは

$ yarn

コマンドを打つと、実行時に、yarn.lockと言うファイルの有無を確認し、なければ、先ほど追加された、package.jsonを見て、記載されているパッケージを開発環境下にインストールします。yarn.lockがすでに存在している場合は、yarn.lockを見て、インストールします。

似た挙動をするコマンドで、

$ yarn upgrade

と言うものもあるのですが、こちらは、yarn.lockがあっても無視して、もう一度、package.jsonを見て、インストールします！バージョンなどをあげた場合に、yarn installだと、yarn.lockを見てインストールするので、package.jsonに書いた新しいバージョンが適用されません。なので、こちらのコマンドを実行して、新たに、package.jsonを見て、yarn.lockを更新することが必要です。

以上のような流れです！

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

例えば、開発現場などで、ローカルにリモートリポジトリを$ git cloneして、手元で開発する場合も、$ yarn installすれば、yarn.lock`の有無を確認して、記載されている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を記載して、読み込みの設定を書きます。

例）

//= require swiper/js/swiper.js
//= require swiper.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の公式ドキュメントを見れば、コピペで実装できます！

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