jQueryのthisが分かりにくい本当の理由

jQueryのthisが混乱を生む理由

jQueryを触り始めた人が、かなりの確率で止まるポイントがあります。
それが「this」です。

結論から言うと、jQueryで混乱が起きるのはthisが「jQueryオブジェクト」と「DOM要素」を行き来するからです。
しかもコード上は同じ this という単語で表現されます。

つまり難しいのではなく、「指している対象が切り替わっている」のが原因です。

JavaScriptのthisは固定ではない

多くの人が誤解していますが、JavaScriptのthisは変数ではありません。
thisは「その関数が呼ばれた状況」で決まります。

例えばこれです。

const obj = {
  show: function(){
    console.log(this);
  }
};

obj.show();

この場合、this は obj です。
では次はどうでしょう。

const fn = obj.show;
fn();

このとき this は obj ではありません。
呼び出し元が変わったためです。

つまりthisは「どのオブジェクトのメソッドとして呼ばれたか」で変わります。
ここにjQueryが加わることで混乱が増えます。

jQueryオブジェクトのthis

まず普通のメソッド呼び出しです。

$("#box").addClass("red");

このとき addClass の中の this は、#box を保持した「jQueryオブジェクト」です。
だから return this によりメソッドチェーンが成立します。

ここまでは分かりやすいです。

イベント処理に入るとthisが変わる

問題はここからです。

$("#box").click(function(){
    console.log(this);
});

この this は jQueryオブジェクトではありません。
クリックされたDOM要素です。

つまり、jQueryの外側に戻ります。

なぜかというと、イベント処理はjQueryが実行しているのではなく、ブラウザのイベントシステムが関与しているからです。
ブラウザはイベントハンドラ内のthisを「イベントが発生した要素」に設定します。

そのため次のコードになります。

$("#box").click(function(){
    this.style.display = "none"; // 動く
});

これはjQueryを使っていません。
純粋なDOM操作です。

$(this) が必要になる理由

では、なぜ次の書き方が必要になるのでしょうか。

$("#box").click(function(){
    $(this).hide();
});

this はDOM要素なので、hide() を持っていません。
jQueryのメソッドを使うには、jQueryオブジェクトに変換する必要があります。

つまり $(this) は「ラップ」です。
DOM要素をjQueryオブジェクトに包み直しています。

書き方	意味
this	DOM要素
$(this)	jQueryオブジェクト

この違いが、jQueryの理解の分かれ目です。

典型的なバグの原因

よくあるコードです。

$(".btn").click(function(){
    $(".btn").removeClass("active");
    $(this).addClass("active");
});

これは「押したボタンだけactiveにする」処理です。

もし $(this) を使わずにこうすると、挙動が変わります。

$(".btn").click(function(){
    $(".btn").addClass("active");
});

全ボタンがアクティブになります。
jQueryは「集合」を操作するライブラリなので、対象を明確にしないと意図が崩れます。

アロー関数で壊れる理由

さらに混乱するのがアロー関数です。

$("#box").click(() => {
    console.log(this);
});

この this はクリックされた要素ではありません。
アロー関数は自分のthisを持たず、外側のthisを引き継ぐためです。

つまり次は動きません。

$("#box").click(() => {
    $(this).hide();
});

イベントハンドラでは、アロー関数を使うと「クリックされた要素」を取得できません。
jQueryのサンプルコードで function() が多い理由はここです。

なぜjQueryはこの設計になったのか

これはjQueryが「ブラウザのイベントシステムの上に乗っている」ためです。
jQueryが独自にイベントを作っているわけではありません。

ブラウザのルール：

• イベントハンドラのthisはイベント発生要素

jQueryのルール：

• メソッドのthisはjQueryオブジェクト

この2つが混在します。
だから混乱します。

実務上の注意点

特に注意したいのは、jQueryと素のJavaScriptを混ぜたコードです。

const el = document.getElementById("box");

$(el).click(function(){
    el.hide(); // エラー
});

el はDOM要素です。
hide() は存在しません。

このように「DOMかjQueryか」を常に意識しないと、バグになります。

まとめ

jQueryのthisは難しいのではなく、2種類存在します。

• jQueryメソッド内 → jQueryオブジェクト
• イベントハンドラ内 → DOM要素

この切り替えが、jQuery特有の分かりにくさの正体です。

jQueryが理解しにくい理由はAPIの多さではありません。
「同じ単語が違うものを指す」ことです。

逆にここを理解すると、イベント処理のコードは急に読みやすくなります。
そしてJavaScriptのthisの理解も一段深まります。