React入門 練習問題 55：Reactフックの使用と基本的なエラー解決
次のReactアプリケーションでエラーが表示されました。コードを見て、最も考えられる原因は何ですか？
**エラーメッセージ:**
```
Error: React Hook "useState" is not defined. Did you forget to import it from "react"?
```
**コード:**
```jsx
import React from 'react';
function UserProfile() {
const [name, setName] = useState('Guest');
return (
<div>
<h2>{name}</h2>
<button onClick={() => setName('User')}>Update</button>
</div>
);
}
```
- useStateがインポートされていない
- nameの初期値が正しくない
- setNameの使い方が間違っている
- returnステートメントの構文エラー
- useStateの呼び出し位置がコンポーネント関数の外側にある
Qraftユーザーの成績：正答率 100%（13/13回正解）
正解と解説を見る
このエラーは、useStateフックを使用しているにもかかわらずReactからインポートしていないことが原因です。
【正解の理由】
エラーメッセージ「useStateは定義されていません。reactからインポートし忘れていませんか？」は、まさにインポート漏れを示しています。1行目を`import React, { useState } from 'react';`に修正すれば解決します。
【不正解の理由】
• nameの初期値が正しくない：useStateには文字列・数値など任意の型を初期値として渡せるため、'Guest'という初期値自体は問題ない
• setNameの使い方が間違っている：setName('User')は更新関数に新しい値を渡す正しい呼び出し方であり、問題ない
• returnステートメントの構文エラー：JSXの記述は正しく、return文の構文にエラーはない
• useStateの呼び出し位置がコンポーネント関数の外側にある：コード上useStateはUserProfile関数の内側で呼ばれており、位置の問題ではない