今回はthis についてまとめました。
this を初めて勉強したとき、理解できなかったです。
私と同じように理解不十分な方に、この記事がすこしでもヒントになればうれしいです。
thisとは？
～Crebitテキストより～
this（ディス） とは、「イベントが発生したその要素自身」 を指す特別なキーワードです。
複数のボタンがあっても、クリックされたボタンごとに this が切り替わります。
同じ処理を書いても「自分がクリックされたボタンだけ」を操作できるのです。
イメージとしては 「this＝私自身」 と考えると理解しやすくなります。
🪄 イメージで理解するthis
ボタン A と ボタン B があるとします。
どちらもあなたに向かって「クリックされたらこの処理を実行してね」と頼んできます。
そこで、あなたはひとつの関数を用意し、両方に渡します。
function handleClick() {
console.log(this); //←クリックされたボタンそのもの
}
buttonA.onclick = handleClick;
buttonB.onclick = handleClick;
実際にクリックが起こると…
・ボタン A がクリック → ボタン A があなた（関数）に向かって「今クリックしたの私です」と名乗る
・ボタン B がクリック → ボタン B が名乗る
この“名乗り”を受け取る場所が this です。
つまりそのイベントを起こした本人。
ここでは「クリックされたボタンそのもの」を指します。
クリックしたのが A なら this は A、B なら B になります。
同じ関数を渡していても、動く相手は毎回きちんと切り替わります。
どんな場面で使うの？
1. 複数の要素に同じ処理をさせたいとき
クリックされたボタンだけ色を変えたい場合
let btn = document.getElementById(“myButton”);
btn.onclick = function() {
this.style.backgroundColor = “green”;
};
・押されたボタンだけが変わる
・「どのボタンが押されたか」を this が教えてくれる
2. ID や class を毎回書きたくないとき
押された本人に働きかけたいだけの場面。
function toggle() {
this.classList.toggle(“active”);
}
item1.onclick = toggle;
item2.onclick = toggle;
item3.onclick = toggle;
this があるおかげで、どの要素が主語なのかをコードに毎回書かなくて済みます。
3. リストやフォームで「選ばれた行だけ」扱いたいとき
row.onclick = function() {
this.classList.add(“selected”);
};
どの行がクリックされたかを自分で探す必要がなく、
this がその役目を担ってくれます。
まとめ
this（ディス） とは、「イベントが発生したその要素自身」 を指すキーワードです。
・複数の要素をひとまとめの関数で処理したいとき
・「誰が押されたのか」を自動で切り替えてほしいとき
こうした場面でとても役に立ちます。
初めは理解が難しいかもしれませんが、使い慣れると便利ですね。