【ITニュース解説】"this" Key word in java script

JavaScriptのthisキーワードは、プログラミング初心者にとって少し複雑に感じるかもしれないが、非常に重要な概念だ。これは、関数が実行される「文脈」や「状況」を指す特殊なキーワードであり、その値は、関数がどこで定義されたかではなく、どのように「呼び出されたか」によって動的に決まるという特性を持つ。この動的な性質こそが、thisを理解する上での鍵となる。

まず、どの関数やオブジェクトにも属さず、プログラムの最も外側、つまりグローバルコンテキストでthisが使われる場合を考えてみよう。ブラウザ環境では、このthisはwindowオブジェクトを指す。windowオブジェクトはブラウザのタブ全体やページの操作に関する機能を提供する、まさに「グローバルな」オブジェクトである。一方、Node.jsのようなサーバーサイド環境では、globalThisというグローバルオブジェクトを参照する。しかし、JavaScriptには「厳格モード（strict mode）」というものがあり、このモードが有効な場合、グローバルコンテキストでのthisはundefinedとなる。これは予期せぬグローバルオブジェクトへの変更を防ぐための安全策だ。

次に、オブジェクトの「メソッド」として関数が呼び出される場合について説明する。メソッドとは、オブジェクトに属する関数のことである。例えば、オブジェクト.メソッド()のようにドット記法で関数が呼び出されるとき、そのthisは、そのメソッドが呼び出された元の「オブジェクト自身」を指す。具体例を挙げると、personというオブジェクトがあり、その中にgreetという名前の関数（メソッド）が定義されているとする。person.greet()と呼び出すと、greet関数内のthisはpersonオブジェクトを指すため、this.nameはpersonのnameプロパティ、つまり「Alice」を参照することになる。これにより、メソッドはそのオブジェクト自身のデータにアクセスし、操作できるようになる。

メソッドとしてではなく、単独で関数が呼び出される場合もある。例えば、sayHello()のように、どのオブジェクトにも関連付けずに直接関数を呼び出すケースだ。この場合、厳格モードが有効でない限り、thisはグローバルオブジェクトを参照する。ブラウザでは再びwindowオブジェクト、Node.jsではglobalThisとなる。しかし、厳格モードが有効な場合は、単独で呼び出された関数のthisはundefinedとなる。これは、意図しないグローバルオブジェクトへのアクセスを防ぐための重要な違いである。

ES6で導入されたアロー関数は、thisの扱いにおいて通常の関数とは異なる特別な性質を持つ。アロー関数は、それ自身のthisの束縛（バインディング）を持たない。その代わりに、アロー関数が「定義された場所」の、つまりそれを囲んでいるスコープのthisを「継承」するのだ。これを「レキシカルなthis」と呼ぶ。この特性は、特に非同期処理のコールバック関数などで非常に役立つ。通常の関数では、コールバックとして渡されるとthisの参照先が変わってしまうことが多いが、アロー関数を使えば、関数が定義されたときのthisのコンテキストを保ったまま実行できる。例えば、オブジェクトのメソッド内でsetTimeoutなどの非同期処理を行う際、コールバックとしてアロー関数を使えば、thisが正しく元のオブジェクトを参照し続けるため、意図したプロパティにアクセスできる。

JavaScriptでは、thisの値を開発者が明示的に設定するための特別なメソッドが用意されている。それがcall()、apply()、bind()だ。これらはすべてのJavaScript関数が持つメソッドで、「明示的なバインディング」と呼ばれている。

call()メソッドは、関数をすぐに実行し、その際にthisとして使いたいオブジェクトを第一引数として指定する。それ以降の引数は、呼び出す関数に個別の引数としてそのまま渡される。例えば、greetという関数があり、personオブジェクトのnameプロパティを使って挨拶をしたい場合、greet.call(person, "Hello")と記述すると、greet関数内のthisがpersonオブジェクトを指すようになり、this.nameで「Alice」にアクセスできる。

apply()メソッドもcall()とよく似ており、関数をすぐに実行する。第一引数でthisとして設定したいオブジェクトを指定する点も同じだ。しかし、call()とは異なり、apply()では関数に渡す引数を「配列」として第二引数にまとめる必要がある。例えば、sumという関数にmultiplierプロパティを持つオブジェクトのコンテキストを適用し、引数5と3を渡して計算したい場合、sum.apply(context, [5, 3])のように呼び出す。この違いは、引数の数が決まっていない場合や、配列で引数を渡したい場合に特に便利だ。

最後にbind()メソッドについて説明する。bind()はcall()やapply()とは異なり、関数をその場で実行するわけではない。bind()は、指定されたオブジェクトにthisが「永続的に」バインドされた「新しい関数」を返す。この新しい関数は後からいつでも呼び出すことができる。bind()にthisのコンテキストを指定した後、続けて引数を渡すこともでき、それらの引数は新しく生成された関数の引数の前に固定される。例えば、sayNameという関数があり、userオブジェクトのコンテキストを常に使いたい場合、sayName.bind(user)とすることで、thisがuserに固定されたboundSayNameという新しい関数が作成される。このboundSayNameを後から呼び出すと、常にuser.nameにアクセスできるのだ。これは、イベントリスナーのコールバック関数など、特定のコンテキストを保持し続けたい場面で非常に役立つ。

結論として、JavaScriptのthisキーワードは、その文脈によって参照先が変化するため、最初は理解しづらいかもしれない。しかし、グローバルコンテキスト、メソッド呼び出し、通常の関数呼び出し、アロー関数の特性、そしてcall、apply、bindといった明示的なバインディングの方法を一つずつ理解していくことで、thisを自在に操れるようになる。thisを正しく理解し活用することは、より柔軟で強力なJavaScriptコードを書くために不可欠なスキルであり、システムエンジニアを目指す上で確実に役立つだろう。