JS アロー関数と this の束縛

JPKODA 編集部 May 7, 2026

アロー関数と従来の関数の最も顕著な違いの一つは、this キーワードの扱い方にあります。

この違いを理解することは、オブジェクトのメソッド、イベントハンドラー、そして非同期操作において、正しく予測可能な JavaScript コードを書くために極めて重要です。本章では、アロー関数における this がどのようにバインド（束縛）されるのかを探索し、従来の関数と比較しながら実例を交えて解説します。

1. 従来の関数における this の理解

従来の JavaScript 関数において、this の値は動的（Dynamic）であり、関数が「どのように呼び出されたか」に依存します。this は関数自体を指すのではなく、その関数を「所有」している、あるいは呼び出したオブジェクトを指すため、混乱を招くことが少なくありません。

1.1 暗黙的なバインド

関数がオブジェクトのメソッドとして呼び出されるとき、this はそのオブジェクトにバインドされます。

const person = {
  name: 'アリス',
  greet: function() {
    console.log(`こんにちは、私の名前は ${this.name} です`);
  }
};

person.greet(); // 输出: こんにちは、私の名前は アリス です

この例では、greet 関数内部の this は person オブジェクトを指しています。

1.2 明示的なバインド (Explicit Binding)

call、apply、または bind メソッドを使用することで、this の値を明示的に設定できます。

function greet() {
  console.log(`こんにちは、私の名前は ${this.name} です`);
}

const person = {
  name: 'ボブ'
};

greet.call(person);   // 输出: こんにちは、私の名前は ボブ です
greet.apply(person);  // 输出: こんにちは、私の名前は ボブ です

const greetPerson = greet.bind(person);
greetPerson();        // 输出: こんにちは、私の名前は ボブ です

1.3 new バインド (New Binding)

new キーワードを使用して関数を呼び出すとき、this は新しく作成されたオブジェクトにバインドされます。

function Person(name) {
  this.name = name;
  console.log(`新規ユーザーを作成中: ${this.name}`);
}

const person = new Person('チャーリー'); // 输出: 新規ユーザーを作成中: チャーリー
console.log(person.name);             // 输出: チャーリー

1.4 デフォルトバインド (Default Binding)

上記のルールのいずれも適用されない場合、this はグローバルオブジェクト（ブラウザでは window、Node.js では global）にバインドされます。厳格モード（Strict Mode）では undefined となります。

function greet() {
  console.log(`こんにちは、私の名前は ${this.name} です`);
}

// 非厳格モードでは、this.name がグローバル変数を指す可能性があり、予期せぬ動作を招くことがあります。
// 厳格モードでは、this は undefined となります。
greet();

2. アロー関数における this：レキシカルバインド

従来の関数とは異なり、アロー関数は独自の this バインドを持ちません。代わりに、それらを囲んでいる実行コンテキストから レキシカル（Lexical） に this の値を継承します。

簡単に言えば、アロー関数内部の this は、その関数を包んでいる外側のスコープの this と同一です。この挙動は非常に有用で、バグを未然に防ぐ予測可能なコードを可能にします。

2.1 アロー関数は周囲の環境から this をキャプチャする

const person = {
  name: 'アリス',
  greet: function() {
    // setTimeout の内部でアロー関数を使用
    setTimeout(() => {
      console.log(`こんにちは、私の名前は ${this.name} です`);
    }, 100);
  }
};

person.greet(); // 输出: こんにちは、私の名前は アリス です (100ミリ秒後)

この例では、setTimeout 内部のアロー関数が greet メソッドの this（つまり person オブジェクト）をキャプチャしています。もしここで従来の関数を使用していたら、this はグローバルオブジェクト（window）または undefined を指してしまい、コードは意図通りに動作しません。

2.2 call、apply、bind による上書き不可

アロー関数は this をレキシカルに継承するため、call、apply、または bind を使用して this を上書きすることはできません。これらのメソッドは、アロー関数内部の this に対して何の影響も与えません。

const person = {
  name: 'ボブ',
  greet: () => {
    console.log(`こんにちは、私の名前は ${this.name} です`);
  }
};

const anotherPerson = {
  name: 'チャーリー'
};

// 输出: こんにちは、私の名前は undefined です (またはグローバルに name が定義されていればその値)
person.greet.call(anotherPerson);

このケースでは、call を使って anotherPerson にバインドしようとしても、アロー関数の this は周囲のコンテキスト（この場合はグローバルスコープ）に固定されたままです。

2.3 比較例：従来の関数 vs アロー関数

オブジェクトのメソッド内で、setTimeout を使用した際の this の挙動を比較してみましょう。

const counter = {
  count: 0,
  incrementTraditional: function() {
    // 従来の関数: ここでの this は counter オブジェクトを指す
    setTimeout(function() {
      // このコールバック内では、this は window オブジェクト（または undefined）
      // そのため、this.count++ は window.count を操作しようとするか、エラーになります
      // console.log('従来の関数:', this.count); // NaN が出力されるかエラー
    }, 1000);
  },
  incrementArrow: function() {
    // アロー関数: ここでの this は counter オブジェクトを指す
    setTimeout(() => {
      this.count++; // この this は外部の incrementArrow から継承され、counter を指す
      console.log('アロー関数:', this.count);
    }, 1000);
  }
};

counter.incrementTraditional(); // 1秒後: NaN (またはエラー/グローバル変数)
counter.incrementArrow();       // 1秒後: アロー関数: 1

incrementTraditional では this のコンテキストが消失していますが、incrementArrow ではアロー関数が正しく counter オブジェクトの this をキャプチャしているため、期待通りにプロパティを更新できています。

2.4 アロー関数と従来の関数の使い分け

アロー関数を使うべき時: オブジェクトのメソッド内やクロージャ内でのコールバック関数など、周囲の this コンテキストを維持・継承したい場合。
従来の関数を使うべき時: this を動的に扱いたい場合。例えば、特定のオブジェクトにバインドされるべきメソッド定義や、call、apply、bind を使って明示的に this を操作したい場合。
アロー関数を避けるべき時: オブジェクトのメソッドを直接定義する場所（オブジェクトリテラルの直下）では、this がそのオブジェクト自身を指すことを期待する場合が多いため、アロー関数の使用は避けるべきです。