jsのライブラリってたくさんあるけど一体何つかったらいいんや！
っていうそこのあなた！
無限の選択肢がある中コレ！というものを選ぶのは大変ですよね…
僕もいろいろ導入して試したりしてみましたが…しっくりくるものがあったりなかったり…。
使い方に慣れてきたなと思ってもちょっと変わったことしようとすると対応できなかったりと苦労しました…（今でもしますが）。
これが「最適解！」かどうかまではわかりませんが僕が普段の実務でよく利用するjsライブラリを簡単にまとめてみましたので参考にしてみてください。
webサイト制作で利用するjsライブラリは多種多様…厳選5つにまとめてみました。
とりあえず今回はこの処理ならこれ！というように5つのライブラリをご紹介します。
動作や汎用性等考慮しまして、扱いやすくて学習コストをさくに値するライブラリを紹介しようと思います！
紹介するライブラリですが、今回はwebサイト制作という前提でご紹介します。
- TweenMax
- ScrollMagic2
- jQuery
- Slick
順繰りに見ていきましょう。
TweenMax
参考
GreenSock TweenMaxGreenSock TweenMax
googleも推奨しているらしいGreenSock社が誇るアニメーションライブラリ。
現状はめちゃくちゃ凝った動作でなければアニメーション系のライブラリでは一択かと思います。
参考
Googleも推奨！アニメーションライブラリTweenMaxの使い方Googleも推奨！アニメーションライブラリTweenMaxの使い方
参考
最速のアニメーションライブラリはこれだ！ JSライブラリの性能をDOMとWebGLで比較検証最速のアニメーションライブラリはこれだ！ JSライブラリの性能をDOMとWebGLで比較検証
まさに最強のアニメーションライブラリである学習コストも低く、軽快で他のライブラリとの組み合わせも◯。
jQueryにも依存しないので他の選択肢が霞みますね…。
背景のパララックス程度なら数行で済み、かつコーダー的には厄介なiOSでもパララックス動作します。
ライセンス的には基本的には無料でほぼ使えます。
商用であっても大丈夫ですが、「閲覧すること自体」に課金が必要なページではライセンスの購入が必要みたいなので有料会員ページ等で利用されたい方はご注意ください。
ページ自体は無料で見れるパターンが大多数だと思うのでほとんどの方は大丈夫かと思います。
参考
GreenSock LicenseGreenSock License
ScrollMagic2
こちらもjQuery非依存。
画面スクロールで「特定の要素に達したら発火」する等の動作が簡単かつスムーズに行えます。
上記のTweenMaxとの連携スクリプトもあることに加え、デバッグ用のスクリプトまであるのでどこで何が発火するかが見た目で確認できます。
これが非常にでかい！！
単純な到達点発火でのクラス切り替えや固定等は単独でも十分こなせて、スクロールで繰り返し動作させるかどうかも選べます。
先述したTweenMaxとの連携スクリプトで定義したアニメーションも使えますし、非常に使い勝手がイイ！
スティッキーのようなメニューが途中で画面上部に固定するようなクラス切り替えもめちゃくちゃスムーズですし非常にオススメです。
jQuery
なんだかんだいいながらWebサイト制作でのjQueryはまだまだ現役です。
最近は他の三大フレームワーク、特にVueは局所的にも使えるみたいなので使用場面はだんだん減っていますが、記述の単純さによる書きやすさ、導入のしやすさ、使ってきた歴史等の功績は大きいです。
ただアニメーション系は重いのでjQuery1つで済ませるというよりは適材適所で他に任せるほうがいい部分もあります。
Slick
数多あるスライダー系プラグインですが、僕はよくこちらを使っています。
jQuery依存ですが標準的に必要とされるスライダーの機能は備えており、さらにオプションも豊富で使いやすく、普段遣いのWebサイト制作で困ることはほとんどありません。
僕の場合まだまだjQueryを入れて制作することもありますので…依存したくない方は「Swiper」もオススメです。
まとめ
どれも数年間の制作業務においていろいろ試してきた結果行き着いた、最近非常によく使うライブラリです。
使い勝手もさることながら利用者も多いため日本語の情報もそこそこ出ますのでわからないことがあった場合でも調べやすいのも利点ですね。
この手の動作をjQuery込みで一から記述するとめっちゃ大変なので是非導入して感動してみてください！
