特定のブレークポイント以下でSwiperを動作させないコード

カルーセル系の実装はSwiperを使用しているのですが、「768px以下ではカルーセルさせて、それ以上のときはカルーセルさせない。しかもそれがページ内に同じクラスで複数ある」というような場合にかなりコードを工夫しないといけなかったので、供養がてらコードを残します。

ちなみに、上記のような複雑なことをしない場合(ただ単に複数同じクラスのSwiperを設置する)はこんなごちゃごちゃと書かずに公式サイトのサンプルコードを書けば普通に動作します。

Swiperってなによ?はこちらで紹介しています。https://chiilog.com/2018/04/16/965/

公式サイトはこちら。https://swiperjs.com/

主に自分用の備忘録だしJS雑魚だし苦労して書いた(信頼してはいけない、の意)なのでへーこんなことしたんだー程度に見てください。
一応動いてる(と思う)けどきれいなコードではないしもっとシンプルに書けるかも。

やったこと

まず、最初はloadとかresizeをjQueryにまかせていました。私の苦労のはじまりはここでページ中に複数設置してテストしなかったこと。(ブラウザチェック中に気付いて死んだ)

リサイズしたらdestroy部分が何故かエラーを吐く。ナンデ??あっ、複数設置してるときはそれぞれdestroyしないとダメ?という理解で早々に$('.swiper-container').each()で書き換えたものの、Firefoxでバグるバグる。(あとで見直すとChromeとかでももちろんバグってた)

console.logで carouselBool の真偽値をresizeごとに取ってみると、意図しないところで変な動きをしているのを発見。(trueのはずなのにtrueになったあとfalseになるとかそういう意味不明な動作)そもそもなんでそんな動きになってるんだ????でマジでわからなくて撃沈。

それからSwiperにresizeイベントがあるな、って気付いて書き直したけど、そもそもdestroyしたあとにまたカルーセルを動かすことができなくてこれも撃沈。(destroyしたら新しくSwiperを作り直さなければいけないようだ)

ブチ切れた結果、「そうだjQueryをやめよう」

jQueryはJSわからなくてもある程度手軽に書けるけど、やっぱJSわかってないとこういうときに詰む。

で、割と初めてレベルで(コピペとかで使ったことはあるけど)自前でaddEventListenerを書きました。書いてみて思ったけどJS別にめちゃくちゃハードル高いわけじゃないな?(※私が案件で書かないといけないレベルに限る)

リサイズやらロードやらってもっともっと複雑に書かないといけないと思ってたわけですよ。でもイベントリスナーにタイプ指定するだけ。これは勝った。で、完成したのがGistのコード。console.logで真偽値が正確に取れるかどうかのチェックから始めて、classListとかforEachの書き方を調べ、createCarouselって名前で関数化………。正直泣いたけどちゃんとできたのでヨシ!

JSできねー!!!って言ってる場合じゃなくなってきたので、楽するためにちゃんとTypeScript(とJest?)覚えようと決意しました。(何度もそれTypeScriptのほうが楽だよと洗脳された結果)