【JS】よく使うプラグイン・ライブラリ

Javascriptのプラグインやライブラリはたくさんあります。
その中でも私がよく使うものをご紹介したいと思います。

スライダー、カルーセル

スライダー、カルーセルを実装するときは、Swiperを使うことが多いです。
通常のスライダーはもちろん、要素にフィットしないフリーモードや、ページネーションの代わりにスクロールバーが実装できたり、Vue用のコンポーネントもあるので便利です。

フォームバリデーション

フォームのバリデーションには、jQuery Validation Pluginが使いやすいです。
確認用メールアドレスのような値が等しいかのチェックやバリデーションのグループ化が簡単にできます。
また、オリジナルでバリデーションの定義することもできます。
Vueを使う場合はVeeValidate一択ですね。

Pjax系

Pjax（Pushstate + Ajax）でのシームレスなページ遷移ではBarbaJSが便利です。
遷移する際のコンテンツの削除前、削除後、変更前、変更後など細かくフックできる箇所があるので汎用性が高いです。

画像読み込み系

画像の読み込みの監視にはimagesLoadedを使ってます。
最初のローディングなど、複数画像の読み込みをプログレスバーで進捗状況を視覚的に表現する際にprogressイベントで実装することができます。

アニメーション系

アニメーションは大体CSSで実装することが多いですが、Javascriptで行う場合はGSAP（TweenMax）が多機能でアニメーションも滑らかでよく使ってます。
GSAPは単発のアニメーションだけでなく、チェーンメソッドのようにアニメーションをつなげることもできます。
また、ScrollTriggerやScrollToPluginのような拡張もあるのでこれ一つでなんでもできるイメージです。
ただ、ライセンスが独特なので使用する際は注意が必要です。

配列系

配列の操作ではLodashをよく使います。
オブジェクトのソートや検索などが簡単にできます。
多機能すぎてファイルサイズが肥大化するのがネックですが、必要なものだけ読み込むようにすれば比較的ファイルサイズが小さくなりますね。

polyfill

polyfillとは、モダンブラウザでは使えるけどIE11など対応していないAPIを使えるようにする代替コードです。
よく使うpolyfillをあげてみたいと思います。

IntersectionObserver

IntersectionObserverは、要素と要素の交差を検知するAPIです。
ビューポートに要素が出たり入ったりを検知できるので、スクロールでのアニメーションによく使います。

ResizeObserver

ResizeObserverは要素のリサイズを検知するAPIです。
resizeイベントはウィンドウのリサイズでは発火しますが、要素のリサイズでは発火しないのでResizeObserverを使って要素のサイズ変化を監視します。
弊社で実装を担当しましたASIAN KUNG-FU GENERATION 25周年特設サイトのようなスクロールを慣性スクロールにするようなサイトを構築する際に、要素の高さの変化を監視するのに便利です。

fetch

Fetchは非同期通信（Ajax）するのに便利なAPIです。
IE11では使用できないのでpolyfillで使えるようにしてます。

closest

closestは、条件に合う祖先要素を見つけるものですが、IE11では使用できないのでpolyfillで使えるようにしてます。

Promise

Promiseは非同期処理の結果を返してくれるAPIです。
複数の処理を直列につないだり、並列処理を行って全て完了後に特定の処理を実行できるので必須ですね。

ざっとあげてみましたが皆さんの参考になると幸いです。