JavaScriptのthisを理解！7つのサンプルコードで完全解説

はじめに
●JavaScript thisの基本
- ○thisの意味と使い方
●JavaScript thisのサンプルコード
●注意点と対処法
- ○コンテキストの変更
- ○アロー関数と通常の関数
●カスタマイズ方法
- ○thisを活用したプロジェクトのアイデア
まとめ

はじめに

この記事を読むことで、JavaScriptのthisを理解し、使いこなすことができるようになります。

初心者でも分かりやすいように、7つのサンプルコードを用いて、thisの使い方や注意点、カスタマイズ方法を徹底解説します。

●JavaScript thisの基本

○thisの意味と使い方

JavaScriptでは、thisというキーワードを使って、関数の実行コンテキスト（実行されている状況）を参照することができます。

具体的には、thisは関数が所属するオブジェクトを指します。

ただし、関数の実行方法によっては、thisが異なるオブジェクトを指すことがあります。

このため、thisの扱いには注意が必要です。

●JavaScript thisのサンプルコード

それでは、具体的なサンプルコードを見ていきましょう。

○サンプルコード1：オブジェクト内の関数でthisを使う

このコードでは、オブジェクト内の関数でthisを使っています。

この例では、personオブジェクトのsayHelloメソッドでthisを使って、オブジェクトのプロパティにアクセスしています。

const person = {
  name: '太郎',
  sayHello: function() {
    console.log('こんにちは、' + this.name + 'です！');
  }
};

person.sayHello(); // こんにちは、太郎です！

○サンプルコード2：イベントリスナーでthisを使う

このコードでは、イベントリスナーでthisを使っています。

この例では、ボタンクリック時にイベントリスナーがthisを使って、クリックされたボタンのテキストを取得しています。

<button id="myButton">クリックしてね！</button>

<script>
const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('ボタンがクリックされました：' + this.textContent);
});
</script>

○サンプルコード3：setTimeoutでthisを使う

このコードでは、setTimeoutメソッドを用いて、一定時間後に関数を実行する方法を紹介しています。

この例では、personオブジェクトのsayHelloメソッド内でsetTimeoutを使って、3秒後にオブジェクトのプロパティにアクセスしています。

ただし、setTimeout内でthisを使う場合、thisはwindowオブジェクトを指してしまうため、アロー関数を使って対応しています。

const person = {
  name: '太郎',
  sayHello: function() {
    setTimeout(() => {
      console.log('こんにちは、' + this.name + 'です！');
    }, 3000);
  }
};

person.sayHello(); // 3秒後に「こんにちは、太郎です！」と出力される

○サンプルコード4：クラスとインスタンスでthisを使う

このコードでは、クラス定義内でthisを使って、インスタンスのプロパティにアクセスする方法を説明しています。

この例では、Personクラスを作成し、コンストラクタで名前を設定し、sayHelloメソッドでインスタンスの名前を表示しています。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('こんにちは、' + this.name + 'です！');
  }
}

const person1 = new Person('太郎');
person1.sayHello(); // こんにちは、太郎です！

○サンプルコード5：アロー関数でのthisの挙動

このコードでは、アロー関数でthisがどのように振る舞うかを説明しています。

この例では、アロー関数内でthisを使ってオブジェクトのプロパティにアクセスし、通常の関数との違いを確認しています。

const person = {
  name: '太郎',
  sayHello: () => {
    console.log('こんにちは、' + this.name + 'です！');
  }
};

person.sayHello(); // こんにちは、undefinedです！

○サンプルコード6：call, apply, bindを使ってthisを操作する

このコードでは、call、apply、bindメソッドを使用して、関数内でthisが参照するオブジェクトを変更する方法を紹介しています。

この例では、sayHello関数を定義し、それぞれのメソッドを使って、別のオブジェクトのプロパティにアクセスしています。

function sayHello() {
  console.log('こんにちは、' + this.name + 'です！');
}

const person1 = { name: '太郎' };
const person2 = { name: '花子' };

sayHello.call(person1); // こんにちは、太郎です！
sayHello.apply(person2); // こんにちは、花子です！
const sayHelloPerson1 = sayHello.bind(person1);
sayHelloPerson1(); // こんにちは、太郎です！

○サンプルコード7：カスタムイベントでthisを使う

このコードでは、カスタムイベントのリスナーでthisを使う方法を説明しています。

この例では、カスタムイベントを発火させる関数内でthisを使って、イベントデータをセットし、リスナー側でthisを使ってイベントデータにアクセスしています。

class CustomEventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }

  emit(event, data) {
    const eventListeners = this.listeners[event];
    if (eventListeners) {
      eventListeners.forEach((listener) => {
        listener.call(data, event);
      });
    }
  }
}

const eventEmitter = new CustomEventEmitter();

eventEmitter.on('myEvent', function() {
  console.log('カスタムイベント発生：' + this.message);
});

eventEmitter.emit('myEvent', { message: 'こんにちは、カスタムイベントです！' });
// カスタムイベント発生：こんにちは、カスタムイベントです！