Qraft(クラフト) 資格・学習クイズアプリ

React入門 練習問題 1:アロー関数とイベントハンドラ

Reactコンポーネント内で次のコードがある場合、constの後に続く「handleClick」は何を表していますか?

```javascript
const handleClick = () => { setCount(count + 1); };
```

  1. 通常の変数
  2. 状態変数(ステート)
  3. 関数(イベントハンドラ)
  4. JSX要素
  5. カスタムフック(オリジナルのフック関数)

Qraftユーザーの成績:正答率 72%(39/54回正解)

正解と解説を見る
正解:関数(イベントハンドラ)

`handleClick` はアロー関数で定義された関数(イベントハンドラ)です。

【正解の理由】
`() => { setCount(count + 1); }` のようにアロー関数(=`=>`を使った関数定義の書き方)で定義されており、ボタンなどのイベント発生時に呼び出される処理なので、関数(イベントハンドラ)にあたります。

【不正解の理由】
• 通常の変数:文字列や数値のような単純な値ではなく、アロー関数が代入されているため誤り。
• 状態変数(ステート):`useState` を使った `const [値, set値] = useState(...)` という形になっていないため誤り。
• JSX要素:`<div>` のようなタグを含む記述ではなく、処理を実行する関数のため誤り。
• カスタムフック(オリジナルのフック関数):カスタムフックは`use`から始まる名前で状態やロジックをまとめた関数だが、`handleClick`は`use`で始まっておらず、単なるクリック時の処理を行うイベントハンドラのため誤り。

問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)