HTMLとCSSでサイトのデザインができるようになった後に多くの人が思うだと思います。しかし、多くの人が「アニメーション　ソースコード」などでググってみるとそのコードの複雑さに思いが打ち砕かれてしまいます。

そんな時、簡単にアニメーションを実装できるjQueryは本当にあなたの助けになるはずです。

まずはjQueryで実装できることを紹介しますので、是非実際に実装してみてメリハリのある動的な人気サイトを作ってみてください！

jQueryでできること10選

以下の10つの項目はすべてjQueryで実装可能なものです。どれもよく見かけるエフェクトなので、まずはこの10つのjQueryの具体的な使われ方をみてjQueryのイメージをつかんでみましょう！

マウスhoverで画像を変えることができる

jQueryを使うと、マウスオーバーのアクションで画像をまるごと入れ替えることができます。

私たちがHTMLとCSSのみを使ってマウスオーバーアニメーションをつける時、画像を透明にしたり、位置を変えたりと画像にちょっとした加工をしてアニメーションにしますね？

ここにプラスでjQueryを使うことで「HTMLを書き換える」ことができるようになると、マウスオーバーの前と後で画像を設定でき表現の幅が大きく広がります。

簡単にページトップへ移動させるボタンが作れる

サイトを下までスクロールして行くと出てくる「トップページへ戻る」のボタン。今までスクロールで見てきたエリアが高速でスクロールされるエフェクトが印象的なアニメーション。これもQueryで簡単に実装することができます。

テーブルの奇数行と偶数行を違う色にできる。

テーブルのデザインもjQueryでは見やすく設定することができます。

この色を変えることで十分に見やすくなるのでテーブルの枠線を外してみたり、オシャレな加工、デザインもできるようになります。

リンク切れ画像を用意した画像に変更できる

altキーで表示出来ない画像にコメントを書くことはできますが、リンク切れの画像の位置にあなたが作った画像をはめ込むことができます。

画像はサイトの印象を左右する大きな要素。リンク切れでサイトの雰囲気が壊れてしまうのを最低限に防ぐことができます。

プリローダーを実装できる

プリローダーとは一般的に重い画像の読み込みを後回しにして、最初にサイト全体を表示することで、サイトのユーザービリティーを上げる方法。これもjQueryでは簡単に実装することができます。

ちなみに画像のロード中にはgif動画が流れるためユーザーが待つときに感じるストレスの軽減も期待できます。

スライドパネルやアコーディオンを実装できる

スマートフォン向けのサイトを作る時はスペースを効率的に使えないと、レイアウトがごちゃごちゃしてしまいます。スライドパネルやアコーディオンがあれば、必要な場所を選択的に表示できるのでとても便利です。

ツールチップ形式で補足情報を表示できる

上の項目と似ていますが、マウスオーバーしたユーザーに補足項目を見せることができるという点がことなる点。この機能もサイトのレイアウトをスッキリさせるのに一役買ってくれます。

フェードイン/フェードアウトのアニメーションを作れる

化粧品や家具など高級感のあるサイトには必ずといってもいいほど、使用してあるフワッと要素が現れるアニメーション。スライドの設置などと同じくらい頻度の高いこのアニメーションもjQueryでは数行で実装することができます。

サイト内でSNSをシェアできるボタンを作れる

「サイトの投稿をシェアしてもらうこと」と「SNSでシェアを広げること」には大きな違いがあります。

一般的に「サイトの投稿をシェアしてもらう」時は一度SNSへの移動をはさんでしまうため、ユーザーはストレスを感じてしまいます。jQueryを使ってサイト内でシェアができるようになれば、あなたのサイトを見てもらえるチャンスがぐっと増えるでしょう。

リアルタイム情報を取得できる

jQueryを使うと、天気や通貨のチャートなど刻一刻と変わる情報を取得してサイトにリアルタイムで反映することができます。また、この工程は非同期で行われるので、ユーザビリティーを高め同時にサーバーへの負荷を減らすことができます。

]Queryのメリットとは？

jQueryを使う大きなメリットはおおまかに次の3つです。

ソースコードの作成が簡単になる

jQueryの中には、私たちがよく使うような機能でいちから作成するには時間がかかってしまうようなコードがあらかじめ準備されています。

そのため、jQueryを使うことで大幅にコードを書くのが簡単になり、時間も節約することができます。

ほとんどのブラウザーに対応している

jQueryで作ったコードはchrome、safariなどのほとんどのブラウザーで同じように動くように作られています。

jQueryはJavaScriptで書かれているのですが、JavaScriptで書かれたコードはブラウザーによっては挙動が変わってしまいトラブルになってしまう事があります。

一方で、jQueryはブラウザー間で同じように動くように処理されており、ブラウザー間での挙動が変わらずトラブルを回避することができます。

Ajaxで他のサイトの機能を簡単に埋め込める

AjaxとはGoogle mapなどにも使われており、同期をせずにリアルタイムで他のサイトの一部の情報を埋め込むことができます。jQueryでAjaxを使うことで、サイトのユーザビリティの向上やサーバ負荷を軽減させることができます。

]QueryとJavaScriptの違いは？

jQueryはJavaScriptで作られているライブラリーであり、簡単に私たちが使えるコード集のようなものです。ですので両方ともJavaScriptなんです。

例えば私たちは文章を書くときにフォーマットを使って、文章を書くことがあります。その時、フォーマットの中の一部を場面にあわせて変更することがあると思います。

jQueryとJavaScriptは、この文字とフォーマットの関係と同じです。jQueryを使うことで大枠が最初から準備され、またいちから作らない分時間を節約することができます。

そして細々した仕様を変えたい時にjQueryのコードをJavaScriptで書き換えてカスタムすることになります。つまりjQueryとJavaScriptに違いがあるというわけではなく、jQueryがJavaScriptのテンプレートの1つと考えると分かりやすいですね。

初心者への]Query学習のコツ

jQueryはJavaScriptで書かれているので、JavaScriptの基礎的なことを学んでおくとスムーズに使うことができます。なぜなら、ほとんどのサイトや本を見てみるとJavaScriptの知識を前提としてjQueryのことを説明しているからです。

とはいっても

など短い時間で終わるようなことですので、苦手意識を持たずに取り組んでみましょう。

まとめ

jQueryは、JavaScriptを使わなければできないアニメーションや処理を簡単にサイトに実装できるライブラリーです。
上で紹介した10この項目の他にもプラグインなどを使うと、さらにたくさんの機能をサイトに持たせることが出来ます。

このサイトにも色々紹介していますので、是非参考にしてみてください！