こんにちは！フロントエンドの世界へようこそ。
JavaScriptを触り始めて、「`this`って何なんだ……？」「なぜ急に値が変わるんだ！」と頭を抱えたことはありませんか？大丈夫、それはあなたがプロへの道を確実に歩んでいる証拠です。
今日は、JavaScriptという巨大なシステムが、関数を実行する時に裏側でどんな「メモ帳」を用意しているのか。そして、そのメモ帳に書かれた特別な役割「`this`」の正体について、少しだけ紐解いてみましょう。
—
1. 関数は「自分専用の個室」を持っている
JavaScriptで関数を実行する瞬間、メモリの中では「環境レコード（Environment Record）」という、いわば「その関数専用の個室」が作られます。
この個室には、あなたが書いた変数だけでなく、JavaScriptがこっそり準備している「特別な情報」が書き込まれます。それが`this`と`super`です。
想像してみてください：お買い物のレシート
コンビニでお買い物をする時、レシートには必ず「店舗名」が印字されますよね。あなたがどの店舗にいるのかを教えてくれる、あの情報です。
JavaScriptの関数にとっての`this`は、まさにその「今、誰の持ち物として呼ばれているか」というレシートのようなものなんです。
—
2. `this`の正体は「呼ばれ方」で決まる
`this`が厄介なのは、中身が「誰に呼ばれたか」によってコロコロ変わるからです。
const 秘密基地 = {
名前: “フロントエンド研究所”,
挨拶: function() {
// ここでのthisは「秘密基地」そのものを指す
console.log(this.名前 + “へようこそ！”);
}
};
秘密基地.挨拶(); // 「フロントエンド研究所へようこそ！」と表示される
このコードでは、`挨拶`関数は「`秘密基地`というオブジェクト」から呼び出されました。だから、`this`は「あ、僕は今、秘密基地さんの担当ですね」と理解して、名前を参照できるんです。
でも、こんな時は混乱しますよね？
const 挨拶のコピー = 秘密基地.挨拶;
挨拶のコピー(); // エラー、またはundefinedになる可能性大！
コピーした瞬間、この関数は「誰の持ち物でもない、ただの関数」になってしまいました。レシートに店名が載っていない状態です。こうなると、JavaScriptは「あれ？ `this`って誰だっけ？」とパニックを起こしてしまいます。
—
3. なぜ「環境レコード」が重要なのか
JavaScriptは関数を実行するたびに、この環境レコードを新しく作り直します。
- 変数： その部屋の中だけで使うメモ。
- `this`： その部屋の持ち主を指し示す看板。
この仕組みがあるおかげで、同じ関数を使い回しても、呼び出す相手が違えば`this`が適切に入れ替わり、柔軟なプログラムが書けるようになっています。
実は、ES6（現代のJavaScript）で登場したアロー関数は、この個室に「`this`という名前の看板」をそもそも持ち込みません。その代わり、外側の部屋の看板をそのまま使うというルールになっています。だから「`this`が勝手に変わらない」という安心感があるんですね。
—
4. 実践的なアドバイス：迷ったらこう考えよう！
「`this`が分からなくなった！」という時は、コードの行間を読んでこう自問してみてください。
「今、この関数を呼び出した『ドット(.)の左側』にいるのは誰？」
- `obj.func()` なら、`this` は `obj` です。
- `func()` と直接呼んでいるなら、それは「誰の持ち物でもない」ので、`this` は迷子（またはグローバルな窓口）になります。
—
最後に：完璧じゃなくていいんです
プロの現場でも、複雑な`this`の挙動に頭を悩ませることはあります。そんな時は`console.log(this)`を仕込んで、「お前、今誰だ？」と確認する。それだけで十分、立派なデバッグです。
JavaScriptは、あなたを困らせようとして`this`を複雑にしているわけではありません。どんな状況でも柔軟に動けるように、あえて「呼び出し側に合わせる」という優しい（？）仕組みを用意してくれているんです。
まずは「`this`はレシートみたいなもの」と覚えておくだけで、視界が少し開けるはずですよ。
それでは、また次回の冒険でお会いしましょう！応援しています。
コメント