AIへの指示で詰まりやすいReact基礎用語
このページでは、AIへの指示で使うと伝わりやすくなるReactの基礎用語を解説します。知らないとAIへの指示が遠回りになる用語を厳選しています。
「このボタンを押したら表示を切り替えて」「親から子に値を渡して」—— Reactでの指示をスムーズに伝えるには、コンポーネント・props・stateの概念を知っておく必要があります。 このページでは、AIへの指示でよく使うReact基礎用語を厳選して解説します。
コンポーネント（Component）
UIを部品として分割したもの。ボタン・カード・モーダルなどがそれぞれ1つのコンポーネント
Page
Header
Card
Card
Card
AIへの指示例
「Buttonコンポーネントを作ってページで使い回せるようにして」props（プロップス）
親コンポーネントから子コンポーネントへ渡すデータ
Parent
label="送信"onClick={...}→
Button
child
AIへの指示例
「ButtonコンポーネントにlabelとonClickをpropsで渡して」state（ステート）
コンポーネント内で管理する動的なデータ。変化すると画面が再描画される
count: 0
+ ボタン
クリック前count: 1
+ ボタン
クリック後AIへの指示例
「モーダルの開閉をstateで管理して」レンダリング（Rendering）
stateやpropsをもとにReactが画面を描画・更新すること
state 変化
props 変化
React
→画面
更新
AIへの指示例
「stateが変わったときだけ再レンダリングするようにして」フック（Hook）
`useState`・`useEffect`など、関数コンポーネントでReactの機能を使うための仕組み
function MyComponent() {
useState← 状態を管理
useEffect← 副作用を実行
}
AIへの指示例
「useStateで入力値を管理して、useEffectでAPIを呼び出して」useEffect
副作用（API呼び出し・タイマー等）をコンポーネントのライフサイクルに合わせて実行するフック
マウント
→useEffect 実行
→依存値 変化
→再実行
AIへの指示例
「ページ読み込み時にuseEffectでデータを取得して表示して」Reactコンポーネントの実際の実装パターンを確認したい場合は、UIコンポーネントのデモ一覧を見る →
Zenn