【受講記録】デイトラWeb制作コース初級編DAY17

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

初級編DAY17の押さえておきたいポイント

jQueryを使うメリット

• 短いコードで簡単に書ける
  早く実装できるうえに、保守性もあがる。
• 便利なライブラリがたくさんある
  自分がゼロから作らなくても世界中のプログラマーが作ったものを読み込むだけで実装できる。
  ただし商用利用可否は要確認。

読み込み方法

jQueryのライブラリはCDNを活用して読み込む。
CDNとはファイルを手元にダウンロードしなくても簡易的に活用できる仕組み。

jQueryはJavaScriptよりも前に読み込みするように記述が必要。

jQueryの基本

jQueryを書く時のルール　：　jQuery(“主語”).動詞(“補語”)
それぞれjQuery(“セレクタ”).メソッド(“パラメータ”)と呼ばれる。

//JavaScript
document.querySelector("#js-title").innerText = "Daily Trial";
//jQuery
jQuery("#js-title").text("Daily Trial");

jQueryならJavaScriptで書くよりも短いコードで済み、コードを見たときに処理がわかりやすい。

jQueryの部分を$にしてさらに短縮することもできるが、WordPressではこのまま$では使えないので注意が必要。

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

セレクタの指定方法

セレクタの指定方法は、基本的にCSSやJavaScriptと同様。

ただ、jQueryではセレクタをまとめて指定したり、子要素・孫要素などの条件を追加してセレクタを指定できる。

//グループセレクタ
//.hoge と .fuga
jQuery(".hoge, .fuga")
//子孫セレクター
//.hoge 配下の .fuga
jQuery(".hoge .fuga")
//子セレクター
//.hoge 直下の .fuga
jQuery(".hoge > .fuga")

参考サイト
そのほかのセレクタの指定方法は公式確認。
https://api.jquery.com/category/selectors/

jQuery(”セレクタ”)を起点として、親子要素や兄弟要素を指定するメソッドもある。
樹形図のように親子関係がある要素を辿って指定できることから、 これらのメソッドのことをTree Traversalという。

• find()メソッド：子要素以下の階層から検索。（孫以下も含む）
• children()メソッド：直下の子要素からのみ検索。（孫は含まない）

jQuery()では一致するすべての要素を取得するので、個別に操作するためには.each(function)で繰り返し処理が必要になる。
JavaScriptのforEachと同様。

//一致する全ての要素が取得される
const elements = jQuery(".text");
//個別に操作するためには繰り返し処理が必要
elements.each(function () {
  console.log(jQuery(this).text());
});

初級編DAY17の追加で調べたいことメモ

• Tree Traversalのバリエーションと意味、使い方を知りたい。

初級編DAY17の感想と記録

jQuery、JavaScriptよりも圧倒的にわかりやすくて好きになりそう。。。

ただ、やってみたときにjQueryの”j”をちゃんと小文字で書かなければいけなかったり、
””ダブルコーテーションが抜けているとダメだったり。
細かい部分で注意しないといけないと思った。

あ、でもこれもスニペット登録でミスを最小化できるのかな。
jQueryのスニペットはコメントアウトしていたので、解除して使いこなせるようになろう！

よし、引き続きがんばろう！

DAY17 完了日　：　2024年11月4日（月）
DAY17 所要時間　：　1.5h
Web制作コース 初級編Total ：　32.5h