jQueryを使うメリットは大きく2つです。

• 短いコードで簡単にかける
• 便利なライブラリがたくさんある

それぞれ解説していきます。

短いコードで簡単にかける

jQueryはJavaScriptよりも更に簡単にプログラムを書くことができます。 

JavaScriptで書いたら20行近くかかるコードが、jQueryで書けば2行で済む...なんてこともザラです。 

実装スピードが早まることはもちろん、長いコードを読む必要もないので、バグの発見もラクになり、保守性も上がります。

便利なライブラリがたくさんある

これから先のレッスンでも紹介していくんですが、jQueryにはたくさんのライブラリがあります。

 例えば「画像を何枚かスライドさせる動きをつけたい」と思ったら、自分でゼロから作らなくても世界中のプログラマーが作ったスライダーライブラリが山ほどあります。 

そうした便利なライブラリはjQueryを読み込めば自由に使うことができるので、開発時間を大幅に短縮することができます。 

※ライセンスによって商用利用できるものとできないものがあるので注意は必要です！

練習用ファイルの準備

引き続き、前回使用したファイルを使ってjQueryの学習を進めていきましょう！
※前回使用したファイルをコードメモとして残したい方は、新たに練習用ファイルをダウンロードしてご使用ください！
※新たに練習用ファイルをダウンロードする際は、script.jsファイルをindex.htmlで読み込む設定を行ってください。

ファイルダウンロードはこちら👇

jQueryを使うための準備

※動画ではjQueryライブラリ(CDN)を読み込み順番を逆のまま終了しています。
正しい読込み順に変更してから、次の動画にお進みください。

jQueryのライブラリはCDNを活用して読み込んでいます。以下のjQueryの公式サイトからリンクを取得することができます！
※CDNとはファイルを手元にダウンロードしなくても簡易的に活用できる仕組み、のように捉えてください。

CDNsのセクションまでスクロールしていただき、外部で提供してくれているjQueryのURLを自分が記述するscriptタグの前に読み込んでおきます。

読み込む場所は、HTMLの</body>の直前になります。

コピー  <!-- 先にjQueryを読み込む -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script>
    /* ここに自分のコードを記述する。外部ファイルとして読み込んでもOK */
  </script>
</body>
</html>

今後の課題でも0から自力でコーディングする際に必要になる知識ですので、読み込む順番とCDNの取得方法をぜひ覚えておきましょう！

jQueryを書くときのルール

jQueryを書く時のルールはjQuery("主語").動詞("補語")になります。英語の文法ルールに似ていますね！

それぞれjQuery("セレクタ").メソッド("パラメータ")と呼ばれるものになります。

タイトル「デイトラ」を英語に書き換える処理をJavaScriptで書きましたが、jQueryでも書いてみましょう！
JavaScriptに比べて、かなり短いコードで書けるのが分かりますね！

コピー//JavaScript
document.querySelector("#js-title").innerText = "Daily Trial";

//jQuery
jQuery("#js-title").text("Daily Trial");

ワンポイント (1)

jQuery(function(){})で囲ったコードがよく紹介されていますが、HTMLをすべて読み込んだ後に処理を実行するための記述になります。

JavaScriptを読み込む位置を</body>の直前にすることで、HTMLがすべて読み込まれた後にJavaScriptの処理が実行されます。その場合はjQuery(function(){} で囲う必要は特にありません！

コピー//ページの読み込みを待機している
jQuery(function(){
  //処理内容
})

ワンポイント (2)

$()とjQuery()の書き方があり、どちらも同じ処理を行います。
WordPressではそのまま$()を使用することができないので、頭の片隅に入れておきましょう！

コピー//同じ意味
jQuery("#logo").text("ロゴ")
$("#logo").text("ロゴ")

ポイントは 

• 子要素の中から探す時はfind()かchildren()を使う
• find()とchildren()の違い

です！

要素をクリックした時に、何か特定の処理を行う方法について学びましょう。

代表的な例としてclickとhoverの2つを使ってみます！



イベント監視（click編）

イベント監視（hover編）

最後にjQueryの醍醐味、アニメーションについて勉強していきましょう！