【RWD対応あり】よく使うオススメのjQueryプラグイン紹介 - 2018
jQueryなんていらないって記事を見ることがありますが、まだまだWebサイト制作の現場では現役。レベル差や入れ替えの多くなりがちなWebサイト制作会社では必須だと思います。
自分用にも含め、よくWebサイト制作で使うプラグインをまとめてみました。
（中にはjQuery不要のものもあります。）
モーダル・ライトボックス
Magnific Popup
これに出会う前まではColorboxばかり使ってましたが、ColorboxはRWD対応が特殊なのでこちらにしました。
アニメーションが物足りないですが、今はCSSでなんとかなるので問題なく使用しています。
最近はこれか自作かになってます。
公式：Magnific Popup
使い方：よく使うjQueryプラグイン② 「Magnific Popup」
スライダー
Slick
定番中の定番スライダーですね。
だいたいこれがあれば、Webサイトで制作するスライダーは対応できますね。
公式：Slick
使い方：【jQuery】スライダー系プラグイン slickの使用方法
Swiper
SlickではEventsを使わないとできないことも標準で使えたりします。
これとslickを覚えておけば大体スライダーの要望には応えられると思います。
スマホサイトでは「Free Mode」とかお願いされることがあるので覚えておいて損ではないと思います。
あと、jQuery本体が使えない時も使えるのもいいですね。
公式：Swiper
使い方：便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう
Slider Pro
標準オプションに動画のオプションがある（再生中はスライドを停止させるなど）ので、スライドに動画がある場合に使用します。
公式：Slider Pro
使い方：サイトにスライダー入れたいなら、最も使いやすいスライダーjquery「slider-pro」がおすすめ！
フォーム系
jQuery Validation Engine
リアルタイムバリデーションを実装できるプラグインです。
最近ではjQueryに頼らずとできるものがありますが、jQueryのみで完結したいので重宝します。
オプションも豊富です。
公式：jQuery Validation Engine
使い方：jQuery Validation Engineを利用する
Datepicker
日付入力のカレンダーと言えば定番。
公式：Datepicker
使い方：JavaScript jQuery UI Datepickerを使ってみる
pickadate.js
Datepickerと比べてオシャレ。
RWDにも対応しているので最近のサイトではこちらも多く使っています。
公式：pickadate.js
使い方：pickadate.jsを使ってカッコいい予約フォームを作ってみた(demo有)
ajaxzip3
住所自動入力でお馴染みのプラグイン。
最近はclassで完結する「YubinBango」がオススメみたいです。
公式：ajaxzip3
サンプル：https://ajaxzip3.github.io/sample-page/
jquery.jpostal.js
上記とは別の住所自動入力のプラグイン。
jQueryに依存してしまいますが、ボタンをクリックで住所が入力できるようになっています。
公式：jquery.jpostal.js
使い方：郵便番号を入力すれば自動で住所を出してくれるjQueryプラグイン jquery.jpostal.js
autokana
フリガナを自動で入力してくれます。
手間をなくしてくれるので、ユーザビリティアップにいいと思います。
公式：autokana
使い方：jqueryでフォームのふりがな自動入力
全角英数字を半角英数字に自動変換
プラグインではないですが、フォームのユーザビリティを上げるのに使用しています。
参考サイト：[jQuery] JavaScriptで全角英数を半角英数に変換する方法
その他
Barba.js
Pjax（非同期画面遷移）をサイトに導入できるプラグイン。
初めて導入する人でも使いやすいです。
非同期なのでmeta情報やAnalyticsなどページごとに設定できているか注意が必要です。
公式：Barba.js
使い方：Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.js
AOS
コンテンツ表示時にアニメーションやスライドなどアニメーションを設定できるプラグインです。
プラグインとCSSファイルを導入しdata属性を設定するだけなのでお手軽です。
公式：AOS
使い方：【JSプラグイン】スクロール連動型アニメーション！jQuery不要のJSプラグイン「AOS」！
まとめ
以上になります。
公式以外にも使い方やオプションを記載しているサイトを載せました。
参考になるプラグインの記事を探すときはなるべく日付の近い記事を選びます。
プラグインによってはバージョンアップでオプションの内容が変わっているときもあるので、なるべく日付の近い記事がいいですね。
便利なものはどんどん使っていきましょう
ここまで読んで頂きありがとうございました。
コメント一覧