【2016年最新】jQueryおすすめ便利プラグインまとめ9選!デモ解説付

こんにちは!インストラクターの佐野です。

WEBサイトをあっという間にリッチに仕上げてくれる「jQueryプラグイン」

そんなjQueryプラグインですが、たくさんの種類があって、「いったいどれが使いやすいの?」「最近使われているプラグインは何?」

などとお困りになることがあると思います。

そこで今回は、これさえ押さえておけば大丈夫!という2016年最新版のjQueryおすすめ便利プラグイン9個を機能別にわけてデモ付きご紹介します!

どれも品質が高いものばかりですので、参考にしていいただければ幸いです。

スライドショー編

画像をスライドさせるアニメーションは、近年ではもはや当たり前となっています。

2016年では、ただ単に画像を横にスライドさせるシンプルなもの以外に、「タブ」「リスト」「バナー」などもスライドができる多機能なプラグインが流行ってきそうです!

その中でも厳選して3つご紹介します。

JSSOR

jquery-zoom-slider1

参考サイト

「JSSOR」は、様々なスライド機能が使える高品質なjQueryプラグインです、

画像のスライダーはもちろん、イメージギャラリー、タブスライダー、バナースライダー、リストスライダーなどたくさんのスライダーがあります。

使いたいモノだけ1つずつ個別でダウンロードできて、すべて無料で使えるというのは素晴らしいです。

用途は?

さまざまなスライドショーを使いたい時にぴったりです!

動きも非常になめらかなので、これからスライドの決定版になっていくでしょう。

Zoom Slider

jquery-zoom-slider

参考サイト

こちらのプラグインは、画像の縮小拡大をアニメーションで切り替えることができます

動きも非常になめらかですので、見ていて気持ちいいです。

用途は?

拡大縮小のスライドショーならこれで決まりです!

ECサイトの商品ページなどで使えそうですね!

Pointy Slider

jquery-zoom-slider2

参考サイト

コンテンツを部分的にスライドさせることができます。

用途は?

一部分だけスライドさせるならPointy Sliderがぴったりでしょう。

レスポンシブにも対応しており、シャープなデザインと面白いエフェクトでスライドするので、いろんなサイトで使えそうです!

メニュー編

ナビゲーションメニューや、ドロップダウン、選択ボックスなどのプラグインをご紹介します。

メニューはユーザーが直接操作するので細かい部分にこだわっているプラグインが多数あります。

その中でも特に気になるものを厳選して2つご紹介します!

Dependent Dropdown

jquery-menu-1
jquery-menu-2

参考サイト

「Dependent Dropdown」は、ドロップダウンメニューを選択時に、他のメニューも自動的に切り替えてくれます。

メニュー同士をグループで関連づけることで、セレクトボックス内の要素も切り替えてくれます。

用途は?

ドロップダウンメニューのセレクトを自動で切り替えたいときに使えます!

ユーザーからすると非常に便利な機能ですね!

DateBox

jquery-menu-3

参考サイト

こちらは、「jQueryMobile」・「Bootstrap」・「jQueryUI」と連携するプラグインです。

DatePickerを拡張して、さまざまな日付入力ができるようになります。

用途は?

日付入力全般ならこれで決まりです!

場合に応じてさまざまな使い分けができる優秀なプラグインです。

画面表示編

最近では、レスポンシブ対応が重要視されています。

「モバイルファースト」といわれる現代では、PCやスマホでも最適な画面に自動で調整してくれるプラグインはかなり需要が高いです。

FixedContent.js

jquery-display-2

参考サイト

「FixedContent.js」は、スライドバーやナビゲーションバーなどを画面に固定表示にしてくれるプラグインです。

用途は?

コンテンツを固定表示したい時にかなり有用です!

ユーザーにしてほしいアクションを促す時に使えますね!

スマホユーザーを意識したWEBサイトが作れそうです。

描画編

拡大縮小しても文字や画像がぼやけないSVGはよく使われています。

地図の描画や画像の描画もSVGが増えてきているようです。

SVG描画を利用した優秀なプラグインを厳選してご紹介します!

jQuery Mapael

jquery-display-3

参考サイト

「raphael.js」をもとに作られたベクターでダイレクトに地図を表示できるプラグインです。

クリックした箇所に色をつけることができたり、クリックした箇所のデータをツールチップで表示したりすることができます。

用途は?

地図のSVG描画ならこれでほとんど賄えるでしょう。

他にもいろんな機能があるので、地図を扱うならぜひ使いたいですね!

vivus

jquery-display-4

参考サイト

SVGをアニメーションで描画することができます。

さまざまなアニメーションがあり、自分でカスタムすることもできます。

用途は?

SVGアニメーションならまずこれを使ってみましょう!

SVGを扱うならぜひ使いたいプラグインです!

まとめ

いかがでしたでしょうか?

2016年ではさらに便利で高品質なjQeuryプラグインが使われています!

ぜひ人気のプラグインを使いこなして、リッチなWEBページを作ってみましょう!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

佐野裕史

佐野裕史

侍エンジニア塾インストラクター。
主に技術担当をしています。

【経歴】
力仕事、接客業、営業職など様々な業界を経てIT業界に参入。
IT未経験からスタートし、1ヶ月で仕事獲得に奇跡的に成功。
1年半後にフリーランスに転身。

Web開発を主に行っており、得意とするのはRails、Ruby。
【技術スキル】
Rails、Ruby、Swift、Java(Android)、JavaScript

【趣味、趣向】
麻雀
MTG(マジックザギャザリング)
ダーツ、卓球、野球、ボウリングなどの球技

【Facebookページ】
https://www.facebook.com/hiroshi.sano.7
【Twitter】
プログラミング講師@佐野裕史
自分でプログラミングができない人のために情報を発信しています。
お気軽にフォローください。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説