おすすめのjQueryプラグインまとめ

jQueryプラグインって複雑なプログラムを簡単に動かせて便利ですよね。
でも、数が多くてどれを使えばいいのか分からんという方の為に
今回はおすすめのjQueryプラグインを紹介します。

jQueryプラグインの導入方法

こちらの記事で紹介しています。

jQuery入門～jQueryの基礎をマスターしよう～

Barba.jsは、「PJAX」を使いページ推移を高速化させることができます。
PJAXとは「Ajax」と「pushState」という2つの機能を組み合わせたもので、
非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。

でも「Ajax」を知らない人がこれだけ聞くとなんのこっちゃって感じだと
思うのでまず「Ajax」と「pushState」の説明をします。

サイトを移動するとき、通常は実際に変わるのは一部分だけでも、
また1からすべてのコードを読み込んで表示してしまいます。

ですが、「Ajax」を使用すると、各ページの差分だけ読み込み、
描画するので、転送量削減ができ表示が速くなります。
(Googleマップなどに使用されています)

しかし、この「Ajax」には1つ弱点がありました。
それは表示は変更されてもURLは変更されないことです。

なので、検索エンジンに理解してもらえず、お気に入りに入れても
変更前のサイトがお気に入りされるのでブログやホームページなどの
ページ内移動では基本的に使用できませんでした。

「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期な
サイトを作る時などにアドレスが変更されない問題を解消してくれます。

そして、上記の2つを合わせたPJAXはブログやホームページ内移動で、
ヘッダーやサイドバーやフッターなどの固定要素はそのままにして、
記事部分のみを変更してURLも変更できるようになりました!

また、ページ遷移時にエフェクトを追加できるようになるなど、
カスタマイズ性に優れていて、非常に優秀なプラグインです。

ただし、デメリットもあります。
このプラグインはローカルでは動かないので、
テストをする場合テスト用サーバーを使うか、
ローカル開発環境を作らないといけません。

slick slick
slickは、簡単に高機能なスライダーを実装できるプラグインです。
スライダーを使用する際に欲しい機能を一通り搭載しているので、
スライダーを実装する際はどのプロジェクトに使用する時でも、
slickがあればほとんど対応できます!

画像をクリックすると、オーバーレイで拡大表示されるものを見たことが
ある方も多いと思いますが、このプラグインは画像だけでなく、
動画やinline コンテンツ、iframe なども拡大表示できちゃうのです!

ちなみに、オーバーレイとはTwitterなどでよくある画像をクリックすると、
周りが暗くなり画像がアップになって表示されるあれです。

fullPage.jsはコンテンツをセクションごとに
フルスクリーン表示にし、少しスクロールすると次の
セクションまで自動で移動してくれるプラグインです。

また、動画もフルスクリーンにできたり、
縦だけでなく1部だけ横スクロールにしたり、
スクロール後に起こるイベントを設定できたりなど
非常にカスタム性が高いです。

最近はフルスクリーンのデザインが減ってきましたが、
メインビジュアルだけフルスクリーンにし、他の部分は
通常通りスクロール可能にするなどのカスタムもできるので、
少しアクセントを加える間隔で入れるのもいいかもしれません。

jQueryプラグインは非常に便利ですが、調子こいて
入れすぎてしまうとサイトが重くなってしまうので、
必要最低限のものだけ入れましょう。