では「Reactなどのフレームワークでの this とアロー関数の使われ方」を整理してみましょう。ReactはJavaScriptクラスや関数を多用するので、this の扱いが特に重要になります。
⚛️ React クラスコンポーネントの場合
1. bind が必要なケース
class MyButton extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
// メソッドを this にバインド
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.handleClick}>クリック {this.state.count}</button>;
}
}
- 通常のクラスメソッドは
thisがバインドされないため、bindが必要。
2. クラスフィールド＋アロー関数で解決
class MyButton extends React.Component {
state = { count: 0 };
// アロー関数にすることで this が自動的にインスタンスに束縛される
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <button onClick={this.handleClick}>クリック {this.state.count}</button>;
}
}
bindが不要になり、コードがシンプル。- Reactのクラスコンポーネントではこの書き方が主流。
⚛️ React 関数コンポーネントの場合
React Hooks の登場以降、関数コンポーネントが主流になりました。
関数コンポーネントでは this を使わないので、アロー関数が自然にフィットします。
function MyButton() {
const [count, setCount] = React.useState(0);
const handleClick = () => setCount(count + 1);
return <button onClick={handleClick}>クリック {count}</button>;
}
👉 関数コンポーネントでは this の問題自体が消え、アロー関数でイベントハンドラを書くのが基本。
✅ まとめ
- クラスコンポーネント
- 通常のメソッド →
bindが必要 - アロー関数で定義すれば
bind不要
- 通常のメソッド →
- 関数コンポーネント
thisを使わないのでアロー関数が自然に使える
💡 Reactの進化の流れを見ると、this の扱いに悩まされるクラスコンポーネントから、シンプルにアロー関数で書ける関数コンポーネントへ移行してきた、とも言えます。
