Brat Creator

jQuery入門～jQueryの基礎をマスターしよう～

えぇ～んJavaScriptが難しすぎて理解に苦しむよぉ～
という方の為に今回は便利なjQueryについて紹介します。

jQueryとは?

jQueryとは、JavaScriptライブラリのひとつです。
ライブラリとは、JavaScriptでよく使うコードをまとめた
コード集のようなもので、これを利用することでJavaScriptよりも
少ない記述量で同じ動作をさせることが出来ます!あら楽ちん♪

車で例えるならAT車みたいなものです。
なので、MT車のJavaScriptが使えなくても問題なく使えます。

ちなみに、JavaScriptライブラリは他にもたくさんありますが、
jQueryのファイルを読み込むだけで使える手軽さと便利さから、
JavaScriptの数あるライブラリの中でも最も有名です。

jQueryのデメリット

様々な状況に対応した非常に便利なコード集ですが、
逆に自分のサイトで使ってない部分のコードも読み込むので、
少しサイトが重くなりサイトの読み込み時間が遅くなります。

jQueryを入れるまでもない場合などは、jQueryに頼らず
頑張ってJavascriptで書いた方がいいかもしれません。

jQueryの導入方法

jQueryファイルを読み込む方法は、jQueryファイルを公式サイトから
ダウンロードし読み込む方法と、CDNを使用する方法の2種類あります。
おすすめはCDNを使う方法です。

一応jQueryにはバージョンがたくさんありますが、
それは次の「バージョンの違いについて」で説明します。

ダウンロードし読み込む方法

jQueryファイルを自分のサーバーにアップして読み込む方法です。
jQuery公式ページからダウンロードすることができます。
ダウンロードしたらそれをサーバーにアップロードし、
(ローカルならサイト用のフォルダに入れておいて)

<script src="js/jquery-3.2.1.min.js"></script>

というコードをHTMLに記述します。
リンク先は階層に合わせて変更して下さい。

階層って何？という方はこちら
これだけは覚えたい！絶対パスと相対パスの違いとは | TechAcademyマガジン

CDNを利用する

GoogleやjQueryが提供しているjQueryファイルを読み込む方法です。
この方法で読み込む場合、わざわざjQueryを自分でダウンロードしなくてもOKです。
読み込み方は簡単で下記のコードをHTMLに記述するだけです。

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

Googleがホストしているファイル

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

jQueryがホストしているファイル

CDNのメリット

CDNのメリットは、ダウンロードの手間が省けることと、
ブラウザにキャッシュされるということです。

キャッシュというのは前に見たことのあるサイトのデータを
一定期間保存しておくことで、次そのサイトを訪れた際に
最初よりも早くサイトを表示させることが出来る機能です。

一応自分のサーバーにアップしたやつもキャッシュされるのですが、
CDNを使うと他のサイトで同じCDNが使われていた場合、
その他のページを見た方のデバイスには、そのCDNのデータが
あらかじめキャッシュされているので、初めて自分のサイトに
来た場合でもサイトの表示が速くなります。

CDNのデメリット

別のサイトから持ってくるので、そのCDNを提供しているサイトが
何らかの理由でダウンしてしまうとjQueryが読み込めません。

とは言ってもCDNのサーバーが停止なんてそうそうしないので
あまり心配する必要もないと思いますが、大企業のホームページなど
信頼問題に関わる重要な案件などでは、もし突然動かなくなってしまうと
非常に恐ろしいので、ダウンした際はローカルファイルを読み込める
ように設定しておくという手もあります。

詳しくはこちらで紹介されています。
CDNでjQueryを読み込みつつ、ダウンした際はローカルファイルを読み込む（フォールバックする）記述をご紹介 | Web | マイホームブログ | Web屋の芝生DIY

読み込む場所

特に理由がなければ、jQueryなどのJavascriptは
bodyタグの閉じタグの直前に書くことが多いです。

正直記述するのはheadでもbodyでもどちらでもいいのですが、
プログラムは上から下へと読み込んでいくので、javascriptを
headで読み込んでしまうと、javascript読み込んでいる間HTMLを
読み込めなくなってしまうので、サイトの表示が遅くなってしまいます。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>ウェブサイトのタイトル</title>
</head>
<body>
	<p>我々は地球人だ</p>
	<p>我々は地球人だ</p>
	<p>我々は地球人だ</p>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!--jQueryを利用したコードやプラグインはjQuery本体よりも下に書く-->
	<script src="js/main.js"></script>
</body>
</html>

そして、jQuery本体はjQueryを利用したコードやプラグインよりも
上に記述しないと、そのコードやプラグインが動かないので注意が必要です。

また、HTMLが解析される前に実行されるべきプログラムの場合
bodyの最後だと先にHTMLが読み込まれてしまいうまく動かないので、
headで読み込みましょう。

バージョンの違いについて

jQueryにはバージョンがたくさんありますが、
大まかに分けると1.x系、2.x系、3.x系の3種類に分類されます。

それぞれ対応デバイスなどの違いがあるので
サイトのターゲットなどの状況に合わせて選びましょう。
ちなみにこれからは機能追加などのアップデートは3.x系のみになり、
1.x系、2.x系はバグ修正のみのアップデートとなります。

jQuery 1.x系

ターゲットブラウザにIE8以下が含まれている場合には、
jQuery 1.x系を用います。ただしファイルサイズが
他よりも大きいので、読み込みに時間がかかります。

jQuery 2.x系

jQueryはブラウザ毎のJavaScriptの違いに合わせてくれる
というメリットがあります。しかし、対象となるブラウザが
多いほどファイルサイズが大きくなるというデメリットもあります。
(ファイルサイズが大きいほど読み込みに時間がかかります)

そこで、jQuery 2.x系では、より軽く・より速いjQueryを
実現するために、IE6〜8が対象ブラウザから外されました。

jQuery 3.x系

2.x系の後継として、2016年6月にjQuery3.0がリリースされました。
2.x系よりも高速になっていますが、2.x系と対象ブラウザ以外にも
機能面でも複数の大きな違いがあります。
なのでjQuery 2.x系までは使えていたコードやプラグインが
使用できない場合があるので注意が必要です。

新しくホームページを作る場合は特に理由がない場合、
3.xで問題はないと思います。

.minとは？

同じバージョンでもjquery-3.2.1.min.jsという風に、
「.min」が付いているものと付いていないものがありますが、
結論から言うとどっちも機能は同じです。

じゃあ違いは何かと言いますと、コードが圧縮されているかいないかです。
圧縮というのはスペース、タブ、改行を全て削除し文字数を減らして
ファイルサイズを減らしたものです。

なので、中身を編集したりする必要がないのであれば、
使用するときは「.min」のついたものをおすすめします。

.slimとは？

3.x系から登場したものでスリムビルドと言います。
これは通常バージョンに入っているAjaxモジュールと
effects モジュール、さらに現時点で非推奨となっている
APIを除外して通常よりもファイルサイズを減らしたもので、
主にAjaxでの通信機能やアニメーションを使わないサイト向けのものです。

初心者の方はなんのこっちゃって感じでしょうが例えるなら、
花粉症の人が花粉がひどい時期は、マスクやメガネやティッシュを
持ち歩いていたけど、花粉のない時期は邪魔なだけで必要ないので
持ち歩かないみたいな感じです。

jQueryプラグイン

jQueryはJavascriptを使って書くよりも簡単に
コードを書くことが出来ますが、非常に複雑なコードだと、
jQueryを使用したところで難しくて初心者には書けません。

ですが、jQueryプラグインというものを使用することで、
初心者でも簡単に難しい動きをサイトに導入することが出来ます。

jQueryプラグインとは？

jQueryのプラグインとは、jQueryの拡張機能のことです。
自分の目的にあったプラグインを導入することで、
初心者でも簡単に様々な機能を導入することが出来ます。

jQueryプラグインのデメリット

jQueryのデメリットと被りますが、サイトが少し重くなります。
プラグインを使用しなくても自分で実装できそうな内容は
プラグインに頼らず自分で書いた方がいいでしょう。

また、jQueryをほとんど使わないサイトなのにも関わらず、
jQueryプラグインを入れるためだけにjQueryを入れるというのは、
あまり望ましくないです。

探せば意外と使いたいjQueryプラグインと同様の機能を持った
jQueryなしで動くプラグインもあったりするので状況に応じて
臨機応変に対応しましょう。

jQueryプラグインの導入方法

導入するためには、jQueryの知識が多少は必要になりますが、
0からコードを書くよりも遥かに速く簡単に導入出来ます。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>ウェブサイトのタイトル</title>
</head>
<body>
	<p>我々は地球人だ</p>
	<p>我々は地球人だ</p>
	<p>我々は地球人だ</p>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!--jQueryを利用したコードやプラグインはjQuery本体よりも下に書く-->
	<script src="js/〇〇.js"></script>
</body>
</html>

導入方法は導入したいプラグインによって多少変わってくるのですが、
基本的にはjQuery本体よりも下でjQueryプラグインを読み込みます。
また、プラグインによってはCDNが用意されている場合もあります。

プラグインを実際に動かすための初期設定はそのプラグインによって違うので、
「使用したいプラグイン　使い方」で検索しましょう。

jQueryのコード書き方

jQueryでコードを書く際にはHTMLに直接書き込む方法と、
「〇〇.js」というファイルを用意しそこに書いてHTMLで
そのファイルを読み込むという2種類あります。

HTMLに直接書き込んだ方が読み込みが速くなるのですが、
あまりにもコードが多くなると管理が大変になるので、
コード量などの利用状況などに合わせて選びましょう。

コードを書く際にはまず下記のコードを書きます。

$(function(){
  //ここにプログラムを記述
});

書く内容によっては多少変わる場合もありますが、
基本的にはこの形です。細かく説明すると長くなるので
とりあえず今回はここの説明は飛ばします。

そして間に入れるコードの基本的な形はこんな感じです。

$('セレクタ').メソッド('パラメータ');

セレクタでjQueryを適用する要素を選択して
メソッドでそこに何をしたいのかを書いて、
パラメータでどれくらい変化させるかを指定します。

ちなみにセレクタやパラメータをかこっている
「'(シングルクォーテーション)」は、
「”(ダブルクォーテーション)」でもOKです。

わかりやすく野球で例えると
「吾郎君」「次の投球は」「フォークを投げてよ」
という感じです。

ではidがtestという要素を赤くする場合のコードを書いてみましょう。

$(function(){
  $('#test').css('color','red');
});

こんな感じになります。
セレクタはCSSで指定するのと大体同じです。
(一部CSSにはない独自セレクタもあります)

「おいちょっと待て!こんなもんCSSで出来るだろボケ!」
と思った方もいらっしゃると思います。
おっしゃる通りでございます。
ただ、これにイベントというものを使うことによって
CSSでは出来ない動きを実装することができます。

例えばクリックされたときに色を変えるコードだと

$(function(){
  $('#test').click(function () {
    $(this).css('color','red');
  });
});

こんな感じです。

このようにイベントを設定したりすることで、
CSSでは出来ないことが出来るようになるのです。

もちろんイベントはクリックだけでなくスクロールや
マウスオーバーなどたくさんあります。

$(this)とは

$(function(){
  $('#test').click(function () {
    $(this).css('color','red');
  });
});

$(this)というのはイベントが発生した要素と
同じところに変化をさせたい場合に使用します。
もし違うところを指定したい場合は$(this)ではなく、

$(function(){
  $('#test').click(function () {
    $(#test2).css('color','red');
  });
});

という風に別のセレクタを指定しましょう。

ちなみに$(this)にしないで同じセレクタ名を
そのまま記述しても問題なく動きますが、
thisの方が読み込みが速いのでthisをおすすめします。

$(function(){
  $('#test').click(function () {
    $(#test).css('color','red');
  });
});

よく使うイベント一覧

click

$(function(){
  $('#test').click(function () {
    $(this).css('color','red');
  });
});

先ほど紹介したクリックすると動くイベントです。
スマホでよく見られるハンバーガーメニューと呼ばれるクリックすると
隠していたものが表示させたりするものによく使用されます。

toggle

$(function () {
	$('#test').toggle(function () {
			$(this).css('color', 'red');
		},
		function () {
			$(this).css('color', '#000');
		}
	);
});

要素がクリックされる毎に、動くイベントです。
先ほどのclickイベントでは指示が1つしか出来ませんが、
toggleは追加しただけイベントを起こせるので、上のコードだと
クリックすると文字が最初のクリックで赤に、次のクリックで黒、
その次は赤、その次は黒・・・と繰り返します。
要素を追加していく場合「}」の後に「,」を入れて追加していきます。

hover

$(function () {
	$('#test').hover(function () {
			$(this).css('color', 'red');
		},
		function () {
			$(this).css('color', '#000');
		}
	);
});

hoverは要素にカーソルが乗っかったり離れたときに動くイベントです。
toggleイベントがhoverになったバージョンです。
cssのhoverとは少し違い、マウスカーソルが離れても
元に戻る動作を入れないと元には戻らないので注意しましょう。

ちなみにmouseoverやmouseoutという個別に指定するイベントもあります。

他にもイベントはたくさんあるのでもっと見たい方はこちら
jQuery 日本語リファレンス

よく使われるメソッド一覧

addClass・removeClass

$(function(){
  $('#test').click(function () {
    $(this).addClass('class');
    $(this).removeClass('class2');
  });
});

addClassは指定した要素に指定したclassを追加できるメソッドです。
removeClassはその逆で指定した要素から指定したclassを削除できます。

注意として、addClassとremoveClassの「C」が大文字なので、
小文字にしないようにしましょう。

なので、追加するclassにあらかじめスタイルをcssで記述しておくことで、
クリックしたら表示が消えたり、隠れてたものが表示されたりなどの
変化を起こすことが出来ます。

「てことはさっきのtoggleイベントと合わせてハンバーガーメニュー出来るじゃん!」

/*これでハンバーガーメニュー出来るぜヤッター*/
$(function () {
	$('#test').toggle(function () {
			$(this).addClass('class');
		},
		function () {
			$(this).removeClass('class');
		}
	);
});

と思った方素晴らしい発想力です!
ですが、そんなめんどくさいことしなくても大丈夫です。
もっと簡単にやれるメソッドがあります。
それがこちら

toggleClass

$(function(){
  $('#test').click(function () {
    $(this).toggleClass('class');
  });
});

toggleClassは指定したCSSクラスが要素に無ければ追加し、
あれば削除するという非常に便利なものです。

さっきのあんな長いコードがこんなにシンプルになりました!
これはよく使うので覚えておきましょう。

attr

$(function(){
  $('#test').click(function () {
    $(this).attr('id', 'test-id');
  });
});

例えば上記の例だと#testにtest-idというidを付けましたが、
attrの本当の力はそんなもんじゃありません。
attrは結構万能なメソッドで指定した要素の中身を
自由自在に変えることの出来るメソッドです。

例えば下記のようにすると画像を差し替えたりも出来ます。

$(function(){
  $('#test').click(function () {
    $(this).attr('src', 'img/test.jpg');
  });
});

他にも色々出来ますが、話すと長くなるので
詳しくはこちら
Attributes – jQuery 日本語リファレンス

今更だけど最初の$って何か

さてここまでくればもうjQueryなんて余裕だぜー
とか調子乗ってる輩も出てきたのではないでしょうか？
しかし、まだまだ甘いぜ!ということで$の解説始めます。

本来であれば長々と書かなければいけないコードがあるのですが、
毎回毎回書くのは面倒なので短く省略できるようにしたものです。
なので、使用する際にはあまり気にしなくていいです!

WordPressで使用するときの注意点

実はWordPressには元々jQueryが入っています。
ですが、このjQueryが厄介なことにWordpress使用に変えられています。
なので、対策しないとjQueryが全く動かないという事態になります。
ということで対処方法を2種類紹介します。

$をjQueryに変更する

$(function(){
  $('#test').css('color','red');
});
//↓こうしましょう
jQuery(function(){
  jQuery('#test').css('color','red');
});

非常に簡単な方法です。
$が付いてる部分をjQueryに変えるただそれだけ。
エディタの置換機能を使えば数秒で終わります。

ちなみに、wordpressでは$だと動きませんが、
逆に普通のサイトで$をjQueryに置き換えたものを
使用した場合は普通に動きます。

WordPress同梱のjQueryの読み込みを中止する

これはちょっとめんどくさいです。
WordPress同梱のjQueryの読み込みを中止した後、
新しくCDN等でjQueryを読み込みます。
正直私はめんどくさいので上の方法でやっています。

やり方についてはこちらで詳しく紹介されています。
WordPress同梱のjQueryをGoogle CDNのものに変更してwp_footer()で読み込む方法

まとめ

  • jQueryとは、JavaScriptライブラリのひとつ
  • 読み込む際にはCDNを使用する方法がおすすめ
  • CDNのメリットはブラウザにキャッシュされるということ
  • 読み込み場所は、bodyタグの閉じタグの直前に書くことが多い
  • jQueryのバージョンは1.x系、2.x系、3.x系の3種類に分類される
  • 1.x系は、IE8以下が対象ブラウザに含まれる場合に使用
  • 2.x系は、IE6〜8が対象ブラウザから外されている
  • 3.x系は、最も高速だが2.x系の一部機能が使用不可
  • .minは、コードを圧縮しサイズを減少させたもの
  • .slimは、Ajaxなどの一部機能を制限しサイズを減少させたもの
  • jQueryプラグインを使えば簡単に難しい動きを導入できる
  • jQueryを書くときには、下記のようにコードを書く
    $(function(){
    　　$(‘セレクタ’).メソッド(‘パラメータ’);
    });
  • イベントを使用することでCSSでは出来ない動きを実装可能
  • WordPressで使用する際は$をjQueryに変更する

Comment