Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

WordpressやLaravelなどでJavaScariptやjQueryが動かない時の対処

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。

ウェブのフロントエンド制作においては必須クラスに重宝すると思います。

今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら

｢あれ？動かない、、、｣

コンソールを見てちょいちょい出てるエラーに対処しても動かず。

表題の通り、小一時間必死に調べて無駄に過ごしました。。

解説記事とか書いていた手前でお恥ずかしい。

原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

『JavaScript スライダー動かない』

『Slick.js 効かない』『Swiper エラー』

こういった検索をかけてすぐ解決する場合もありますが、なかなか解決しない事もあります。

検索など調べる事も大切ですが、JavaScriptのライブラリなんかが動作しない場合、多くの場合はブラウザの検証からコンソールエラーを確認すれば原因が特定出来ます。

ただ、、、今回エラーのない状態でも動作しなかったのでググッては試し、頭を抱え足踏みしてしまいました。

原因は何だったのか、、犯人は誰だったのか、、それは、、

そう、犯人はVue.jsでした。

そもそも今回のアプリケーションには基本的にVueは使っていないつもりだったのですが、がっつり全体をVueの管轄下に置いてしまってました。

laravel-uiのインストール時にそうなっちゃったのかもしれません。

他のプロジェクトではLaravelMix等で使用していたので、いつも通りとあまりファイル構成など気にならずにいました。

しかしよく見ると｢めっちゃVue入ってるやん｣、、と反省。

そしてLaravelのBladeテンプレート内だというせいもあってかSlickなどのスライダー達は無反応になっていたわけです。

わざわざSwiperに置き換えて試したり、小一時間ほんとに試行錯誤しました。

以前記事にもしたJSライブラリのAOSはVue.js内でも普通に動いていたのでライブラリ、フレームワーク同士の相性のようなものがあるのだと解釈しました。勉強になります。

調べてるとよく出てくる原因としてはWordPressの場合の記事が多かったです。

これは僕も何度も経験してるので対策も身についていますが、WordPressに元からの入っているjQueryやほかのライブラリと呼び出し方法が衝突を起こしていたりする場合がほとんどです。

この場合通常のjQueryの呼び出しに使う｢$( )｣を｢jQuery( )｣とするなどで衝突を回避して動作させる等の対処法があります。

今回のLaravel内でのVue.jsが原因のケースでも、WordPressでよく起こるケースでも、ライブラリやフレームワーク間のJS処理の衝突が原因といえます。

衝突(コンフリクト)

まずはこれを疑っていく。そして何より自分のプロジェクト管理をしっかり行う。

これが問題解決やそもそもの問題回避につながるんじゃないかと思います。

小一時間無駄にした分際ではありますが、ご参考頂ければ幸いです。

最後までお読みいただきありがとうございました！

リンク

ABCウェブエンジニアblog