2018年05月11日

jQueryを使えばWEBサイトがガラリと変わる

jQueryという言語をご存知でしょうか。

jQueryは、WEBサイトのデザインをかっこよくおしゃれにする際に、よく使用される言語です。

jQueryを習得することで、WEBサイトにアニメーションなどを動きのあるデザインを実装することができます。

これまでHTML・CSSだけでサイト制作していた人は、jQueryを使用することでよりかっこよくておしゃれなWEBサイトを制作することが可能です。

ぜひ、この機会にjQueryを習得して表現の幅を広げてください。

jQueryとは

jQueryを簡単に説明すると、「javascript」とよばれるプログラミングを簡単に使えるようにしたプログラミング言語です。

このように特定の機能を扱いやすくしたモノをライブラリと呼びます。

jQueryはjavascriptのライブラリになります。

jQueryのメリットは簡単に素早く機能を実装できることです。

例えば、javascriptで何十行も記述しなければならないプログラムも、jQueryを使用することでわずか数行の記述で機能を実装することができます。

javascriptはHTML・CSSよりも習得難易度が高く、初心者には難しい言語です。

しかし、jQueryはjavascriptよりもシンプルで覚えやすく、プログラミング未経験者でも習得しやすくなっています。

また、javascriptをより詳しく知りたいという人は前回の記事「【完全網羅】Javascriptで可能性が広がる」を参考にしてください。

前回の記事URL：https://kumaweb-d.com/web/javascript/

jQueryを実装するための下準備

jQueryを実装するためには、jQueryを使用するための下準備が必要です。

jQueryを使用する方法は2種類あります。

・WEB上のソースを読み込む方法
・ファイルをダウンロードして読み込む方法

この2つの方法について順番に説明します。

WEB上のソースを読み込む方法

WEB上のソースを読み込む方法はコードを記述するだけなので、とても簡単に準備が完了します。

このようなコードを記述してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

このように記述することでjQueryを読み込むことが可能です。

しかし、WEB上のソースを読み込みに時間がかかってしまうため、表示速度が遅くなってしまうのがデメリットになります。

次に、「ファイルをダウンロードして読み込む方法」を紹介します。

ファイルをダウンロードして読み込む方法

ファイルをダウンロードするために、jQueryの公式ホームページにアクセスします。

サイトURL:http://jquery.com/download/

現在(2018年5月)の最新バージョンである「Download the compressed, production jQuery 3.3.1」をダウンロードします。

「古いブラウザに対応させるために古いバージョンを使いたい」という要望がなければ公開されている最新バージョンを使用するのがおすすめです。

ダウンロードが完了したら、以下のコードを記述することでjQueryを使用することができます。

<script type="text/javascript" src="格納先/jquery.min.js"></script>

どちらの方法でjQueryを読み込んでも構いません。

なぜなら、表示される結果や実装される機能は同じだからです。

jQueryの記述場所

jQueryの記述場所も2つの方法があります。

・HTMLに直接記述する方法
・外部ファイルに記述して、読み込む方法

この2つの方法について説明します。

HTMLに直接記述する方法

このように記述することでHTML内に直接jQueryのコードを記述することが可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- script内にコードを記述します。 -->
</script>

基本的にHTML内に直接jQueryのコードを記述することはおすすめできません。

理由は、コードが冗長化してしまい、見直しにくく、メンテンスするのが難しくなるからです。

HTMLファイルの中にjQueryのコードが記述されていることは、あまり好ましくありません。

特別な理由がない場合は、外部ファイルからjQueryを読み込むようにしましょう。

外部ファイルに記述する方法

外部ファイルに記述したjQueryのコードを読み込むために、拡張子を「js」にしたファイルを作成します。

次に、以下のコードを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="格納先/ファイル名.js"></script>

このように記述すれば、jQueryのコードを外部ファイルに記述して読み込むことができます。

基本的には、CSSを外部ファイルから読み込む方法と同じ要領です。

注意するべきポイントは、jQueryの動作記述よりも先にjQueryを読み込むコードを記述する必要があります。

なぜなら、コードは上から順番に読み込まれていくからです。

jQueryの動作記述よりも先にjQueryを読み込むコードが記述されていなければ、正しく動作しません。

ここは、間違わないように注意しましょう。

次は実際にコードを記述していきます。

jQueryの基礎

ここまでの下準備ができたら次は、実際にjQueryのコードを記述しましょう。

jQueryの基本の形となるのが以下のコードです。

$(function(){
  //ここにjQueryのコードを記述
});

このコードはよく記述するので覚えておくのがおすすめです。

次にどのような要素にどのような処理を行うのかを指定します。

要素セレクタ
要素セレクタとは、「p」や「li」などタグと呼ばれるモノです。

以下のサンプルコードでは要素セレクタを指定して、文字色を変化させます。

$(function(){
  $("p").css("color","red");
  //pタグで囲っている文字が赤くなる。
});

$(function(){
  $("li").css("color","red");
  //liタグで囲っている文字が赤くなる。
});

idセレクタ
id属性を持つ要素を指定します。

$(function(){
  $("#sample").css("color","red");
  //sample要素の文字が赤くなる。
});

classセレクタ
class属性を持つ要素を指定します。

$(function(){
  $(".sample").css("color","red");
  //sample要素の文字が赤くなる。
});

子孫セレクタ
特定の要素を指定してスペースで区切ることで、特定の要素内にある要素を指定できます。

$(function(){
  $(".sample p").css("color","red");
  //sample要素のpタグで囲っている文字が赤くなる。
});

ユニバーサルセレクタ
「*」アスタリスクを使うことで全ての要素を指定できます。

$(function(){
  $("li *").css("color","red");
  //liタグの中にある全ての要素が赤くなる
});

このようにして、要素を指定することができます。

イベント

jQueryの中でもよく使用するのがイベントです。

イベントとは処理を実行するタイミングのことになります。

clickイベント

clickイベントとは、クリックされたときに処理をおこないます。

以下のコードがサンプルです。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココをクリックするとテキストが変化します。</a></p>

</body>
</html>

また、clickイベントとafterイベントを組み合わせることもできます。

以下のコードはクリックされるたびにテキストが追加されます。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').click(function () {
    $('p').after('追加されたテキストです。');
  });
});
</script>

<head>
<body>

<p><a href="#">ココをクリックすると新しいテキストが追加されます。</a></p>

</body>
</html>

dbclickイベント

dbclickイベントとは、ダブルクリックされたときに処理をおこないます。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').dbclick(function () {
    $(this).text("ダブルクリックされました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココをダブルクリックするとテキストが変化します。</a></p>

</body>
</html>

mouseoverイベント

mouseoverイベントは、マウスが上にのったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mouseover(function () {
    $(this).text("マウスオーバーしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

mousemoveイベント

mousemoveイベントは、マウスが移動したときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mousemove(function () {
    $(this).text("マウスアウトしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

mousedownイベント

mousedownイベントは、マウスの左右どちらかのボタンがクリックされたときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('p').mousemove(function () {
    $(this).text("マウスアウトしました");
  });
});
</script>

<head>
<body>

<p><a href="#">ココにマウスをのせるとテキストが変化します。</a></p>

</body>
</html>

focusイベント

focusイベントは、フォーカスが当たったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $("input").focus(function(){
    $("input").css('background-color', '#81BEF7')
  }).blur(function(){
    $("input").css('background-color', '#64FE2E')
  });
});
</script>

<style type="text/css">
input {
  width: 500px;
  height: 30px;
}
</style>

<head>
<body>

<input type="text" value="フォーカスすると背景色が変わります。">

</body>
</html>

mouseoverイベント

mouseoverイベントは、マウスが上にのったときに処理をします。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){

  $('#sample').mouseover(function () {
    $(this).css("background-color","#81BEF7");
  });
});
</script>

<head>
<body>

<div id="sample">マウスを上にのせると背景色がかわります。</div>

</body>
</html>

また。mouseoverイベントとfadeOutイベントを組み合わせることもできます。

この両方のイベントを組み合わせると、文字の上にマウスをのせると、文字が消えてなくなります。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){

  $('#sample').mouseover(function () {
    $(this).fadeOut("slow");
  });

});
</script>

<head>
<body>

<div id="sample">マウスを上にのせると文字が消えてなくなります。</div>

</body>
</html>

このようにjQueryには、様々なイベントがあります。

イベントは、このようなモノがあります。

イベント名	処理のタイミング
click	指定した要素で左クリックしたときに処理がおこなわれる。
dblclick	指定した要素でダブルクリックときに処理がおこなわれる。
contextmenu	指定した要素で右クリックしたときに処理がおこなわれる。
mousedown	指定した要素で左もしくは右クリックしたときに処理がおこなわれる。
mouseup	指定した要素で左もしくは右ボタンが押してから離れたときに処理がおこなわれる。
mouseout	指定した要素からマウスが離れるときに処理がおこなわれる。
mouseover	指定した要素にマウスがオーバーしたときに処理がおこなわれる。
mousemove	指定した要素にマウスカーソルが動いたときに処理がおこなわれる。
scroll	画面がスクロールしたときに処理がおこなわれる。
resize	ウィンドウの幅が変更したときに処理がおこなわれる。

jQueryのプラグイン

プラグインとは、拡張機能になります。

プラグインを導入することで、すぐに簡単に高機能なシステムを実装することが可能です。

ここでは、おすすめのプラグインを紹介します。

Masonry

jQuery.heightLine.js

Vegas

ScrollMagic

smoothScroll

Infinite Scroll

bxSlider

Slider Pro

jQueryTween

Velicity.js

ArtDesign Radio CheckBox

maskMoney

jsSocials

jScrollPanel

Freewall

Slidebars

ZooMove

Turntable.js

jquery.email-autocomplete.js

jQuery Knob

まとめ

いかがでしたか。今回はjQueryの基本的な使い方から便利なプラグインなどを紹介しました。

jQueryを使用することで、ユーザービリティやデザイン性がアップします。

美しいWEBサイトを制作するためには、JQueryが必要です。

ぜひ、この機械にJQueryをマスターしてください。