フロントエンドに必要なとりあえずのjsプラグイン2020

2020年3月時点でまだ現役なプラグイン。
非常にお世話になっております。
雑いのでもう少しちゃんと書きたい。
jQuery もそこそこ多めです。


## ▼ ユーティリティー系

### bowser.js
- http://lancedikson.github.io/bowser/docs/bowser.js.html
- ブラウザ判定
- [日本語解説] https://co.bsnws.net/article/231

### Moment.js
- https://momentjs.com/
- jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。
- [日本語解説] http://blog.asial.co.jp/1158

### date-fns
- https://github.com/date-fns/date-fns
- dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートできる。
- [日本語解説] https://co.bsnws.net/article/195

### lodash.js
- https://lodash.com/
- 配列やオブジェクトの整形 / イデオム系の実装 / テンプレートエンジン がまとまった軽量ライブラリ
- Underscore.js が使えない案件で使う。
- [日本語解説] https://techblog.kayac.com/2017-12-2_lodash

lodash.js も使えないケースでの参照
→ jQueryで使える配列系便利関数 
https://qiita.com/sasaplus1/items/68dcae1eaae018a513e9

### 30-seconds-of-code
- https://github.com/30-seconds/30-seconds-of-code
- メソッド集。全ての処理が1-数行のコードで書かれている。
- [日本語解説] https://co.bsnws.net/article/273



## ▼ 機能系

### platform.js
- デバイスとかブラウザの判定してくれるライブラリ。

https://github.com/bestiejs/platform.js

### Picturefill.js 
- pictureタグのsrcsetポリフィル (IEとAndroid用)
- [日本語解説] https://www.tam-tam.co.jp/tipsnote/javascript/post13513.html  
Android 7.x 以降でクロームがデフォルトになったので IE専用か  
https://caniuse.com/#search=srcset

### imagesLoaded
- https://imagesloaded.desandro.com/
- 画像が読み込まれたイベントを確実に取得する。
CSSのbackground imagesの画像取得タイミングも取れる。
- jQueryプラグイン/ピュアjs どちらもある。
- ライブラリ使わずにゴリゴリにやろうとすると、srcクリアしてjsで付け直すという処理が必要  
https://qiita.com/s_s_k/items/b837278c66139c50f174

### PACE.js
- 自由度の高いローディングをサクッと作れる。Ajaxとかの非同期通信（SPA）でも使える。
- https://github.hubspot.com/pace/docs/welcome/
- [日本語解説] http://gimmicklog.main.jp/javascript/614/
- [日本語解説] https://minory.org/pace-js.html

### fullclip.js (jQuery plugin)
- 画像を縦横画面いっぱいに表示させるプラグイン
- Full Clip - fullscreen body background image jQuery plugin
- https://github.com/bdimitrovski/full_clip
- 複数枚画像のフェードスライドオプションがある。

### perfect-scrollbar
- 要素内でスクロールをさせる。スクロールバーのクロスブラウザ対応という意味ではほぼ入れる。デフォルトのUIが綺麗で、タッチデバイス用のオプションが充実している。本当に助かる。
- https://github.com/utatti/perfect-scrollbar/tree/0.8.1

### smooth-scroll.js
- 画面内のアンカー移動にアニメーションを追加する。
- https://github.com/cferdinandi/smooth-scroll
- [日本語解説] https://sakic.jp/blog/web/smooth-scroll

## ▼ スライド

### swiper
- http://idangero.us/swiper/
- 非 jQuery
- 3.0系は Flexboxを使用
- [日本語解説] https://www.willstyle.co.jp/blog/724/

### slick.js (jQuery plugin)
- http://kenwheeler.github.io/slick/

### Infiniteslide.js (jQuery plugin)
- https://wood-roots.com/sample/infiniteslidev2/
- Slick をハックして使うもできるけど、無限に流れ続ける系のスライドはこちらの方が良い。

### BeerSlider.js
- https://pepsized.com/beer-slider-responsive-accessible-before-after-slider/
- 画像の差分を操作して見せるスライダー
- [日本語解説] https://coliss.com/articles/build-websites/operation/javascript/responsive-accessible-before-after-slider.html

## ▼ モーダル

### Magnific Popup (jQuery plugin)
- https://dimsemenov.com/plugins/magnific-popup/
- https://dimsemenov.com/plugins/magnific-popup/documentation.html
- [日本語解説] http://mfl.revee.jp/blog/magnific-popup/

### iziModal.js (jQuery plugin)
- http://izimodal.marcelodolce.com/

### animatedModal.js (jQuery plugin)
- http://joaopereirawd.github.io/animatedModal.js/
- イン/アウトのアニメーションがオプションでついてる

### modal-video.js (jQuery plugin)
https://appleple.github.io/modal-video/
- 動画再生だけなら楽。
- React 版もある。
- 動画再生のオプションが豊富
- ロード完了したら流すとかはできない。ラッパー書く必要がある。

### vanillabox (jQuery plugin)
- http://cocopon.me/app/vanillabox/demo.html

### fullmod.js (jQuery plugin)
- https://github.com/OmarMuscatello/FullMod
- フルページモーダル


## ▼ DOMアニメーション / トランジッション

### velocity.js
- [日本語解説] http://enum-kabu.com/blog/post-1229/
- [qiita]https://qiita.com/kyota/items/754e0e6cb7a144eda850

### anime.js
- [qiita] https://qiita.com/kyota/items/c46f44340a384e059a5e

### TweenMax
- https://greensock.com/get-started-js
- 商業利用時のライセンス(http://w3q.jp/t/5996)

#### 有名どころ3つ↑ どれ使う？
- https://ics.media/entry/14993/2

### lottie (with bodymovin:AE-plugin)
- https://github.com/airbnb/lottie-web
- [日本語解説] http://motida-japan.hatenablog.com/entry/2017/02/19/145537
- AEから json書き出して実行するだけ。マイクロインタラクションとかに最適。




## ▼ パララックス系 / アニメーショントリガー

### マウス操作タイプ

#### parallax.js  
- http://matthew.wagerfield.com/parallax/

### parallax_background.js
- https://lemehovskiy.github.io/parallax-background/
- オプションあって便利そうだけど、読みこむ外部のjs多い感じ。


### universal-tilt.js
- ブロック要素をインタラクティブに傾ける。
- https://jb1905.github.io/universal-tilt.js/
- ES6 / jQuery

### スクロールタイプ

#### inview.js (jQuery plugin)
- https://github.com/protonet/jquery.inview
    - 画面に入った時 .on / .one (一回限り) 
    - 画面から出た時 .off
- ちょっとバギー? / 要素の上下が画面内に出るイベントが取得できるハズだが動かない。

### Emergence.js
- https://xtianmiller.github.io/emergence.js/
- 要素が画面に表示されているか判別+操作できる。inview.jsより細かい設定（特定の要素内にいるかの判定も可能）が可能。


#### wow.js
- http://mynameismatthieu.com/WOW/
- animate.css と よく使われる。（ https://daneden.github.io/animate.css/ )

#### scrollmagic
- http://scrollmagic.io/
- wow.js もそうだが、イベントのスタートを細かくpx単位でオフセットできるのがいいところでもありつつ、レンポンシブが結構大変。



## ▼ 画面高さ100％スクロール

### fullPage.js (jQuery plugin)
- https://alvarotrigo.com/fullPage/
- [日本語解説] http://cly7796.net/wp/javascript/plugin-fullpage/
- 有料のエクステンションがある。

### scrollify.js (jQuery plugin)
- https://github.com/lukehaas/Scrollify



## ▼ 画面遷移

### smoothState.js (jQuery plugin)
- https://github.com/miguel-perez/smoothState.js
- [日本語解説](http://www.moongift.jp/2017/09/smoothstate-js-%E6%BB%91%E3%82%89%E3%81%8B%E3%81%AA%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%82%92%E6%8F%90%E4%BE%9B/)  

### barba.js
- https://github.com/luruke/barba.js
- http://barbajs.org/
- [日本語解説](https://www.willstyle.co.jp/blog/1080/)





## ▼ アニメーション / GL

### threejs
- https://threejs.org/

### pixi.js
- http://www.pixijs.com/
- verによってコンソールに出る pixi.js の noticeの消し方が違うので、ドキュメントよく読む。

### particles.js
- http://vincentgarreau.com/particles.js/
- [日本語] https://liginc.co.jp/191958


### dat.gui
- ジェネる時はパラメータは外出しに。
- https://github.com/dataarts/dat.gui
- [日本語解説] http://webhacck.net/archives/1329221.html

### Stats.js
- フォーマンスモニタ。60fps出ているか。
- https://github.com/mrdoob/stats.js
- [日本語] http://tmlife.net/programming/javascript/lasted-stats-js-usage.html

#### データビジュアライズ系GL

### D3.js
- https://d3js.org

### DECK.GL 
- https://deck.gl （MAP系）

### harp.gl
- https://www.harp.gl （MAP系）

### mapli.io
- https://www.mapli.io （MAP系）


## ▼ CSS系

#### colofilter.css
- http://lukyvj.github.io/colofilter.css/
- CSSカラーフィルタ

#### animate.css 
- https://daneden.github.io/animate.css/
- CSS3 アニメーションライブラリ
- パワポアニメ感があるが、ちょっとしたボタンとかに使うには十分。



## ▼ その他便利ツール

### jquery-qrcode (jQuery plugin)
- http://on-ze.com/archives/6022
- 任意サイズのQR生成。紙で欲しい時も任意サイズ作れるのでいい。

### generate-google-calendar-url
- https://github.com/ledsun/generate-google-calendar-url
- http://ledsun.hatenablog.com/entry/2014/11/18/195024
- goolgeカレンダーに追加するコード生成.npm版もある。