jQuery徹底入門講座①

2020年6月11日 06:30

jQueryとは

皆さん、jQueryは使っていますか？今どきjQuery？と思うかもしれませんが、jQuery自体は未だにwordpressの多くのプラグインで利用されていたり、根強い人気を持っているのは確かです。

この講座では、講座が終わる頃には、ECサイトの実装で必要な動作の基礎がマスターできて、実際のECサイトを作る能力が身についています。
また、この基礎講座の後には実際に「よくあるECサイト」を、この講座の内容を使いながら作り上げていく【仕事につながる超実践講座】も開講予定ですので乞うご期待。

さて、そんなjQueryって一体なに？って思うかもしれませんが、一言で言えば「面倒なJavaScriptの実装を楽にしてくれるライブラリ」です。

ライブラリというのは、便利な関数(僕は関数のことを役割を全うする小さなおじさんと呼んでます)の集まりと思ってください。

構文は超シンプルで、「何を」「どうするか」ということを書くだけです。

スクリーンショット 2020-06-09 00.20.15

例えば、【class="target"】の色を赤に変える場合、こう書きます。

スクリーンショット 2020-06-10 09.07.28

非常にシンプルですね。

さらに、イベントとの組み合わせもシンプルです。例えば、特定のボタンが押されたら色を変える場合、こう書きます。

スクリーンショット 2020-06-10 09.08.34

どうですか？今まで、JavaScriptではイベントに合わせて何か処理するには、イベントリスナーを登録したり、属性に登録したりと面倒な処理が必要でしたが今回はシンプルです。

なんだかワクワクしますね。

Step1: jQueryの使い方

jQueryを使うには2種類の方法があります。

A. jQueryをダウンロードしてきて使う方法
B. CDNを利用する方法

A. jQueryをダウンロードしてきて使う方法

jQueryの公式サイトに行って、ダウンロードします。

画面右のDownload jQueryというやつですね。
(執筆当時.2020年6月9日時点では最新版はv3.5.1でした)

スクリーンショット 2020-06-10 09.20.18

いくつかのリンクが出てくるので、「Download the compressed， production jQuery 3.5.1」というリンクを右クリックして別名で保存します。

スクリーンショット_2020-06-10_09_21_45

そうすると【jquery-3.5.1.min.js】というファイルがダウンロードされます。

これを読み込んでjQueryが使えるか試してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>jQueryの読み込みテスト</title>
 <script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
 $(function() {
   alert('jQueryの読み込みに成功')
 })
</script>

</body>
</html>

headタグの中で、先程ダウンロードしたjQueryのファイルを読み込むだけでOKです。
bodyタグの中に、scriptタグを書いて、$(fucntion() {...処理...})という形で書いていきますが、この【$】というのが使えて、アラートが表示されれば読み込み成功です。

B. CDNを利用する方法

次にCDNを利用する方法を解説します。CDNというのはコンテンツデリバリーネットワークの略で、超簡単に言うと「アクセスした人の一番近いところにあるパソコンから返事します」という仕組みです。
詳しく知りたい人はTwitterで聞いてくださいｗ需要があれば図解します。

CDNは、公式サイトが公開してるURLを使います。

スクリーンショット_2020-06-10_09_37_13

こちらをクリックするとポップアップが出るので、このスクリプトタグをコピーします。(右側の青いボタンを押すとコピーできます)

スクリーンショット 2020-06-10 09.37.18

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>jQueryの読み込みテスト(CDN)</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
 $(function() {
   alert('jQueryの読み込みに成功')
 })
</script>

</body>
</html>

さっきと違うのは、headタグのscriptタグの部分です。ここは上の公式サイトでコピーしてきたものをそのまま貼り付けて下さい。
CDNを使うと、毎度ファイルをダウンロードしてこなくて済むので、ファイルサイズを抑えるなどのメリットがある反面、CDNサーバーが落ちてるなどの外部の影響で自分のページに影響がある可能性があります。

普通に練習してる分にはCDNの方が楽なのでこちらを良く使います。

Step2: jQueryを使う時の作法

さて、先程、$(function() {...処理...})と書きましたが、この作法とは一体何なのでしょうか。

よく見ると、最初に紹介したこの書き方と似てますね。

スクリーンショット 2020-06-09 00.31.52

つまり、セレクターと、イベントが発生した時の処理を書いてる訳です。

スクリーンショット 2020-06-10 09.50.17

ちなみに、「jQueryと$」は同じ意味です。また、ここに書いてる通り、「jQuery(document).ready」は省略可能なので、このような書き方になってます。

Step3: jQueryで特定の要素にアクセスする

JavaScriptで要素にアクセスするには、getElementByxxxというメソッドを使ってました。jQueryではどのように書くのかを説明していきます。

A. クラス名で取得
B. ID名で取得
C. タグ名で取得

A. クラス名で取得
基本的に緑色部分のセレクターのところは、CSSのセレクターと一緒です。
クラス名の場合は、「.(ドット)」で指定すればOK。

スクリーンショット 2020-06-09 00.26.33

B. ID名で取得
ってことは、ID名は「#(シャープ)」で指定すればOKですね。

スクリーンショット 2020-06-09 00.26.28

C. タグ名で取得
これも同じで、タグ名指定すればOKです。

スクリーンショット 2020-06-09 00.26.25

Step4: jQueryでイベントに合わせて処理する方法

前回のJavaScriptのイベント徹底解説編で、イベントに合わせて処理を行う方法を学びました。
これをjQueryでやってみましょう！

例として、ボタンがクリックされた時に文字の色を変えるサンプルをjQueryで書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>jQueryの読み込みテスト(CDN)</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
 <button>ここを押すと色が変わります</button>
 <p>テキストテキストテキスト</p>
<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら...
   // 関数はアローカン関数を使って、() => {}と記載してもOK
   $('button').on('click', function() {
     // pタグの色を赤色にする
     $('p').css('color', 'red')
   })
 })
</script>

</body>
</html>

実際にやってみましょう！
↓ ボタンを押す前

スクリーンショット 2020-06-10 21.19.03

↓ ボタンを押した後
色が変わりましたね！

スクリーンショット 2020-06-10 21.19.09

かなりシンプルに書けるのが分かると思います。

では、次、クリックしたら文字を非表示にする。をやってみましょう。

JavaScriptのときは、cssのdisplay=noneを指定して、非表示にしました。
まずはこの方法を試してみましょう。
(head部分は変わらないので、body部分だけ表示します)

<body>
 <button>非表示にする</button>
 <p>テキストテキストテキスト</p>
<script type="text/javascript">
 $(function() {
   // ボタンがクリックされたら...
   // 関数はアローカン関数を使って、() => {}と記載してもOK
   $('button').on('click', function()  {
     $('p').css('display', 'none')
   })
 })
</script>

</body>

これでもOKなのですが、jQueryに、hide関数というものがあり、これを使うと対象の要素を非表示にできます。
この方法を試してみましょう。
(body部分は変わらないのでJavaScript部分のみ)

  $(function() {
   // ボタンがクリックされたら...
   // 関数はアローカン関数を使って、() => {}と記載してもOK
   $('button').on('click', function() {
     // hide関数を使って文字を非表示にする
     // $('p').css('visibility', 'none')
     $('p').hide()
   })
 })

結果はどちらも同じです。簡単ですね！
ちなみに、hideがあるってことは逆もありそうですよね？

そう！show関数というものがあり、これは要素を表示してくれます。
この関数を使って、非表示と表示の両方のボタンを作ってやってみましょう。

<body>
 <button id="btn_hide">非表示にする</button>
 <button id="btn_show">表示する</button>
 <p>テキストテキストテキスト</p>
<script type="text/javascript">
 $(function() {
   // 非表示にするボタンが押されたらpタグを非表示にする
   $('#btn_hide').on('click', function() {
     $('p').hide()
   })
   // 表示にするボタンが押されたらpタグを表示する
   $('#btn_show').on('click', function() {
     $('p').show()
   })

   /**
    * アロー関数を使う場合の記述例
   $('#btn_hide').on('click', () => $('p').hide())
   $('#btn_show').on('click', () => $('p').show())
   */
 })
</script>

こんな感じです。超簡単ですね(最後の方にアロー関数を使った例も書いてますが、だいぶシンプルに書けるのが分かるかと思います)
↓ 非表示ボタンをクリック

スクリーンショット 2020-06-10 21.30.49

↓ 表示するボタンをクリック

スクリーンショット 2020-06-10 21.30.55

Step5: ボタン1つで表示・非表示を切り替えてみる

さて、ボタンクリックで文字を表示・非表示制御してみましょう。　

今回は折角なので2種類紹介してみましょう。

A. addClass / removeClassを使う方法
B. toggleを使う方法

A. addClass/removeClassを使う方法
これは関数名の通りですが、クラスを付けたり外したりして、文字を表示にしたり、非表示にします。
実際にやってみましょう。

と、言いたいところですが、まぁまぁ面倒なのでちょっと解説します。

1. showクラス(表示する)とhideクラス(非表示にする)を用意する
2. 最初はshowクラスを付けて、表示状態にしておく
3. ボタンを押された状態で、クラス名を取得
4. showクラスが付いてたら、「showクラスを外して(removeClass)、hideクラスをつける(addClass)」
5. hideクラスが付いてたら、「hideクラスを外して(removeClass)、showクラスをつける(addClass)」

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>ボタンクリックで文字を非表示/表示する</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <style>
   /** 1. showクラス(表示する)とhideクラス(非表示にする)を用意する */
   .hide {
     display : none;
   }

   .show {
     display : block;
   }
 </style>
</head>
<body>
 <button>表示・非表示の切り替え</button>
 <!-- 2. 最初はshowクラスを付けて、表示状態にしておく -->
 <p class="show">テキストテキストテキスト</p>
<script type="text/javascript">
 $(function() {
   $('button').on('click', function() {
     // 3. ボタンを押された状態で、クラス名を取得
     const className = $('p').prop('class')
     // 4. showクラスが付いてたら、「showクラスを外して(removeClass)、hideクラスをつける(addClass)」
     if (className === 'show') {
       $('p').removeClass('show')
       $('p').addClass('hide')
     } else {
       // 5. hideクラスが付いてたら、「hideクラスを外して(removeClass)、showクラスをつける(addClass)」
       $('p').removeClass('hide')
       $('p').addClass('show')
     }
   })
 })
</script>
</body>
</html>

こんな感じで実装です。

↓ 最初にボタンを押した後 (文字が消えてます)

スクリーンショット 2020-06-10 21.46.43

↓ もう一度ボタンを押した後 (文字が表示されてます)

スクリーンショット 2020-06-10 21.46.49

ちなみに、ボタンがずっと「表示・表示の切り替え」ってちょっと気持ち悪いですよね。
文字が表示されてるときは「非表示にする」、文字が非表示のときは「表示する」ってボタンになってる方が自然ですよね？

ね？？

じゃあ演習ですね！！笑

理解度チェックテスト1

さて、毎度同じみの理解度チェックです。

以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

1. pタグのクラス名に「show」がついてる(文字が表示されてる状態)ときは、ボタンのテキストを「非表示にする」にする
2. pタグのクラス名に「hide」がついてる(文字が非表示)ときは、ボタンのテキストを「表示する」にする

B. toggleを使う方法

さっきのクラスを切り替える方法どうでしたか？

ぶっちゃけ面倒臭いですよね？笑

jQueryにはまた便利な関数がありまして、toggleというやつなんですが、この関数を使うと要素の表示・非表示を勝手に切り替えてくれるんです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>ボタンクリックで文字を非表示/表示する(toggleを使う)</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
 <button>表示・非表示の切り替え</button>
 <p class="show">テキストテキストテキスト</p>
<script type="text/javascript">
 $(function() {
   $('button').on('click', function() {
      $('p').toggle()
   })
 })
</script>

</body>
</html>

今度はクラスの用意もありません。if文も登場しません。スッキリしてますね。これだけで表示・非表示の切り替えができます。

ちなみに、toggle関数は引数を受け付けています。

「どんな引数を受け取るの？」と思ったあなた。ドキュメントのお時間です！！
ちなみにtoggle関数については公式ドキュメントのこちらに書いてあります。

スクリーンショット 2020-06-10 22.02.46

第一引数(丸括弧の1番最初に書く)には、【duration】を指定して、第二引数(丸括弧の2番目に書く)は、【complete】をかけと書いてあります。

ちなみに、以下の様な指定があります。

duration: タイプ(引数で受け取る型)は数値か文字列 → これはアニメーションにかける時間です(0なら、アニメーションがかかりません)
complete: タイプはfunction(関数)、アニメーションが終わった後に実行される関数

ちょっと分かりづらいかもしれないのでデモをご覧ください。

さて、この第二引数に関数を書くと、処理が終わった後に別の処理を実行することができます。
先程と同様に、toggleを使った場合でも、文字が表示されてたらボタンは「非表示」、文字が非表示ならボタンは「表示」にしたいですね。

それを実現してみてください。

理解度チェックテスト2

さて、毎度同じみの理解度チェックです。

今回はtoggleの第二引数に以下を実現する関数を書いてみてください。

1. pタグのクラス名に「show」がついてる(文字が表示されてる状態)ときは、ボタンのテキストを「非表示にする」にする
2. pタグのクラス名に「hide」がついてる(文字が非表示)ときは、ボタンのテキストを「表示する」にする

Step6: 「TOPへ戻る」を実装してみる

さぁ、楽しかったjQueryのイベント編も最終回。

JavaScriptで実装した「TOPへ戻る」をjQueryでも作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>TOPへ戻るの実装</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <style>
   #back_to_top {
     position: fixed;
     bottom: 0px;
     right: 30px;

     width: 300px;
     height: 50px;
     text-align: center;
     border-radius: 14px;
     line-height: 50px;
     background: #DF3053;
     color: #fff;
     font-weight: bold;
   }
 </style>
</head>
<body>
 <div>
   <h1>ページタイトル</h1>
   <p style="padding-bottom: 500px;">テキストテキスト1</p>
   <p style="padding-bottom: 500px;">テキストテキスト2</p>
   <p style="padding-bottom: 500px;">テキストテキスト3</p>
   <p style="padding-bottom: 500px;">テキストテキスト4</p>
   <p id="back_to_top">TOPへ戻る</p>
 </div>

 <script type="text/javascript">
   $(function() {
     $('#back_to_top').on('click', function() {
       // TOPへ戻るがクリックされたら、画面のTOPの位置を0に戻す(0.5秒かけて)
       $('body, html').animate({
         scrollTop: 0
       }, 500)
     })
   })

 </script>
</body>
</html>

めちゃ簡単ですね。
気にすべき点は2個だけ。

1. クリックされたら、0.5秒(500ミリ秒)かけて2の処理をする
2. 画面のTOPの位置を0(画面の最上部)まで持っていく

これを実装してます。

↓に動作デモがあるので見て下さい。

理解度チェックテスト3

さて、毎度おなじみの理解度チェックです。

scrollイベントを使って、以下の機能を実装してみてください。

1. 「TOPへ戻る」ボタンをページ内のスクロール量が300を超えたらフェードインさせて表示
2. 「TOPへ戻る」ボタンをページ内のスクロール量が300未満ならフェードアウトさせて非表示にする

↓ こちらが答えのサンプルです。

ヒント

・スクロール量は、scrollTopメソッドで取得できます
・スクロールイベントというものもあり、「$(window).on('scroll', function() {...処理...})」と書くと、この処理はスクロールの度に実行させることができます
・イベント時に動作する関数の中で、$(this)とすると、そのイベントを発生した要素を表します(例えば上のscrollイベントの関数の中で$(this)を呼び出せば、window要素のことを指します
・フェードイン(徐々に表示)するときはfadeInメソッド、フェードアウト(徐々に消える)するときはfadeOutメソッドを使います

ちょっと難しいですが、ぜひトライして見て下さい。

わからなければTwitterでお気軽に質問してください。

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
サポートしてくれたら泣いて喜びます！直接DMでお礼させていただきます！！
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

次回は、jQueryを使ってテキスト(インプット要素)の値を取得して、チャットみたいなものを作ってみます。乞うご期待！

実践編で利用するための基礎編はすべて無料公開してます。基礎編のモチベーション向上のためにサポートして頂けるとめちゃくちゃ喜びます！！だいたい作業工数は1記事あたり4-5時間程度かけて【分かりやすい】【知識が身につく！】を意識して作っておりますので、今後も頑張っていきます！