React入門 練習問題 2：モダンJavaScriptとアロー関数
Reactの関数コンポーネントでのアロー関数の利用について、最も現代的で推奨される書き方はどれですか？
- function Button(props) { function handleClick() { alert('クリックされました'); } return <button onClick={handleClick}>クリック</button>; }
- function Button(props) { const handleClick = function() { alert('クリックされました'); } return <button onClick={handleClick}>クリック</button>; }
- function Button(props) { const handleClick = () => { alert('クリックされました'); } return <button onClick={handleClick}>クリック</button>; }
- function Button(props) { return <button onClick={function() { alert('クリックされました'); }}>クリック</button>; }
- function Button(props) { class Handler { handleClick() { alert('クリックされました'); } } const handler = new Handler(); return <button onClick={() => handler.handleClick()}>クリック</button>; }
Qraftユーザーの成績：正答率 59%（26/44回正解）
正解と解説を見る
正解：function Button(props) {
const handleClick = () => {
alert('クリックされました');
}
return <button onClick={handleClick}>クリック</button>;
}
関数コンポーネント内でイベントハンドラを定義する最も現代的な書き方は、`const handleClick = () => {...}` というアロー関数（＝`=>`を使った関数定義）です。
【正解の理由】
アロー関数はES6で導入された簡潔な構文で、`this`の束縛（バインディング）に関する問題を避けられ、React公式ドキュメントや現場コードでも主流の書き方です。
【不正解の理由】
• 関数宣言（`function handleClick() {}`）：動作はするが、アロー関数に比べて現代的な書き方として推奨されていない。
• 関数式（`const handleClick = function() {}`）：`const`を使っている点は良いが、`function`キーワードを使う分アロー関数より冗長。
• インライン関数（JSX内に直接`function(){}`を書く）：レンダリングのたびに新しい関数が生成されてしまい、可読性・パフォーマンスの面で避けるべき書き方。
• クラスを内部で定義してインスタンス化する方式：関数コンポーネント内でクラスを定義するのは不自然かつ複雑で、シンプルなイベントハンドラの実装としては不適切。