ウェブ制作者がよく使うJavaScript・jQueryプラグイン（ライブラリ）13選

Web制作の現場でよく使うJavaScriptプラグイン・jQueryプラグインをいくつかご紹介。それぞれスライドショー、モーダルウィンドウ、クロスブラウザなど、実用度の高いプラグインを厳選してピックアップしている。利用するかどうかはケースバイケースだが、少なくとも知っておきたいプラグインであることは保証できる。ぜひ参考にしていただきたい。

Modernizr

https://modernizr.com/

クロスブラウザ対応に便利なJavaScriptプラグイン。jQuery不要。HTML5やCSS3などの新しいWeb標準機能が、ユーザーのブラウザで使用可能か確認できる。ブラウザがどの機能をサポートしているかチェックし、HTMLタグにclass名を付与してくれるので、ブラウザごとに処理できる。どの機能を判別したいかの選択も可能。その他の機能として、IE8以前のブラウザでもHTML5が利用できるようになる『html5shiv』機能、最新の機能が利用できないブラウザ向けにJavaScriptなどで同様の機能を扱えるようにしてくれる『Polyfill』機能も同梱。

jQuery Browser Plugin

http://jquery.thewikies.com/browser/

ブラウザの種類・機能を判定してくれる。特定のブラウザに依存したコードを書き分けることができる。例えばユーザーのブラウザがWindowsだった場合には、bodyタグに「windows」を付与できる。

Animsition

http://git.blivesta.com/animsition/

ページ遷移時にフェードなどのかっこいいエフェクトを加えられるプラグイン。ページ遷移の表現を変えるだけでも、サイトの雰囲気をガラッと上品に変えられる。jQueryが発動しなければサイトが真っ白になってしまうが、恐れずに導入してみよう。エフェクトパターンも豊富だが、筆者は「フェードイン・アウト」を使用する機会が圧倒的に多い。

Drawer／iScroll

http://git.blivesta.com/drawer/

クリックすると横からニュルッとメニューが流れてくる「ドロワーメニュー」。スマートフォンサイトのUIではもはやお馴染みとなりつつあるが、このドロワーメニューを実装できるプラグインが『Drawer』だ。他にもいくつか似たプラグインはあるが、筆者は現在『Drawer』を愛用中。

BxSlider

https://bxslider.com/

シンプルかつ比較的軽量なコンテンツ・スライダー系jQueryプラグイン。レスポンシブデザインにも対応している。オプションも充実しておりカルーセルにも対応している。日本でも利用者が多く、オプションについての解説記事も多いのも助かる。

slick

http://kenwheeler.github.io/slick/

レスポンシブに強いカルーセルスライダー。ブレイクポイントごとに表示数やスクロール数を決められる柔軟性が強みで、カスタマイズ性に富む。ウェブデザインギャラリーサイトで紹介されるようなハイクオリティのウェブサイトでも実装されている。

wow.js

https://mynameismatthieu.com/WOW/

JavaScriptプラグイン。スクロールに合わせて要素にアニメーションを実装する際に便利。『animate.css』と組み合わせよう。商用利用が有料化したが、筆者は導入機会が多いため購入した。

jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/

「easing」とはエフェクトの動きの速度を表す関数。jQueryのデフォルトでは「徐々に加速しゆっくりに」「等速」ぐらいしかないが、『jQuery Easing Plugin』を導入することでパターンが増える。押さえておきたいjQueryプラグインのひとつだ。

jquery.matchHeight.js

http://brm.io/jquery-match-height/

要素が横並びのレイアウトを組むときに重宝するjQueryプラグイン。高さを取得し揃えてくれる。CSS3のFlexboxや、『tile.js』『jquery.heightLine.js』など近いプラグインもあるが、最も精度が高く使いやすいと感じている。

Magnific Popup

http://dimsemenov.com/plugins/magnific-popup/

レスポンシブデザインにも対応しているシンプルなモーダルウィンドウ。元祖『Lightbox』でもいいが、YouTube、Google Mapなどにも適応できるという強みも考慮し、筆者は『Magnific Popup』を愛用している。

jScrollPane／mousewheel

http://jscrollpane.kelvinluck.com/

スクロールバーをお洒落なデザインにカスタマイズできる。Mac使いだとあまり必要性を感じないが、WindowsのFirefoxなどちょっとスクロールバーが不格好すぎるときは、デザインに馴染むように調整しよう。『mousewheel』とあわせて利用する必要がある。

jQuery Cookie Plugin

https://github.com/carhartl/jquery-cookie
JavaScriptでcookieを扱うためのjQueryプラグイン。筆者は主に、サイト訪問者に一番最初に訪れたときだけローディングエフェクトを見せるケースで使用する。

particles.js

https://vincentgarreau.com/particles.js/
ポリゴン状の幾何学模様アニメーションを描画できる。サイトデザインが味気ない場合に取り入れれば良いアクセントになる。サイト表示が少々重くなるので、状況を見て導入を検討しよう。