では「Reactなどのフレームワークでのアロー関数とbindの使い分け」について整理してみましょう。
Reactでの背景
Reactのコンポーネントでは、イベントハンドラ（onClickなど）にメソッドを渡すことが多いです。このときthisが正しくインスタンスを指すようにする必要があります。
クラスコンポーネントの場合
1. bindを使う方法
class MyButton extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this); // bindでthisを固定
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.handleClick}>クリック {this.state.count}</button>;
}
}
- メリット: プロトタイプにメソッドが置かれるので効率的。
- デメリット: 毎回
bindを書くのが面倒。
2. アロー関数をプロパティとして定義
class MyButton extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <button onClick={this.handleClick}>クリック {this.state.count}</button>;
}
}
- メリット:
thisが自動でインスタンスに固定されるのでbind不要。 - デメリット: インスタンスごとに関数が生成されるため、メモリ効率はやや悪い。
3. render内でアロー関数を直接書く
render() {
return (
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
クリック {this.state.count}
</button>
);
}
- メリット: 簡単に書ける。
- デメリット: renderが呼ばれるたびに新しい関数が生成されるので、パフォーマンスに影響する場合がある。
React Hooks（関数コンポーネント）の場合
関数コンポーネントではthisを使わないので、基本的にアロー関数で書くのが主流です。
function MyButton() {
const [count, setCount] = React.useState(0);
const handleClick = () => setCount(count + 1);
return <button onClick={handleClick}>クリック {count}</button>;
}
まとめ（Reactでの使い分け）
- クラスコンポーネント
bind→ メモリ効率は良いが記述が冗長- アロー関数プロパティ → 記述が楽で
this迷子防止、実務でよく使われる - render内アロー関数 → 簡単だがパフォーマンスに注意
- 関数コンポーネント（Hooks）
- 基本的にアロー関数でOK（
thisを使わないため）
- 基本的にアロー関数でOK（
👉 一言でまとめると：
「クラスコンポーネントではアロー関数プロパティが実務で人気、関数コンポーネントではアロー関数が標準」