「$(this)」と「this」を使いこなして、jQueryプログラミングをレベルアップ！

2024-04-02

JavaScriptとjQueryにおける「this」キーワードは、様々な意味を持つ複雑な存在です。特にjQueryと組み合わせて使用すると、さらに複雑になります。

本解説では、「$(this)」と「this」の違いを、以下の3つの観点から詳細に解説します。

基本的な動作
- JavaScriptにおける「this」
- jQueryにおける「this」
- $(this) と this の比較
イベントハンドラにおける動作
- イベントハンドラ内の this

| 項目 | (this)∣this∣∣−−−∣−−−∣−−−∣∣参照対象∣jQueryセレクタで選択された要素セット∣呼び出しコンテキストによって異なる∣∣使用方法∣jQuery関数内で使用∣JavaScriptコード内で直接使用∣∣主な用途∣DOM操作やイベント処理∣オブジェクト指向プログラミング∣∗∗2.イベントハンドラにおける動作∗∗∗∗イベントハンドラ内のthis∗∗−イベントが発生した要素を参照−複数要素にイベントハンドラを設定した場合、各要素で個別にthisが評価∗∗(this) と this の比較**

| 項目 | (this)∣this∣∣−−−∣−−−∣−−−∣∣参照対象∣イベントが発生した要素∣イベントが発生した要素∣∣使用方法∣イベントハンドラ内で使用∣イベントハンドラ内で使用∣∣主な用途∣イベントハンドラ内の処理を要素に依存させる∣イベントハンドラ内の処理を要素に依存させる∣∗∗3.高度なユースケース∗∗∗∗.bind()と.on()∗∗−.bind()/.on()は、イベントハンドラを要素にバインド−thisの参照対象を明示的に指定可能∗∗.live()と.delegate()∗∗−.live()/.delegate()は、動的に追加された要素にもイベントハンドラを適用−thisの参照対象は、イベントが発生した要素∗∗コールバック関数におけるthis∗∗−コールバック関数内でthisを使用する場合は、明示的にthisを保存∗∗その他のユースケース∗∗−プラグイン開発−オブジェクト指向プログラミング∗∗結論∗∗「(this)」と「this」は、どちらも要素へのアクセスを提供しますが、異なる動作を持ちます。それぞれの特性を理解し、適切に使用することが重要です。

JavaScriptにおけるthisの詳細解説: URL JavaScript this
jQueryにおけるthisの詳細解説: URL jQuery this
高度なユースケースの詳細解説: URL JavaScript advanced this

補足

本解説は、理解を深めるために詳細な説明を記載しています。
初心者の場合は、基本的な動作のみ理解しておけば問題ありません。

// JavaScript
function handleClick() {
  console.log(this); // this は button 要素を参照
}

const button = document.querySelector("button");
button.addEventListener("click", handleClick);

// jQuery
$("button").click(function() {
  console.log($(this)); // $(this) は button 要素を jQuery オブジェクトとして参照
});

イベントハンドラにおける動作

// JavaScript
const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", function() {
    console.log(this); // this は各 button 要素を参照
  });
}

// jQuery
$("button").click(function() {
  console.log($(this)); // $(this) はクリックされた button 要素を参照
});

高度なユースケース

// .bind()

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(this); // this は button 要素を参照
}.bind(this));

// .on()

$("button").on("click", function() {
  console.log($(this)); // $(this) はクリックされた button 要素を参照
});

// .live()

$(document).live("click", "button", function() {
  console.log(this); // this はクリックされた button 要素を参照
});

// .delegate()

$(document).delegate("button", "click", function() {
  console.log($(this)); // $(this) はクリックされた button 要素を参照
});

// コールバック関数

function handleClick(event) {
  const element = event.target;
  console.log(this); // this は handleClick 関数を呼び出したオブジェクトを参照

  // this を明示的に保存
  const that = this;

  function nestedFunction() {
    console.log(that); // that は handleClick 関数内の this を参照
  }

  nestedFunction();
}

const button = document.querySelector("button");
button.addEventListener("click", handleClick);