自分がよく使うプラグインやライブラリ等まとめ

そろそろ現場を変える動きが始まる(自分は客先常駐という働き方をしています)から、その前に整理も兼ねて。
JSとかCSSのよく使うやつをまとめてみた。

カテゴリ一覧

汎用

アニメーション

スライダー系

モーダル・ポップアップ系

その他

汎用

Javascript jQuery

https://jquery.com/
旧バージョン→ https://developers.google.com/speed/libraries/#jquery
言わずもがなのjQuery。jsを実装するWebサイトではほぼ100%実装してる(システムを除く)。
プラグインはjQueryを前提としているものも多いからなおのこと。
ドキュメント見るとまだまだ知らないやつあったりするから勉強しなきゃなーって思う。
自分はよく1.11系を使うことが多いかな。IE8対応で。

Javascript lazyload

https://github.com/tuupola/jquery_lazyload
画像の遅延読み込み。ページが長い時に実装することが多い。
長いページに設置すればユーザーの離脱率に大きく貢献できるかも。設置も簡単だし。
ただ、なんでもかんでも遅延読み込みできるわけでもなく、他のプラグインと競合する可能性が高いものでもある。

Javascript html5shiv

https://github.com/aFarkas/html5shiv
IE8とかでもHTML5のタグ(代表的なのだとheaderタグとか)をタグとして認識してくれるjs。
ただ、少なくともこれだけだとhtml5タグに対してのCSSは効かない。
(CSSでheaderタグに対してmargin:0 auto;とかしても効かない)
万能なものではなく、あくまで階層が崩れるのを防ぐ程度。

Javascript Modernir

ユーザーが見ているブラウザに応じてhtmlタグにクラスを追加する。
使うと下位ブラウザ対応が楽になる。

CSS reset

http://meyerweb.com/eric/tools/css/reset/
自分はこのCSSを使うことが多い。
reset.cssは設置するのは必須だけど、幾つか種類があるからこれだ!って決めたものを用意しといた方がいい。

CSS clearfix

http://nicolasgallagher.com/micro-clearfix-hack/
こちらもだいたい設置しているCSS。不要なタグを設置せずにfloatの回り込みを解除する。

アニメーション

Javascript TweenMax

https://greensock.com/tweenmax
簡単にアニメーションが実装でき、パフォーマンスもいいプラグイン。
軽量版としてTweenLiteもある。
近々記事書きたいプラグイン。

Javascript Snap.svg

http://snapsvg.io/
SVGアニメーションの実装を簡単にできる。SVGならではの美しいアニメーションを実装するならコレ。
敷居は少し高め?
これも近々記事書きたい。

Javascript Chart.js

http://www.chartjs.org/
グラフの見た目の調整とアニメーションを簡単に行える。
サーバーと繋いでリアルタイムのグラフを作成できたりもするけど結構難しそうだった。
あと案外日本語解説が少ない。

Javascript jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/
イージングが簡単に実装できるプラグイン。
結構これ前提のプラグインもあるくらいには便利。

CSS Animate.css

https://daneden.github.io/animate.css/
大変お世話になってるアニメーション系のCSS。
たくさんの動きが1枚のCSSに集約されている。
書いていること自体はシンプルなので調整もしやすい。

スライダー系

Javascript bxslider

http://bxslider.com/
jQuery前提だけど、多分一番簡単に実装できるスライダー。js初心者におすすめ。自分もここから入った。
簡単に実装できると言ってもオプションは豊富なのでリッチなことをしない限りやりたいことはだいたいできる。
ただしレスポンシブに関しては対応こそはしているものの調整が必要。

Javascript swiper

http://idangero.us/swiper/#.WSPJNBPyhTY
高機能なスライダー。
以前使い方の記事を書いたのでそちらをどうぞ。
http://reiwinn-web.net/2016/11/30/swiper-js-01/

Javascript flexslider

http://flexslider.woothemes.com/
jQuery前提の高機能スライダー。
感覚としてはbxsliderに近い?

Javascript slick

http://kenwheeler.github.io/slick/
ブレイクポイントを細かく設定できるスライダー・・・らしい。
実はそんなに使ったことないけど、レスポンシブには強いと聞く。

モーダル・ポップアップ系

http://dimsemenov.com/plugins/magnific-popup/
汎用的なポップアップ。動画とかもできる。
youtubeもできるけど、デフォルトでyoutube設定が決まってしまっているのが欠点。

https://github.com/adamhenson/lighterbox/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
汎用的なモーダル。多くのモーダルの基礎になってると言っても過言ではない。Lightbox系プラグインたくさんあるし。
オプションはそんなに多くない。

http://www.jacklmoore.com/colorbox/
Lightbox系プラグインでは一番使ってるプラグイン。

http://joaopereirawd.github.io/animatedModal.js/
全画面表示のモーダル。かなりオシャレ。
対応ブラウザには少し注意。

その他

Javascript jquery.cookie.js

https://github.com/carhartl/jquery-cookie
cookieをスゴーーーク簡単に扱えるjs。cookieを使用する案件ならほぼ100%使ってる。

Javascript jquery.pjax.js

http://falsandtru.github.io/pjax-api/
HTML5のHistory APIを利用して非同期通信を行う。URLの変更時にアニメーションを加えたり。

あと気まぐれでまた追加していきます。