jQueryのthisとは？

jQueryは、JavaScriptを簡潔に記述できるようにしたライブラリです。そのjQueryにおいて、thisは非常に重要な役割を担っています。 thisは、特定の状況下で、操作対象となるDOM要素を指し示すためのキーワードです。

thisの基本的な使い方

thisは、jQueryのイベントハンドラ関数内で頻繁に使用されます。例えば、ボタンがクリックされたときに、そのボタンの色を変更したい場合、以下のように記述します。


<button id="myButton">クリック</button>

<script>
$(document).ready(function() {
  $("#myButton").click(function() {
    $(this).css("background-color", "red");
  });
});
</script>

上記のコードでは、$("#myButton").click(function() { ... });の部分でクリックイベントを設定しています。関数内の$(this)は、クリックされたボタン自身をjQueryオブジェクトとして参照しています。そのため、$(this).css("background-color", "red");を実行することで、クリックされたボタンの背景色が赤色に変更されます。

thisと他のセレクタとの組み合わせ

thisは、他のセレクタと組み合わせて使用することも可能です。例えば、クリックされたリストアイテムの次の兄弟要素を取得したい場合は、以下のように記述します。


<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<script>
$(document).ready(function() {
  $("li").click(function() {
    $(this).next().css("font-weight", "bold");
  });
});
</script>

上記のコードでは、$(this).next()によって、クリックされたリストアイテムの次の兄弟要素を取得し、太字に設定しています。

注意点

thisは、jQueryのイベントハンドラ関数内では、イベントが発生した要素を指します。
thisは、通常の関数内では、異なるオブジェクトを指す可能性があります。
thisは、アロー関数内では、定義された場所のコンテキストを維持します。

thisの使用例

例	説明
`$(this).hide();`	クリックされた要素を非表示にする
`$(this).parent().addClass("active");`	クリックされた要素の親要素に "active" クラスを追加する
`$(this).find("span").text("更新");`	クリックされた要素内のすべての <span> 要素のテキストを "更新" に変更する

参考資料

jQuery.com: this

## jQueryのthisに関するQ&A **Q1: jQueryのイベントハンドラ関数内で、this を使用せずにイベントが発生した要素を取得することはできますか？** **A1:** はい、可能です。`event.target` を使用することで、イベントが発生した要素を取得できます。例えば、下記のコードは、クリックされた要素の背景色を赤に変更する例です。 ```javascript $(document).ready(function() { $("button").click(function(event) { $(event.target).css("background-color", "red"); }); }); ``` **Q2: jQueryのthisとJavaScriptのthisは同じものですか？** **A2:** 基本的には同じものですが、jQueryのイベントハンドラ関数内では、jQueryがthisをイベントが発生した要素に設定します。つまり、jQueryのイベントハンドラ関数内でthisを使用する場合、$(this)とすることでjQueryオブジェクトとして扱うことができます。 **Q3: アロー関数を使用する場合、thisはどうなりますか？** **A3:** アロー関数を使用する場合、thisは定義された場所のコンテキストを維持します。つまり、jQueryのイベントハンドラ関数内でアロー関数を使用する場合、thisはイベントが発生した要素ではなく、アロー関数が定義された場所のthisを指します。

その他の参考記事:jquery id 取得