WEBサイトなどでアニメーションなどの動きを実装したい場合は、CSSやjavascriptやjQueryなどを使用します。
CSSのアニメーションは比較的簡単に実装することができますが、「すkロールして要素がウィンドウ内に入ったときにアニメーションを開始させる」「クリックされたタイミングでアニメーションを開始させる」などの細かいタイミングを指定することはできません。
javascriptやjQeryなど使用すれば、細かいタイミングを指定することが可能です。
今回は、javascriptよりも簡単に使用できるjQueryの使い方について説明します。
javascriptとjQueryの違いについて
まず、最初に知っておくべきことは「javascriptとjQueryの違い」です。
javascriptとjQueryの違いを簡単にまとめるとこのようになります。
・javascriptはWEBサイト(フロント部分)だけでなく、バックエンドの処理もおこなえるが、jQueryはWEBサイト(フロント部分)だけに使用する
・javascriptに比べ、jQueryはコードの記述量が少なく習得するのが簡単
この2つがjavascriptとjQueryの違いになります。
javascriptと比較したときのjQueryのメリットは、「コードの記述量が少なく保守性に優れている」「開発スピードを上げることができる」ことです。
反対にjavascriptと比較したときのjQueryのデメリットは、「読み込みに時間がかかる」ことになります。
しかし、「読み込みに時間がかかる」といっても体感ではわからないどのごく僅かな差です。
「javascriptとjQueryってどのくらい記述量が違うの？」と思う方もいるでしょう。
実際にコードをみて比較してみましょう。
以下のコードは、特定の要素にクラスを追加・削除するコードです。
javascript
var menuIconWrapper = document.getElementsByClassName('menuIconWrapper');
var menu-trigger = document.getElementsByClassName('menu-trigger');
menuIconWrapper.addEventListener('click', function() {
menu-trigger.classList.add('active');
});
menuIconWrapper.addEventListener('click', function() {
menu-trigger.classList.remove('active');
});
jQuery
$(function() {
$('.menuIconWrapper').click(function() {
$('.menu-trigger').toggleClass('active');
});
$('.menuIconWrapper').click(function() {
$('.gNav').toggleClass('active');
});
});
上記のコードを見てもらえればわかるようにjavascriptよりもjQueryの方がコードが短いことがわかると思います。
WEBサイトの動きだけを実装するなら、javascriptよりもjQueryの方がおすすめです。
jQueryを使うための準備
jQueryを使用するためにはjQueryのファイルをダウンロードしてプロジェクト内に置くか、CDNを使って必要なファイルを読み込むことが必要です。
初心者の方におすすめなのはCDNを使ってjQuery読み込む方法です。
理由は、CDNの方が簡単ですぐに準備が整います。
CDNのコードは以下のページで記載されています。
CDNが記載されているページ：https://code.jquery.com/
jQuery3系のバージョンのCDNは以下のコードになります。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
上記のコードをbodyタグの閉じタグの直前に記述するのが一般的です。
headタグの内に記述しても構いませんが、headタグに記述するとWEBサイトの表示スピードが遅くなる可能性があります。
この部分は個人によって意見が別れるところです。
今の動向ではbodyタグの閉じタグの直前に記述するのが無難でしょう。
また、jQueryのCDNは1つだけ記述しましょう。
例えば、jQuery3系のバージョンやjQuery2系のバージョンなど複数記述するとjQueryが正しく動作しません。
初心者の方に多い間違いなので、この点には注意しておきましょう。
ここまでの準備ができたら、拡張子がjsファイルを作成しましょう。
jsファイルを作成したら、jsファイルを読み込むコードを記述します。
以下のコードをbodyタグの閉じタグの直前に記述してください。
<script src="ファイルまでのパス/ファイル名.js"></script>
jsファイルの読み込みをするときはjQueryのCDNのコードの後に記述するようにしましょう。
順番的にはこのようになります。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="ファイルまでのパス/ファイル名.js"></script>
これでjQueryを使う準備は完了です。
jQueryの基本知識
jQueryコードを説明する前に、jQueryを理解する上で重要な用語を紹介します。
数多くある用語の中でも特に大切なのがこの3つです。
・セレクタ
・メソッド
・イベント
この用語を順番に説明します。
セレクタ
jQueryを使用する上で意識するのが「どの部分に対して動いを与えるか」ということです。
指定する箇所をjavascriptやjQueryでは「セレクタ」と呼びます。
jQueryの場合。セレクタはこのように指定します。
$('#sample')
$('.sample')
CSSとほぼ同じような記述でセレクタを指定することが可能なので、WEB制作やWEBデザインをされたことのある方はなじみがあると思います。
実際には、「特定のid名」や「特定のclass名」を指定することが多いです。
CSSと同じでid名を指定するときはid名の前に「#」をつけます。
class名を指定するときはid名の前に「.」をつけます。
これも重要なので覚えておきましょう。
メソッド
セレクタを指定したら、メソッドを設定しましょう。
「メソッド」を簡単に説明すると「何をさせるか」ということです。
「メソッド」の例はこのようなモノがあります。
・「特定のdiv要素を非表示にする」
・「特定のdiv要素の背景を赤色にする」
・「特定のdiv要素をフェードインさせる」
・「pタグの文字列の大きさを変化させる」
・「特定のdiv要素にclassを追加・削除・変更させる」
・「特定のHTML要素を追加・削除・変更させる」
「特定のdiv要素を非表示にする」「特定のdiv要素の背景を赤色にする」などはCSSでも実現することが可能です。
しかし、CSSでは装飾などを変更させるタイミングを指定することができません。
また、「特定のdiv要素にclassを追加・削除・変更させる」「特定のHTML要素を追加・削除・変更させる」などHTML構造の部分にも変化を与えれるのがjQueryの利点です。
イベント
「イベント」は変化を起こすタイミングを指定します。
この部分がCSSとの大きな違いです。
例えば、「クリックされたとき」「マウスホーバーしたとき」「ウィンドウが読み込まれたとき」などタイミングを指定するのがイベントです。
jQueryの処理を開始させるタイミングを選ぶことができます。
ここまでがjQueryの基礎知識になります。
次は実際にコード記述していきましょう。
jQueryの基本構文
セレクタ・メソッド・イベントの3つがわかったら実際にjQueryを記述していきましょう。
下記のコードでは全てのdiv要素に対してCSSを適用させています。
HTML
<body> <div class="sample"> <p>この文字色を赤色にします。</p> </div> <p>この部分の文字色は赤色になりません。</p> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/main.js"></script> </body>
Javascript
$("div").css("color", "red");
このように記述するとブラウザではこのように表示されます。
「$(“div”).css(“color”, “red”);」このjQueryの記述はdivの要素内に文字列を赤色にするコードです。
なので、div要素内にある下記の文字列は赤色になります。
<div class="sample"> <p>この文字色を赤色にします。</p> </div>
しかしdiv要素内にはない、下記の文字列の文字色は赤色になりません。
<p>この部分の文字色は赤色になりません。</p>
これはclass名を指定したときも同じです。
このような例を挙げてみましょう。
HTML
<body> <div class="sample"> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> </div> <div class="test"> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/main.js"></script> </body>
jQuery
$(".sample").css("color", "red");
このように記述するとブラウザではこのように表示されます。
class名が「sample」の中にある要素の文字列だけが赤色になります。
このようにjQueryは指定した範囲のみに変化が適用されます。
class名での指定方法を説明しましたが、id名での指定も可能です。
id名で指定するときは「#」をつけるだけでOKです。
HTML
<body> <div id="sample"> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> <p>この文字色を赤色にします。</p> </div> <div id="test"> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> <p>この部分の文字色は赤色になりません。</p> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/main.js"></script> </body>
jQuery
$("#sample").css("color", "red");
WordPressでjQueryを使う場合の注意点
簡単にjQeuryの基本構文を紹介しましたが、WordPressでjQueryを使用する場合には注意が必要です。
それは、WordPressでは「$」を使用するとエラーになります。
つまり、このようなコードを記述するとエラーになり、jQueryは正しく動作しません。
$("#sample").css("color", "red");
WordPressでjQueryを動作させるためには、「$」ではなく「jQuery」を使用します。
実際のコードはこのようになります。
jQuery("#sample").css("color", "red");
このように記述することでWordPressでも正しくjQueryが動作します。
「$」を1つ1つ「jQuery」に書き換えるのは大変なので、テキストエディタの「置換」機能を使ってまとめて書き換えましょう。
jQueryのメソッドを理解する
JQueryの基本構文が理解できた次は、メソッドを理解しましょう。
メソッドは指定したセレクタに対して、どのような変化を与えるのかを指定できます。
上記で使用した「.css」も1つのメソッドです。
メソッドはたくさんあるので、よく使用する重要なモノだけを紹介します。
textメソッド
textメソッドは取得した文字列を変更できるメソッドです。
下記のようなコードで文字列を変更できます。
HTML
<p>ここの文字列が書き換えられます</p>
jQuery
$("p").text("textメソッドで書き換えました");
このように記述するとブラウザではこのように表示されます。
pタグの中には「ここの文字列が書き換えられます」と記載されていますが、ブラウザで表示を確認すると「textメソッドで書き換えました」と表示されます。
このようにtextメソッドは文字列を変更することが可能です。
addClassメソッド
addClassメソッドは名前の通りclassを追加できるメソッドです。
HTML
<p>ここの文字列が書き換えられます</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").addClass("sample");
このように記述するとブラウザではこのように表示されます。
このように記述すると「sample」というclassが追加されます。
なので、sampleというclassが追加されて、文字色が赤色でフォントサイズが大きく太く表示されます。
removeClassメソッド
removeClassはaddClassの反対でClassを削除することが可能です。
HTML
<p class="sample">ここの文字列が書き換えられます</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").removeClass("sample");
このように記述するとブラウザではこのように表示されます。
CSSでは文字色を赤色、フォントサイズを20px、太文字にしていますがブラウザで確認するとCSSは一切設定されていません。
これはjQueryのメソッドである「removeClass」を使用することで「sample」というclassを削除しているからです。
findメソッド
findメソッドは、指定した要素から条件に合致する子孫要素を選択できます。
HTML
<div> <p>サンプルです</p> <p>サンプルです</p> <p>サンプルです</p> <p>サンプルです</p> </div> <p>サンプルです</p> <p>サンプルです</p> <p>サンプルです</p> <p>サンプルです</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("div").find("p").addClass("sample");
このように記述するとブラウザではこのように表示されます。
divの要素内にあるp要素だけが「sample」というclassが追加されてCSSが反映されています。
ここまでがjQueryでよく使用するメソッドです。
次はイベントについて説明します。
jQueryのイベントを理解する
次はイベントの説明です。
イベントはjQueryの処理をおこなうタイミングになります。
jQueryのイベントは無数にあります。
今回はその中でも特に使用頻度の高いイベントを紹介していきましょう。
clickイベント
「clickイベント」は指定したセレクタの領域がクリックされるとjQueryの処理がおこなわれます。
HTML
<p>ココをクリックすると文字列が変化します。</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").click(function() {
$(this).text("クリックして文字列が変化しました！");
})
このように記述するとブラウザではこのように表示されます。
表示された文字列をクリックするとこのように文字列が変化します。
clickイベントはよく使用するので、絶対に覚えておきましょう。
また、clickイベントとほぼ同じように使用できるのが「dblclick」イベントです。
dblclickイベントは、ダブルクリックされたタイミングでjQueryの処理がおこなわれます。
HTML
<p>ココをクリックすると文字列が変化します。</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").dblclick(function() {
$(this).text("クリックして文字列が変化しました！");
})
mousemoveイベント
「mousemoveイベント」は、指定したセレクタ領域へマウスムーブした際にイベントの処理がおこなわれます。
HTML
<p>ココをクリックすると文字列が変化します。</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").mousemove(function() {
$(this).text("クリックして文字列が変化しました！");
})
このように記述するとブラウザではこのように表示されます。
指定したセレクタの領域内にマウスムーブすると表示された文字列が変化します。
hoverイベント
「hoverイベント」は指定したセレクタの領域がホバーされるとjQueryの処理がおこなわれます。
HTML
<p>ココをクリックすると文字列が変化します。</p>
CSS
.sample{
color: red;
font-size: 20px;
font-weight: bold;
}
jQuery
$("p").hover(function() {
$(this).text("クリックして文字列が変化しました！");
})
onイベント
「onイベント」は、click、mousedown、mouseup、loadなど多くのイベントを取得することが可能です。
下記のコードではonイベントでclickイベントを取得しています。
HTML
<p>ココをクリックするとアラートが表示されます。</p>
jQuery
$("p").on("click", function() {
alert("クリックされました。");
})
このように記述するとブラウザではこのように表示されます。
また、下記のコードのように複数のイベントを1度に取得することも可能です。
HTML
<p>ココをクリックするとアラートが表示されます。</p>
jQuery
$("p").on("click mouseover", function() {
alert("クリックされました。");
})
このように記述すると「クリックされたとき」と「マウスが上に乗ったとき」にjQueryの処理がおこなわれます。
offイベント
onイベントで登録したイベントは、そのページが閉じられるまで有効です。
onイベントを解除するのがoffイベントです。
下記のコードはoffイベントを使ってonイベントを削除しています。
HTML
<p>ココをクリックするとアラートが表示されます。</p>
jQuery
$("p").on("click", function() {
alert("イベントが実行されました。");
$("p").off("click");
alert("イベントが削除されました。");
})
ブラウザで確認すると、「イベントが実行されました。」というアラートの後に「イベントが削除されました。」が表示されます。
onイベントのメリット
onイベントを使う場合でも使わない場合でも同じ動作をするコードもあります。
例えば、以下のコードは同じ動作をします。
<p>ココをクリックするとアラートが表示されます。</p>
$("p").click(function() {
alert("cllickされました。");
})
<p>ココをクリックするとアラートが表示されます。</p>
$("p").on("click", function() {
alert("cllickされました。");
})
上記のコードは同じ動作をします。
しかしonメソッドを使うと、いんたらくにイベントを付け外しできます。
onメソッドを使用した方が拡張性が高くなる場合が多いです。
まとめ
いかがでしたか？
初心者の方にとっては、「jQueryは難しい」と思われる方もいるでしょう。
しかし、基本的な構文を習得するだけで色々な表現ができるようになります。
ぜひ覚えて使ってみてください。