JavaScriptでthisが未定義と怒られてしまう原因と対処法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを学び始めたばかりの方や、中級者でthisキーワードの挙動について悩んでいる方を対象にしています。この記事を読むことで、JavaScriptのthisキーワードが未定義と表示される原因を理解し、適切な対処法を学ぶことができます。具体的には、スコープチェーン、strict mode、アロー関数とthisの関係性について理解を深め、実践的な問題解決スキルを習得できます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な文法と概念 - 関数とスコープの基本的な理解 - オブジェクトとプロパティの操作方法

thisキーワードとは何か

JavaScriptにおけるthisキーワードは、多くの開発者にとって混乱しやすい概念の一つです。特に「this is undefined」というエラーに遭遇した経験がある方も多いでしょう。このthisキーワードは、実行コンテキストに基づいて動的に値が決定される特殊なキーワードで、現在のオブジェクトや関数の呼び出し元を参照します。

thisキーワードの挙動は、関数の呼び出し方によって異なります。グローバルスコープでのthisはグローバルオブジェクトを指し、オブジェクトのメソッドとして呼び出された場合はそのオブジェクトを指します。しかし、この挙動は一見直感的ではなく、特にコールバック関数内でのthisの振る舞いは予期しない結果を招くことがあります。

thisが未定義になる原因と解決策

原因1：strict modeでのグローバルthis

JavaScriptのstrictモードでは、グローバルスコープでのthis値がundefinedになります。これは、意図しないグローバルオブジェクトへのアクセスを防ぐための仕様です。

Javascript

// strictモードではグローバルthisがundefinedになります
'use strict';

console.log(this); // undefined

解決策1：明示的なオブジェクトの指定

グローバルスコープでthisが必要な場合は、明示的にグローバルオブジェクトを指定します。

Javascript

'use strict';

// 明示的にグローバルオブジェクトを指定
console.log(globalThis); // ブラウザではwindow、Node.jsではglobal

原因2：コールバック関数内でのthis

コールバック関数内でのthisは、呼び出し元のオブジェクトを参照しないことがあります。特に、setTimeoutやイベントリスナーのような非同期処理で問題が顕著になります。

Javascript

'use strict';

const obj = {
  name: 'JavaScript',
  showName: function() {
    console.log(this.name);
  }
};

setTimeout(obj.showName, 1000); // undefinedが出力される

解決策2：アロー関数の使用

アロー関数は独自のthisを持たず、レキシカルスコープ（定義されたスコープ）のthisを継承します。これにより、意図したオブジェクトを参照できます。

Javascript

'use strict';

const obj = {
  name: 'JavaScript',
  showName: function() {
    setTimeout(() => {
      console.log(this.name); // 'JavaScript'が出力される
    }, 1000);
  }
};

obj.showName();

解決策3：bindメソッドの使用

bindメソッドを使って、関数内のthisを特定のオブジェクトに固定できます。

Javascript

'use strict';

const obj = {
  name: 'JavaScript',
  showName: function() {
    console.log(this.name);
  }
};

// bindでthisをobjに固定
setTimeout(obj.showName.bind(obj), 1000); // 'JavaScript'が出力される

原因3：コンストラクタ関数内での適切なthisの使用

コンストラクタ関数内でthisを使う場合、new演算子を使わずに呼び出すと、thisはグローバルオブジェクトを指してしまいます（strictモードではundefined）。

Javascript

'use strict';

function User(name) {
  this.name = name;
  console.log(this); // undefinedが出力される
}

User('JavaScript'); // newを使わない場合

解決策3：new演算子の使用

コンストラクタ関数は必ずnew演算子と一緒に使用します。

Javascript

'use strict';

function User(name) {
  this.name = name;
  console.log(this); // Userオブジェクトが出力される
}

const user = new User('JavaScript'); // newを使う場合

原因4：アロー関数内でのthisの誤用

アロー関数はthisを独自に持たないため、コンストラクタとして使用することはできません。

Javascript

'use strict';

const User = (name) => {
  this.name = name;
  console.log(this); // undefinedが出力される
};

const user = new User('JavaScript'); // エラーが発生する

解決策4：通常の関数の使用

コンストラクタとして機能させるには、通常の関数を使用します。

Javascript

'use strict';

function User(name) {
  this.name = name;
  console.log(this); // Userオブジェクトが出力される
}

const user = new User('JavaScript');

まとめ

本記事では、JavaScriptでthisが未定義と表示される主な原因とその解決策について解説しました。

strictモードではグローバルスコープでのthisがundefinedになる
コールバック関数内ではthisが意図しないオブジェクトを参照することがある
アロー関数はレキシカルスコープのthisを継承する
コンストラクタ関数はnew演算子と一緒に使用する必要がある

この記事を通して、JavaScriptのthisキーワードの動作原理を理解し、コードで意図通りにthisを扱えるようになったことでしょう。これにより、より堅牢で予測可能なJavaScriptコードを書くことができるようになります。

今後は、thisのさらなる高度な使い方や、プロトタイプチェーンとの関係性についても記事にする予定です。

JavaScriptでthisが未定義と怒られてしまう原因と対処法💻