コラム

皆さん、こんにちは。サツキです。

実際の制作の現場ではクライアントからの要求やデザインを実現するためにHTML/CSSを用いた表現だけでは限界があるためJavaScript（JS）の利用が考慮されます。
JSの実装方法については大きく分けて以下の2種類があるかと思います。

①自身で一からコードを書いて機能を実装する。（上級者向け）
②ライブラリやプラグインといったものを利用する。（初級者・中級者向け）

今回は、②番のライブラリやプラグインといったものについての話なのですが具体的な実装方法についてではなく、自分がWEB制作時によく利用するJSプラグインについてご紹介したいと思います。

そもそもjQueryとは？ライブラリやプラグインって？

「jQuery」は、プログラミング言語のひとつであるJavaScriptをより簡単に記述できるようにと開発されたライブラリです。

「ライブラリ」は、よく利用される複数のプログラムを再利用可能な状態（クラスや関数といった）でまとめたものでソースコードの部品集のようなものです。
もう少し説明すると、コードを書く際にライブラリ内の部品を利用することでより短い記述で機能を実現できるようにしてくれるものになります。

「プラグイン」は、ソフトウェア（この話でいうとjQuery(ライブラリ)）の機能を拡張するためのものになります。
今回は基本的にjQueryプラグインについてのご紹介となるため利用の際にはjQueryの利用が必要になります。

よく使うjQueryプラグイン

それでは、実際にWEB制作時によく利用されるプラグインをご紹介します。

〇 Drawer

「Drawer」はレスポンシブ対応時のスマホ表示の際によく利用されているドロワーメニューを簡単に実装できるプラグインです。
利用する際には、「jQuery」だけでなく「iScroll」とよばれる別のjQueryプラグインも一緒に利用する必要があります。

→ 詳細はこちら

〇 slick

「slick」はサイト上でよく見かけるカルーセルスライダーを簡単に実装できるプラグインになります。
動作が軽く、IE8以上のブラウザで動作することからクロスブラウザ対応に特別意識を割くことなく機能を実現できる点がとても良いと思います。
オプションも豊富なため色々な状況に対応できる点もとても使い勝手が良いです。

→ 詳細はこちら

〇 Vegas Background SlideShow

「Vegas」は要素の背景に画像や動画でスライドショーが簡単に実装できるプラグインになります。
上の「slick」でも全画面スライダー機能を実装すること自体は可能なのですが、全画面スライダーの実装についてはより多彩な動きをオプションで容易に設定できる「Vegas」を利用することが多いです。

→ 詳細はこちら

〇 Infiniteslide.js v2

「Infiniteslide.js v2」は画像などの要素を無限スクロールさせる機能を簡単に実装できるプラグインになります。
オプションで簡単に速度や動きの向き、レスポンシブ対応などが設定できるとても使い勝手の良いプラグインです。

→ 詳細はこちら

〇 Lightbox2

「Lightbox2」はサムネイル画像やテキストをクリックした際などに、画像をポップアップウィンドウで表示してくれる機能を簡単に実装できるプラグインになります。
このプラグインは追加でJSの記述をしなくてもHTMLだけで動作してくれる点がとても良いと思います。

→ 詳細はこちら

〇 Magnific Popup

「Magnific Popup」は画像やYoutubeの動画やGoogle mapやHTML要素をポップアップウィンドウで表示してくれる機能を簡単に実装できるプラグインになります。
画像だけであれば上の「Lightbox2」を使うのが良いかと思いますが、HTML要素等には対応していないため画像以外のものをポップアップ表示させる必要がある場合にはこちらを使くようにしています。

→ 詳細はこちら

〇 jQuery Validation Plugin

「jQuery Validation Plugin」はお問い合わせなどのフォームで入力チャックを簡単に実装できるプラグインになります。
Wordpress案件の場合はWordpressのフォームプラグインのバリデーション（入力チェック）機能を使うのですが、Wordpressを使用しない素のHTMLでサイトを作成する際にはとても重宝しています。
オプションでエラー文やエラー文の位置の変更、独自のバリデーションルールの作成なども可能なためとても使い勝手が良いと思っています。

→ 詳細はこちら

〇 matchHeight

「matchHeight」は横並びの要素の高さを揃えられる機能を簡単に実装できるプラグインになります。
最近ではFlexboxの利用によって使う機会はめっきり減ったのですが、以前はとてもよく使っていたので併せてご紹介しておきます。

→ 詳細はこちら

番外：よく使うJavaScriptプラグイン

今回は基本的にjQueryプラグインのお話なのですが、とてもよく使うJavaScriptプラグインについても2つほど一緒にご紹介しようと思います。

〇 object-fit-images

「object-fit-images」はCSSの object-fit プロパティに対応していないIEとEdgeでも同じような表示を実現できるプラグインです。
使い方も簡単でファイルもとても軽いため制作の際には必ず利用するプラグインです。

→ 詳細はこちら

〇 YubinBango

「YubinBango」はお問い合わせなどのフォームにある住所を郵便番号を入力するだけで簡単に自動入力してくれるプラグインになります。
このプラグインもとても使いやすくほぼほぼHTMLにクラスを指定するだけで利用できるためフォームで住所の入力フィールドがある場合にはとてもよく利用しています。

→ 詳細はこちら

まとめ

とても有名なプラグインを中心にご紹介したため知っていた方も多いかとは思いますが、まだ利用したことがないプラグインがあった方は一度利用することを検討してみてはいかがでしょうか？

今回ご紹介したプラグイン以外にも素敵なプラグインはたくさんありますので、それらをうまく利用しながら素敵なWEBサイトを作成してください。
それでは、最後までお付き合いありがとうございました。