React入門 練習問題 1:アロー関数とイベントハンドラ
Reactコンポーネント内で次のコードがある場合、constの後に続く「handleClick」は何を表していますか?
```javascript
const handleClick = () => { setCount(count + 1); };
```
- 通常の変数
- 状態変数(ステート)
- 関数(イベントハンドラ)
- JSX要素
- カスタムフック(オリジナルのフック関数)
Qraftユーザーの成績:正答率 72%(39/54回正解)
正解と解説を見る
正解:関数(イベントハンドラ)
`handleClick` はアロー関数で定義された関数(イベントハンドラ)です。
【正解の理由】
`() => { setCount(count + 1); }` のようにアロー関数(=`=>`を使った関数定義の書き方)で定義されており、ボタンなどのイベント発生時に呼び出される処理なので、関数(イベントハンドラ)にあたります。
【不正解の理由】
• 通常の変数:文字列や数値のような単純な値ではなく、アロー関数が代入されているため誤り。
• 状態変数(ステート):`useState` を使った `const [値, set値] = useState(...)` という形になっていないため誤り。
• JSX要素:`<div>` のようなタグを含む記述ではなく、処理を実行する関数のため誤り。
• カスタムフック(オリジナルのフック関数):カスタムフックは`use`から始まる名前で状態やロジックをまとめた関数だが、`handleClick`は`use`で始まっておらず、単なるクリック時の処理を行うイベントハンドラのため誤り。