JavaScriptのthisとは？例文を通じて徹底的に理解しよう

（最終更新月：2023年11月）

✔当記事は以下のような疑問を持つ方へ向けて書かれています

「JavaScriptのthisって具体的に何を指すのだろう？」

「JavaScriptのthisを適切に使いこなしたい」

「JavaScriptのthisを使った具体的な例を見てみたい」

✔当記事を通じて理解していただくこと

JavaScriptのthisの基本概念
thisを用いたJavaScriptのコーディング方法とその応用
JavaScriptのthisを使用した実例

当記事ではJavaScriptのthisの基本的な概念から始め、その使い方や応用方法まで具体的な例とともに解説しています。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

JavaScriptと’this’

こちらでは、JavaScriptでの「this」の動作を詳しく解説します。

「this」の振る舞いを理解することで、より効果的なプログラミングが可能です。

‘this’とは
コード試行
基本構文

‘this’とは

「this」はJavaScriptのキーワードのひとつで、現在の実行コンテキストに関連するオブジェクトを参照します。

const obj = {
  name: "John",
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // John

この例では、this.nameはobjオブジェクトのnameプロパティを指します。

コード試行

JavaScriptでの「this」の振る舞いは、実際のコードで試行することでよく理解できます。

function testThis() {
  console.log(this);
}
testThis(); // Windowオブジェクト

こちらの例では、関数内でのthisはグローバルオブジェクト、ブラウザの場合はWindowオブジェクトを指します。

基本構文

「this」は、オブジェクトのメソッド内や単体の関数内など、さまざまな場所で使用可能です。

基本的に、実行時のコンテキストに基づいてその参照先が変わる特徴があります。

‘this’の振る舞い

こちらでは、「this」が異なるコンテキストでどのように振る舞うかを解説します。

「this」の動作メカニズムを深く理解することで、コードの質と効率性を高める手助けとなるでしょう。

グローバルコンテキストでの’this’
関数コンテキストでの’this’
クラスコンテキストでの’this’

グローバルコンテキストでの’this’

グローバルコンテキスト、つまり関数の外でのthisは、ブラウザ環境ではWindowオブジェクトを指します。

console.log(this); // Windowオブジェクト

関数コンテキストでの’this’

関数の中でのthisは、通常、グローバルオブジェクトを指すものです。

ただし、厳格モード(“strict mode”)ではundefinedになります。

function exampleFunction() {
  "use strict";
  console.log(this);
}
exampleFunction(); // undefined

クラスコンテキストでの’this’

クラスのメソッド内ではthisは、そのクラスのインスタンス（つまりオブジェクト）を指します。

class ExampleClass {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}
const instance = new ExampleClass("John");
instance.showName(); // John

‘this’の活用

こちらでは、’this’の実用的な使用方法やテクニックを探求します。

‘this’をより効果的にコードに組み込む方法を学べるでしょう。

関数内の’this’使用例
‘this’とオブジェクト制御
bindメソッドの活用
‘this’とアロー関数
‘this’とオブジェクトメソッド
‘this’とDOMイベント

関数内の’this’使用例

関数内でのthisの参照は、その関数がどのように呼び出されるかに依存します。

const obj = {
  func: function() {
    console.log(this);
  }
};
obj.func(); // objを指す

‘this’とオブジェクト制御

オブジェクトのメソッド内で、そのオブジェクト自体を参照したい場合にthisを活用します。

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
person.greet(); // "Hello, Alice"

bindメソッドの活用

JavaScriptのbindメソッドは、関数のthisを固定するために使用されます。

特定のオブジェクトに関数をバインドすることで、そのオブジェクトとして関数を実行可能です。

const person = {
  name: "Alice",
};
function greet() {
  console.log("Hello, " + this.name);
}
const boundGreet = greet.bind(person);
boundGreet(); // "Hello, Alice"

‘this’とアロー関数

アロー関数はthisの動作が通常の関数とは異なります。

アロー関数のthisは、宣言された時点のスコープのthisをキャプチャするからです。

const person = {
  name: "Bob",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, " + this.name);
    }, 1000);
  }
};
person.greet(); // "Hello, Bob" が1秒後に表示

‘this’とオブジェクトメソッド

オブジェクトのメソッド内でthisを使用すると、そのメソッドを持つオブジェクトを参照します。

const car = {
  brand: "Toyota",
  getBrand: function() {
    return this.brand;
  }
};
console.log(car.getBrand()); // "Toyota"

‘this’とDOMイベント

DOMイベントのハンドラー内でthisを使用すると、そのイベントがアタッチされた要素を参照します。

document.querySelector("button").addEventListener("click", function() {
  console.log(this.textContent);
});

‘this’の応用

こちらでは、’this’をさらに深く、高度な方法で使用するテクニックを解説します。

‘this’と関数の関連性
メソッドチェーンと’this’
callとapplyの区別
bindの利用法
関数内関数と’this’

‘this’と関数の関連性

関数がどのようなコンテキストで呼び出されたかによって、thisの参照先が変わることを理解することは、thisの振る舞いを正確に予測するための鍵となります。

function introduce() {
  console.log("My name is " + this.name);
}
const user = { name: "Bob" };
introduce.call(user); // "My name is Bob"

メソッドチェーンと’this’

メソッドチェーンを使用するとき、各メソッドがthisを返すと、フルエントなAPIを作成できます。

const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  subtract(n) {
    this.value -= n;
    return this;
  }
};
calculator.add(5).subtract(3);
console.log(calculator.value); // 2

callとapplyの区別

callとapplyは関数を呼び出し、そのthisを指定する方法ですが、引数の取り方が異なります。

callは個別の引数を取り、applyは引数の配列を取るのです。

function showInfo(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}
const person = { name: "Charlie" };
showInfo.call(person, "Tokyo", "Japan");
showInfo.apply(person, ["Tokyo", "Japan"]);

bindの利用法（詳細）

bindを使用すると、関数のthisを事前に指定したオブジェクトに固定できます。

また、部分的に引数を適用することも可能です。

function multiply(a, b) {
  return a * b * this.value;
}
const doubler = multiply.bind({ value: 2 }, 2);
console.log(doubler(5)); // 20

関数内関数と’this’

関数内の関数では、thisはグローバルオブジェクトを参照する可能性があります。

これを避けるためには、変数にthisを代入したり、アロー関数を使用する方法を使いましょう。

const person = {
  name: "David",
  greet: function() {
    const self = this;
    function innerFunction() {
      console.log("Hello, " + self.name);
    }
    innerFunction();
  }
};
person.greet(); // "Hello, David"