【jQuery】$(this)の意味＆使い方について

はじめに

jQueryの学習を始めると必ず出てくる$(this)。
こいつは一体なんぞや？？
必ず意味があるはずだけどその意味が全然わからない・・・
恐らく皆さんもそういった経験があると思います。
そこで$(this)の意味と使い方を僕なりにまとめましたので
是非役立ててください！

#$(this)とは？
thisとは一言で言うとデータ取得専用の変数です。
なんのこっちゃ？
とりあえず変数ですのでなんらかの値を入れれるようですが
残念ながらその値を自分で決める事はできません。
(実はJavaScriptのbindメソッドを使えばthisの値を決めれるそうです。)

ではどうやってthisと付き合っていくのか
次でコードを実際にコードをまじえながら見ていきましょう。

$(this)どんな時に使うの？？

jQueryで変数を扱う時例えば・・・

//numに1を代入
var num = 1;

こんな感じで代入しますよね？

しかし先ほども言ったように値を自分で決める事ができないので
上記のような書き方はしません。

じゃあthisに代入する値はどうするの？？
それはJavaScriptの実行内容によって自動的に変化してくれます。
まるでメタモンみたいですね。
(ポケモンは初代派です。)

では実際にコードを見ていきましょう。

HTML

<p>こんにちは！</p>

jQuery

//クリックで文字が赤くなるイベントを作成
$(function(){
 $(`p`).on(`click`, function(){   //----1
  $(this).css(`color`, `red`);    //----2
 );
});

上記のコードはp要素をクリックすると「こんにちは！」の文字列が赤くなるコードを作成しました。
(デフォルトは黒の設定です。)

javascriptの方の2番に注目してください。

thisが使われているかと思いますが、ここには1番で発生したp要素が代入されています。
ですのでイベントが発火した結果「こんにちは！」という文字列が
赤くなるという結果になります。

ですので例えばthisの部分を$("p")に変えても結果は同じという訳です。

このようにthisにはJavaScriptの処理内容によって値が変化します。
メタモンみたいですね。(二回目)

ただ上記のコードだとあまり便利感がわかりません。
なのでthisを使う意味を次でお伝えしましょう。

$(this)を使う意味

HTML

<p>おはよう！</p>
<p>こんにちは！</p>
<p>こんばんは!</p>

jQuery

$(function(){
 $(`p`).on(`click`, function(){  -----1
  $(this).css(`color`, `red`);   -----2
 });
});

先ほどと同じようなコードですが今度はHTMLの方にP要素が三つあります。
ここで各p要素をクリックするとそれぞれ個別で赤くなるという処理になります。

しかし、このthisを$("p")としてまうとどのp要素をクリックしても
全ての文字が赤くなるという処理になってしまいます。

このようにthisには処理の切り分けが簡単にできて
かつ処理自体を自動で切り替えてくれるので
非常にメンテナンス性も可読性もあがります。

もう一つの$(this)を使う理由

さて、先ほどはthisによって処理の切り分けが可能と解説しました。
しかし、処理を分けない（$(this)はどんな時に使うの？のコードのような）場合でも
実は大切な意味があるのです。
それは処理のパフォーマンスを向上させるです。
もし一つずつ値を指定していると、jQuery側ではその度にコードの上から順番に
高速で要素を探し出して処理を加えるという動きになります。

しかし、thisを指定していると処理を加える要素がthisに代入される事になりますので
要素を探し出すという行為を減らせるので処理性能をあげれるということです。

短い単純なコードならあまり実感は湧きませんが
もし大規模なコード群となるとこの処理があるかないかで
大きく結果は変わってきます。

ですので、皆さんも$(this)とうまく付き合って楽しいjQueryライフを過ごしましょう！