JavaScriptの字句的な「this」とは？アロー関数で解決する方法

JavaScriptにおける「this」の扱いは、多くの開発者を悩ませるポイントの一つです。特にコールバック関数の中では、「this」が意図しないオブジェクト（グローバルオブジェクトなど）を参照してしまうという問題が発生しがちです。

この問題を解決するのがファットアロー関数（アロー関数）です。アロー関数は自身の「this」を持たず、外側のスコープの「this」のコンテキストをそのまま引き継ぎます。これにより、字句的（レキシカル）な「this」のバインディングが実現され、同じ目的を簡潔に達成できます。

さらに、アロー関数はその名の通りコードの行数を削減する効果もあります。「=>」という構文がファットアローを表しています。

従来のfunctionでの問題点

まず、従来の無名関数（function式）を使った例を見てみましょう。

$('.button1').click(function () {
    setTimeout(function () {
        $(this).text('demo');
    }, 400);
});

上記のコードはエラーになります。なぜなら、function()で定義された関数内の「this」は、呼び出し時のコンテキストに依存するため、setTimeoutのコールバック内ではグローバルオブジェクト（ブラウザではwindow）を参照してしまうからです。結果として、クリックされたボタン要素ではなく、グローバルオブジェクトに対して操作しようとしてしまいます。

アロー関数による解決策

同じコードをファットアロー関数に書き換えると、「this」のコンテキストが正しく保持されます。

$('.button1').click(function () {
    setTimeout(() => {
        $(this).text('demo');
    }, 400);
});

アロー関数には自身の「this」が存在しないため、外側のclick(function () {...})のスコープにある「this」、つまりクリックされたボタン要素（jQueryオブジェクト）を正しく参照できるのです。

補足：アロー関数の特徴

• ES6（ECMAScript 2015）で導入された構文です。
• functionキーワードを省略でき、記述が簡潔になります。
• call、apply、bindを使っても「this」を変更できません。
• コンストラクタとして使用できない、argumentsオブジェクトを持たないなどの制約があります。

コールバック処理で「this」の参照がずれてしまう場面では、アロー関数の活用を検討すると、コードがより安全で読みやすくなります。