アロー関数のthis問題を解決｜従来のfunctionとの違いと使い分け

// jQuery時代によくあるコード
var Counter = {
    count: 0,
    button: $('#button'),
    
    setup: function() {
        // this を変数に保存
        var self = this;
        
        this.button.click(function() {
            self.count++;  // 直接thisは使えない
            console.log(self.count);
        });
    }
};

// モダンな書き方
const Counter = {
    count: 0,
    button: document.querySelector('#button'),
    
    setup() {
        this.button.addEventListener('click', () => {
            this.count++;  // thisが自動的に保持される
            console.log(this.count);
        });
    }
};

// 従来の関数
function Traditional() {
    this.value = 42;
    
    this.getValue = function() {
        return this.value;
    };
    
    this.delayed = function() {
        setTimeout(function() {
            console.log(this.value); // undefined
        }, 1000);
    };
}

// アロー関数
function Modern() {
    this.value = 42;
    
    this.getValue = () => {
        return this.value;  // 42
    };
    
    this.delayed = function() {
        setTimeout(() => {
            console.log(this.value);  // 42
        }, 1000);
    };
}

const obj = {
    name: 'Example',
    // 従来の方法（推奨）
    normalMethod() {
        return this.name;
    },
    // アロー関数（非推奨）
    arrowMethod: () => {
        return this.name;  // undefined
    }
};

// Before: jQuery
class UserList {
    constructor() {
        this.users = [];
        var self = this;
        
        $('#addUser').click(function() {
            var name = $('#name').val();
            self.addUser(name);
        });
    }
    
    addUser(name) {
        this.users.push(name);
        this.render();
    }
}

// After: Modern JavaScript
class UserList {
    constructor() {
        this.users = [];
        
        document.querySelector('#addUser')
            .addEventListener('click', () => {
                const name = document.querySelector('#name').value;
                this.addUser(name);
            });
    }
    
    addUser(name) {
        this.users.push(name);
        this.render();
    }
}

// Before
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(num) {
    return num * 2;
});

const filtered = numbers.filter(function(num) {
    return num > 2;
});

// After
const doubled = numbers.map(num => num * 2);
const filtered = numbers.filter(num => num > 2);

// Before
function loadData() {
    var self = this;
    fetch('/api/data')
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            self.processData(data);
        })
        .catch(function(error) {
            self.handleError(error);
        });
}

// After
function loadData() {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => this.processData(data))
        .catch(error => this.handleError(error));
}

class DataHandler {
    constructor(data) {
        this.data = data;
    }
    
    // インスタンスメソッド: 通常の関数
    process() {
        return this.data;
    }
    
    // イベントハンドラ: アロー関数
    handleClick = () => {
        this.process();
    }
    
    // 通常のメソッド + bind
    handleSubmit() {
        this.process();
    }
}

const handler = new DataHandler([1, 2, 3]);
button.addEventListener('click', handler.handleClick);  // OK
form.addEventListener('submit', handler.handleSubmit.bind(handler));  // OK

// Before: IIFE
(function() {
    var privateVar = 'secret';
    // ...
})();

// After: アロー関数
(() => {
    const privateVar = 'secret';
    // ...
})();