こんにちは、MaromaroのTakaです。
今回はコーディングをする際に私が良く使う便利なJavaScript・jQueryのプラグインを
ご紹介します。

はじめに

まずコーディングをする際に使用するプラグインを簡単に説明します。

例えば、画像を横並びにして横に自動でスライドさせたい場合等、
通常のHTML・CSSで出来ない動きを付ける際に、
JavaScript等で手書きで記述をすることになると思いますが、
少しの動きを付けるだけでもJavaScriptで記述すると、
膨大な量のコードになります。

そこでその膨大な量の記述を簡単に実装させようとプラグインを製作してくれている、
素晴らしい方がいらっしゃいます。

膨大な量の記述をプラグインとし、汎用的にしたものをWEB上で配布してくれています。

基本的な使い方としてはプラグインのファイルを所定のディレクトリに配置、
またはCDNとして読み込ませ、HTML等の上で関数を呼び出せば簡単に使用できます。

おすすめのプラグイン

私が良く使うJavaScript・jQueryのプラグインをご紹介します。
様々な種類がありますが、下記のものは一般的にも使用頻度が高いのではないのかと思います。

Slick

slickはjQueryベースの、スライダーを作成するためのプラグインです。
レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。
また、商用の利用もOK（※条件がありますので公式等でご確認をお願いします。）のため安心です。

https://kenwheeler.github.io/slick/

rwdImageMaps

クリッカブルマップを使用したページをレスポンシブで画像サイズを画面に合わせて変更すると、
クリッカブルマップで設定したエリアがズレてしまいます。
その際にこれを使用すれば自動でエリアを調節してくれます。

https://github.com/stowball/jQuery-rwdImageMaps

Luminous

クリックすると画像を拡大してくれる、いわゆる「lightbox（ライトボックス）」というスクリプトプラグイン。
とにかく簡単軽量で使いやすいです。

https://github.com/imgix/luminous

Garlic.js

フォーム入力データをローカルストレージに保存し、再読み込みしても復元してくれるScriptです。
フォームを実装する際にユーザビリティの向上のために使用します。
具体的にはフォームに入力した後ページ遷移やページ自体を更新しても内容を復元してくれるものとなっています。
基本的にはSubmitすると消えますが、プラグインをいじれば消えないように調節することも簡単にできます。

http://garlicjs.org/

AOS

これは導入が本当に簡単で、とても魅力的なプラグインです。
公式を見てもらえばどんなことができるか一目瞭然です。
要素をスライドイン、フェードイン、ポップアップ等様々な動きを簡単に付けられます。
ページをおしゃれにしたいときに非常にオススメです。

https://michalsnik.github.io/aos/

imgLiquid

画像をHTMLページ内に表示する場合、表示したいエリアより画像サイズが大きい場合や、
縦横比（アスペクト比）がボックスと一致しないために画像が伸縮されて表示されたりしてしまいます。
このプラグインを使うと、ボックス内に画像をリサイズして表示してくれます。

https://github.com/karacas/imgLiquid

matchHeight

横並びの要素の高さを揃えてくれるプラグインです。
高さを揃えたい要素に共通のクラスを付け、
指定してあげるだけで高さが揃います。
こちらもとても使いやすいです。

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

以上になります。

詳しい使い方は今回書いていませんが、
設置しクラス等を指定してあげるだけで簡単に動きますので、
初心者でも安心してお使いできるのではないのかと思います。
便利なプラグインはこの世にまだたくさんありますので、
好みに合ったものを探すのも楽しいかもしれませんね。

以上、Takaでした。