こんにちは！猫の手の建部です。もうすっかり秋ですね。
今回は複雑なJavaScriptプログラミングを簡略化してくれるjQuery（ジェイクエリー）の基本的な解説と、おすすめプラグインをご紹介します！
JQuery（ジェイクエリー）って一体なに？
アメリカ合衆国在住のプログラマーであるジョン・レシグさんにより開発され2006年1月にリリースした「JavaScriptの*ライブラリ」です。
jQueryは「JavaScriptを使いやすく拡張したもの」であり、本来は複雑で知識の必要なJavaScriptをとても簡単に記述できるようにしたものです。少ない記述でさまざまな表現を安全に実行できることが利点で、JavaScriptでは10行のコードを書く必要があっても、jQueryでは1~2行ほどで済みます。つまりjQueryはJavaScriptの便利な効果をすごく簡単に使えるという便利なツールなのです！
jQueryの登場によりJavaScriptの取り扱いがとても楽になり、Web制作・プログラミングを学んで間もない人であっても簡単に構築が可能となりました。制作の幅が広がる事や、どのブラウザでも同じように使える事からWeb制作において広く普及しています。
jQueryとJavaScriptの違い
JavaScriptとは、HTMLやCSSなどと同じプログラミング言語のひとつです。
しかし、jQueryはプログラミング言語ではなく、「*ライブラリ」といわれる存在です。
「jQuery」と「JavaScript」は異なる言語と思われる方も多いですが、jQueryはJavaScriptを簡単に記述できるようにした存在なので大元は同じという事になります。
ライブラリとは？
「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのことです。使いたい機能やコードをゼロから構築するのではなく、すでにライブラリに格納されているものを用いることで構築作業にかかる時間が大幅に削減可能となり簡単に扱えるようになります。
JQuery（ジェイクエリー）ではどんな事ができるの？
ここまで読んでみてjQueryはなにやらとっても便利そうなものだと分かったけど、一体何ができるようになるの？と思われたそこの貴方へ、主な特色をご紹介します！
1.WEBサイトに動きをつける事ができる
ページをスクロールをするとふわっと要素が表示されたり、画像をホバーすると浮き上がるように拡大・サイズが変化するといったサイトは少なくありませんよね。jQueryでは、このようなイベント発生時に様々なエフェクトを簡単にかけることができるようになります。
これらの動きがあるだけでもユーザーの利便性がアップするでしょう！
こんなことも簡単に実装！
・クリックしたら画像が入れ替わる
・画像やテキストの透明度を変化させる
・ボタンにマウスオーバーしたらボタンの色と文字の色が逆転する
・入力フォームで入力するとすぐに内容をチェックする
・画面をスクロールしていくと見た目や数値が変わっていく
2.サイト上でアニメーションが実装できる
jQueryにはアニメーションを簡単に実装できる便利なメソッド（関数）がいくつか提供されているのですが、もっとも基本になるのがanimate()メソッドです。
properties（プロパティ）：CSSプロパティを指定（アニメーションの効果）
duration（速度）：アニメーションの処理時間
easing（イージング）：アニメーションの動き方、緩急
function（ファンクション）：アニメーションが終わった後の処理
上記を指定する事で要素をフェードイン・アウトさせたり・見出し要素の文字サイズを大きくしたりなど多彩なアニメーションが実装できるようになります。
メソッドは他にも多数あるので、気になる方は調べてみると面白いかもしれませんね。
3.SNSなどへのシェア
Twitter・Facebook・InstagramなどSNSを利用する企業も多いため、WEBサイトからSNSへコンテンツをシェアしたいというケースも多いでしょう。
jQueryのプラグインを使用することで、Webサイト内にSNSでコンテンツを簡単にシェアできる「シェアボタン」を設置することが可能です。ボタンがあればシェアなどのためにSNSに遷移する必要がなくなり、ユーザーの負担が減り快適なサイトへ近付きます。
できる事は無限大！
まだまだできることは多くありますが、共通して言えることはJQueryを利用することで利便性が上がったり、動きが付くことで視覚的にも楽しいサイトが制作できるのでページが1ランクも2ランクも素敵な仕上がりになります！
こんな動き・機能を実装したい！という希望が叶えられやすくなりますよ！
ECサイトでよく使われる！便利なプラグイン
ECサイトに導入すればUIがぐっと良くなる、実際によく使われているプラグインをご紹介します！
スライダー系プラグインの王道『slick』
レスポンシブ対応・動作が安定・豊富なオプション・設置も簡単..と簡単な万能スライダー「slick」
複数枚の画像を次々と切り替わるスライドショー式で表示する事ができます。
自動再生・フェードなど多様な見せ方が可能だったり、ブレークポイントごとにスライダーのレイアウトや設定を変えられるなど、カスタム性が高いのが特徴です。
画像やテキストをポップアップで表示『Lightbox』
画像やテキストをクリックするとポップアップで拡大表示できる「Lightbox」
黒背景に写真が等倍で表示され、1枚の画像を見栄え良く表示してくれます。
また、単に拡大画像を表示してくれるだけではなく複数画像のグループ化することもできるので、商品画像や作品集を見せるギャラリーのような使い方もできますね。
こんな事もできる！？おもしろプラグイン
ここでは汎用性は高くないかもしれないけれど、他とは違ったサイト制作が叶えられそうなおもしろプラグインをご紹介します！
要素がブルブル！？震えをアニメーションで実現『CSShake』
要素が揺れるアニメーションを付けることができる「CSShake」
CSSを読み込んでクラス名を付与するだけでテキストや画像などの要素を震えさせる事ができます。
ホバーした際にブルブルはもちろん常にブルブルするものも作れたり、複数ある震え方も指定ができるので目立たせたい要素にワンポイントで実装すると存在感が増しそうですね！
サイト上にプラネタリウムを作れる『jQuery Planetarium』
jQueryでプラネタリウムを作る事ができる珍しいプラグイン「jQuery Planetarium」
球体を自動で回転させるアニメーションエフェクトや、カーソルに反応し回転させられるようなUIパーツが作れます。デモサイトでくるくる回る惑星がとっても可愛い。
サイト上に宇宙を出現させたい時には大活躍間違いなしです！
本をめくるような動きを実現！『ONEBOOK3D』
本をめくるようなエフェクトを付ける事ができる「ONEBOOK3D」
ぺらぺらとページをめくる動作がとってもリアルで、画面上で本を見ている感覚になります。
フォトアルバムを表現したい時などに最適なプラグインです！
まとめ
ここまでJQueryの基本的な解説をしましたが、まだまだ紹介しきれない面白いプラグインやアニメーションを活用した表現法がたくさんあります！
株式会社猫の手ではJQueryを活用してクオリティの高いサイト制作を実現してきた実績が多数ありますので、「既にあるサイトにこんな動きを付けたい・・・」「新規で制作するサイトにこんなことはできるかな？」等、気になることはなんでもお気軽にご相談ください！
お見積もり・制作依頼・ご相談はこちらから
この記事を書いたのは・・・
建部
コーダー兼アシスタントデザイナー
猫とお笑いと梅干しで出来ています
