JavaScriptの「this」キーワード、まるわかりガイド！｜DAD UNION

Contents

JavaScriptの「this」って、何者？
「this」の正体を探る！いろんな場面での「this」
メソッドチェーン:「this」で連続技！
まとめ:「this」を使いこなそう！

JavaScriptの「this」って、何者？

JavaScriptを始めたばかりだと、「this」って言葉に戸惑いますよね。でも、安心してください！「this」は、「今、誰がコードを実行しているの？」 を教えてくれる、便利なキーワードなんです。

例えるなら、パーティー会場で「私は〇〇です！」と自己紹介するようなもの。誰が話しているかによって、「〇〇」に入る名前は変わりますよね？JavaScriptの「this」も同じで、コードを実行する場所によって、その意味が変わってくるんです。

「this」の正体を探る！いろんな場面での「this」

1.オブジェクトの中で使う「this」

オブジェクトって、名前や年齢などの情報をまとめた箱みたいなものです。この箱の中に、「自己紹介する」機能を持たせてみましょう。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`こんにちは、私は${this.name}です！`); 
  }
};

person.greet(); // 出力: こんにちは、私はAliceです！

　
この例では、greetという自己紹介機能の中で「this」を使っています。この「this」は、personというオブジェクト自身を指しているので、「私はAliceです！」と出力されるわけです。

2.普通の関数の中で使う「this」

JavaScriptには、オブジェクトの中に入っていない、普通の関数もあります。

function sayHello() {
console.log(こんにちは、${this}から！);
}

sayHello();

　
この場合、「this」はブラウザの「window」というものを指します。「window」とは、Webページ全体を包んでいる大きな箱のようなものです。この箱の中には、Webページを表示するための様々な機能や情報が入っています。なので、「こんにちは、[object Window]から！」のような出力になります。

3.新しいオブジェクトを作る関数の中で使う「this」

オブジェクトをたくさん作るための、特別な関数があります。これを「コンストラクタ関数」と呼びます。

function Car(brand) {
this.brand = brand;
}

const myCar = new Car('Toyota');
console.log(myCar.brand); // 出力: Toyota

　
この例では、「Car」というコンストラクタ関数の中で「this」を使っています。この「this」は、新しく作られる車オブジェクトを指します。なので、myCar.brandで「Toyota」という情報を取り出せるんです。

4.ボタンをクリックした時の「this」

Webページのボタンをクリックした時などに実行されるのが、「イベントハンドラ」です。

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
console.log(this); // クリックされたボタン自身
});

　
この例では、「myButton」というボタンがクリックされた時に、「this」はクリックされたボタン自身を指します。

メソッドチェーン:「this」で連続技！

「this」を使うと、オブジェクトの機能を連続で実行できます。

const calculator = {
value: 0,
add: function(num) {
this.value += num;
return this; // 自分自身を返す
},
subtract: function(num) {
this.value -= num;
return this;
}
};

calculator.add(5).subtract(3); // 5を足して、3を引く

　
この例では、「add」メソッドの中で「this」を返すことで、「calculator.add(5)」の結果に対して、さらに「subtract(3)」を実行できるようになっています。