JavaScript

jQueryで出来る事とは?実際のコード例やプラグインも紹介

HTMLやCSSでWeb制作ができるようになった人にとっては、jQueryは必然的に学ぶようになるのではないでしょうか。今回は、jQueryでできることについて紹介します。

jQueryとは

jQueryとは、web上でアニメーション等をつける事ができる、2006年に開発されたJavaScriptのライブラリの事です。

ライブラリというのは、汎用性があるまとまったプログラムのことをいいます。

jQueryの特徴

  • ブラウザに依存しない
  • コードを少なくかける
  • プラグインがたくさんある

ブラウザに依存しない

jQueryはブラウザ間による差異がないのが特徴です。

ブラウザには、chrom、IE、safari、Firefoxといった様々なものがあります。

jQueryを使うことによって、ブラウザに依存しないWeb制作ができます。

コードを少なくかける

jQueryはたくさんのコードを書かずに使用することができます。

例えば、ボタンを押した際にアラートがでる動きをつけたいときには、下記のような書き方をします。

JavaScript

document.getElementById("text-button").onclick = function() {
 alert('クリック');
};

jQuery

$(function() {
  $(".button").on("click", function() {
     alert('クリック');
  });
});

このように、同じような動きをつけることができるJavaScriptとjQueryでは、書くコードが短く済みます。

プラグインがたくさんある

プラグインとは、拡張機能のことをいいます。

jQueryには他の誰かが作ってくれた便利な機能のまとまりが豊富にあります。

例えば、slickといわれるプラグインはスライドを簡単に実現することができます。

簡単なスライドで以下の1行でできます。

$('.slider').slick();

jQueryとJavaScriptの違いとは

jQueryはJavaScriptでかかれたライブラリです。

JavaScriptをより簡単にしたものがjQueryと言れているため、似てはいますが構造がまったく異なります。

jQueryはライブラリですが、JavaScriptはプログラミング言語だからです。

jQueryはそもそもJavaScriptがなければ成り立つものではありませんので、比較対象にはならないのです。

jQueryでできること 3選

  • マウスオーバー、マウスアウト
  • スライドショー
  • 非同期通信

マウスオーバー、マウスアウト

jQueryではマウスオーバー、マウスアウトを簡単に書くことができます。

マウスオーバーとは、マウスである要素を触ると何かが起こるようにする処理です。

マウスアウトはその逆である要素からマウスが離れた際に起こる処理のことを言います。

マウスオーバーの書き方は以下です。

$(function() { 
  $('div').hover(function() {
          //   処理を書く
  });
});

スライドショー

先ほど紹介したslickというプラグインを使うことでスライドショーを簡単に実装することが可能です。

非同期通信

jQueryには非同期通信ができるAjaxというものがあります。

Ajaxはページを再読み込みせずにページを変えることができます。

例えば、GoogleMAPにもAjaxは使用されています。

お使いになったことがある方はわかると思いますが、検索時に画面が真っ白になることはないと思います。同期通信を行っていればページの読み込み時に画面が真っ白になってしまうのです。Ajaxではそういったことなく、ページを読み込むことができるのでGoogleMAPに使用されているのです。

まとめ

jQueryのできることについて紹介しました。

jQueryを使用することで今まで難しくてできなったことが簡単にできるようになったり、つけたい機能をつけられるようになるのでぜひ活用してみてください。