はじめに

プログラミングを勉強して2か月半ほどです。
私事ですが、先日プログラミングスクールを卒業しました。
毎日会っていた同期や仲間たちと会えなくて寂しいですが、引き続き学習を進めます。
そして、就職活動を頑張って、人や世の中の役に立つシステムやアプリの開発に携わりたいです。

前置きが長くなりましたが、今回はrails7でslickの導入をしたいと思います。
作成中のオリジナルアプリの使い方ページをslickで実装したかったので挑戦しました。
rails7での導入方法があまりサイトに載っておらず大苦戦しました。
なんとか導入出来たので、みなさんに共有したいと思います。

※初心者なので間違っているところがあれば、ご指摘いただけると幸いです。

slickとは

slickはjQueryの、スライダーを作成するためのプラグインです。レスポンシブにも対応可能で、カスタマイズの幅も広いため、世界的に利用されています。

こんな感じの機能です↓

それでは、rails7環境下でのslick導入をしていきます！

Let's start!!!

①jQueryの導入

config/importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.3/dist/jquery.js"

②slickの導入

app/views/layouts/application.html

<!DOCTYPE html>
<html>
  <head>
    <title>Qiita</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  </head>

  <body>
 <%= yield %>
  </body>
  
</html>

jQueryを導入した後にslickを読み込ませる必要があるので上記の順番で記述しましょう。

③application.jsへの記述

app/javascript/application.js

import "slick"

④importmap.rbへの記述

config/importmap.rb

pin "slick", to: "slick.js"

上記の③、④の記述でslick.jsを読み込むことができます。

⑤viewへの記述

app/views/welcomes/index.html.erb

<div class="container">
    <h3 class="ml-3 my-4">使い方</h3>
  <div class="slider">
    <%= image_tag 'sample1.png' %>
    <%= image_tag 'sample2.png' %>
    <%= image_tag 'sample3.png' %>
    <%= image_tag 'sample4.png' %>
  </div>
</div>

※このviewの記述は冒頭に載せているslickを導入したオリジナルアプリのものとは異なります。

⑥jsファイルにslickの記述を記入

app/javascript/slick.js

document.addEventListener('turbo:load', function () {
	$('.クラス名').slick({
	    
	    });
 
});

$('.クラス名').slick({
クラス名のところは、今回の場合はsliderになります。
みなさんがつけたクラス名に合わせて記述してください。

slickは様々なカスタムができるので調べてカスタムしてみてください！

以上でrails7環境下でのslick導入は完了です。

bootstrapを導入している方へ

私はslick導入前にbootstrap導入していたために、上記の手順のみではslickを読み込むことができませんでした。

ここからはbootstrap導入済みで上記の手順では上手くいかなかった方へ説明していきます。

①Gemfileを確認

Gemfile

# 中略
gem 'jquery-rails'

Gemfileにgem 'jquery-rails'の記述があれば削除しましょう。

②application.jsを確認

app/javascript/application.js

// 中略
//= require jquery3

application.jsに//= require jquery3の記述があれば削除しましょう。

以上でbootstrap導入した状態でもslickが導入出来ました。

おそらく、bootstrap導入時に上記の方法でjQueryを導入したため、jQueryを読み込ませる記述が重複していたことが原因と思われます。

終わりに

rails7環境下でのslick導入はこれにて終了です！
みなさん実装お疲れ様でした！！
解説が不足している部分が多く、申し訳ございません。
解説ができるように学習を進めていきますので、引き続きよろしくお願いします！

※この記事を読んで参考になったという方は、ぜひいいねをお願いします！
投稿者が喜びます。

【Ruby on rails】Rails7でslickを導入する（bootstrap併用可）