R初めてのReact

React 用語集

Reactの用語を「読める・説明できる」状態にする

レッスン本文中の用語をクリックしても、この解説が開きます。全 24 語。

React/Next.js

Reactリアクト

UI(画面)を「コンポーネント(部品)」の組み合わせで作るための人気ライブラリ。状態(state)を書くと、Reactが画面をそれに合わせて更新してくれます。手作業でDOMを書き換える方式に比べ、大きな画面でも破綻しにくいのが特徴です。

💡 実務での使い方

実務でこう説明する: UIはReactのコンポーネントに分割して構築し、状態と表示を同期させることで保守しやすくしています。

React/Next.js

宣言的UIせんげんてきUI

「どう変えるか(手順)」ではなく「どういう状態か(結果)」を書くと、フレームワークが画面をその状態に合わせてくれる考え方。Reactの中心的な発想で、命令的にDOMを1つずつ操作するのと対になります。

💡 実務での使い方

実務でこう説明する: 表示は状態から宣言的に導出する形にして、手続き的なDOM操作による不整合を避けています。

React/Next.js

コンポーネント

UIを構成する再利用可能な部品。Reactでは、JSXを返す大文字始まりの関数として書きます(関数コンポーネント)。画面をHeader・List・Itemのように部品へ分解して組み立てます。

💡 実務での使い方

実務でこう説明する: 画面は責務ごとにコンポーネントへ分割し、再利用と見通しのよさを両立させています。

React/Next.js

JSXジェイエスエックス

JavaScriptの中にHTMLのような見た目でUIを書ける記法。実体はJavaScriptで、{ } の中に変数や式を埋め込めます。HTMLと違い class ではなく className を使うなどの差があります。

💡 実務での使い方

実務でこう説明する: JSXはHTMLに似ていますが実体はJSなので、式の埋め込みや条件分岐を自然に書ける利点を活かしています。

React/Next.js

propsプロップス

親コンポーネントから子コンポーネントへ渡すデータ。関数の引数のようなもので、<UserCard name="太郎" /> のように渡し、子側で { name } として受け取ります。同じ部品に違うデータを渡して再利用できます。

💡 実務での使い方

実務でこう説明する: 部品はpropsで外からデータを受け取る形にして、同じコンポーネントを様々な文脈で再利用しています。

React/Next.js

stateステート

コンポーネントが保持する「変わる値」。これが更新されると、その部品が再描画され画面が変わります。useState で作り、専用の更新関数(setter)で変更します。ふつうの変数と違い、変更が画面に反映されるのが特徴です。

💡 実務での使い方

実務でこう説明する: 画面上で変化する値はstateで管理し、更新はsetter経由に統一して予期しない再描画漏れを防いでいます。

React/Next.js

useState

コンポーネントにstate(覚えておく値)を持たせるためのReactの関数(Hook)。const [count, setCount] = useState(0) のように、現在の値と更新関数のペアを受け取ります。

💡 実務での使い方

実務でこう説明する: ローカルな状態はuseStateで持ち、更新関数を通じて変更することで再レンダリングを正しく発生させています。

React/Next.js

Hookフック

use〜で始まるReactの関数群で、コンポーネントに状態や副作用などの機能を「引っ掛ける」もの。useState・useEffectが代表。自作もできます(カスタムHook)。コンポーネントのトップレベルで呼ぶという決まりがあります。

💡 実務での使い方

実務でこう説明する: 状態や副作用はHookで扱い、共通ロジックはカスタムHookに切り出して再利用しています。

React/Next.js

再レンダリングさいレンダリング

stateやpropsが変わったときに、Reactがそのコンポーネントを再度実行して画面を更新すること。状態と表示が自動で同期する仕組みの中心です。不要な再レンダリングが多いと遅くなることがあります。

💡 実務での使い方

実務でこう説明する: 状態変更で再レンダリングが起きる前提で設計し、不要な再描画は計測した上で必要なら抑制しています。

React/Next.js

イベントハンドラ

onClick や onChange に渡す、ユーザー操作に反応する関数。onClick={handleClick} のように「関数そのもの」を渡します。onClick={handleClick()} と書くと即実行されてしまうので注意します。

💡 実務での使い方

実務でこう説明する: イベントハンドラは関数参照を渡す形にして、レンダリング時の意図しない即時実行を避けています。

React/Next.js

リストの key

配列を map で並べて表示するとき、各要素に付ける一意の目印。Reactが「どれがどれか」を追跡し、効率よく再描画するために使います。配列のindexをkeyにするのは、並び替えなどで不具合の元になりやすく非推奨です。

💡 実務での使い方

実務でこう説明する: リストには安定した一意のkeyを付け、indexをkeyにすることによる再描画の不具合を避けています。

React/Next.js

リストレンダリング

配列を map でJSXの配列に変換して画面に並べる、Reactでの一覧表示の基本テクニック。items.map((item) => <li key={item.id}>{item.name}</li>) のように書きます。JavaScriptのmapがそのまま生きます。

💡 実務での使い方

実務でこう説明する: 一覧はmapでリストレンダリングし、各要素に一意のkeyを付けて表示しています。

React/Next.js

条件付きレンダリング

状態に応じて表示を出し分けること。{isLoading && <Spinner />} や {ok ? <A /> : <B />} のように、論理演算子や三項演算子で書きます。ログイン状態や読み込み状態による表示切り替えに使います。

💡 実務での使い方

実務でこう説明する: 状態に応じた出し分けは条件付きレンダリングで表現し、読み込み中や空状態も明示的に扱っています。

React/Next.js

制御コンポーネントせいぎょコンポーネント

入力フォームの値をstateで管理し、value と onChange でReactが値を握る書き方。入力のたびにstateを更新するので、値の検証や整形をReact側で一元管理できます。

💡 実務での使い方

実務でこう説明する: フォームは制御コンポーネントにして、入力値をstateで一元管理し検証や送信整形をしやすくしています。

React/Next.js

useEffect

描画以外の処理(副作用: データ取得・購読・タイマーなど)を扱うHook。useEffect(() => { ... }, [deps]) の依存配列で「いつ再実行するか」を決めます。空配列なら初回だけ実行されます。

💡 実務での使い方

実務でこう説明する: 副作用はuseEffectにまとめ、依存配列を正しく指定して不要な再実行や実行漏れを防いでいます。

React/Next.js

副作用ふくさよう

画面を描く以外の外向きの処理。データ取得、イベント購読、タイマー設定、ローカルストレージ操作などが該当します。Reactではこれらをレンダリング中ではなくuseEffectの中で行います。

💡 実務での使い方

実務でこう説明する: 副作用はレンダリングから切り離してuseEffectで扱い、描画を純粋に保っています。

React/Next.js

データ取得データしゅとく

APIからデータを取ってきて画面に表示すること。fetchで取得し、結果をstateに入れて表示します。読み込み中(loading)・成功・失敗(error)の3状態を用意するのが実務の定番です。

💡 実務での使い方

実務でこう説明する: データ取得はloading/success/errorの3状態で扱い、待ち時間や失敗もUIで明示しています。

React/Next.js

loading / error 状態

非同期処理の状態表現。読み込み中はスピナー、失敗時はエラーメッセージ、成功時はデータ、と出し分けます。ユーザーに「今どうなっているか」を伝えるために欠かせません。

💡 実務での使い方

実務でこう説明する: 非同期処理はloadingとerrorの状態を必ず用意し、ユーザーに進行状況と失敗を伝えるUIにしています。

React/Next.js

状態の持ち上げじょうたいのもちあげ

複数のコンポーネントで共有したい状態を、共通の親コンポーネントへ移すこと(lifting state up)。状態の置き場所を1か所(単一の情報源)にすることで、食い違いを防ぎます。

💡 実務での使い方

実務でこう説明する: 共有が必要な状態は共通の親へ持ち上げ、単一の情報源として扱うことで整合性を保っています。

React/Next.js

プロップドリリング

深い階層の子へpropsを何段も手渡しでバケツリレーすること。増えすぎると見通しが悪くなり、そのときはContextなどで途中を省く選択肢が出てきます。

💡 実務での使い方

実務でこう説明する: propsのバケツリレーが深くなる場合は、Contextなどで受け渡しを簡潔にする判断をしています。

React/Next.js

Contextコンテキスト

propsを一段ずつ渡さずに、離れたコンポーネントへ値を届けるReactの仕組み。テーマやログインユーザーなど「多くの場所で使う値」に向きます。使いすぎると追いにくくなるため、必要な範囲で使います。

💡 実務での使い方

実務でこう説明する: 広く共有する値はContextで配り、propsのバケツリレーを避けつつ、乱用しないよう範囲を絞っています。

React/Next.js

カスタムHook

use〜で始まる自作の関数に、状態やロジックをまとめて再利用できるようにしたもの(useCounter, useFetchなど)。UIとロジックを分離でき、複数のコンポーネントで同じロジックを使い回せます。

💡 実務での使い方

実務でこう説明する: 共通ロジックはカスタムHookに切り出し、UIとロジックを分離して再利用とテストをしやすくしています。

React/Next.js

Next.jsネクストジェイエス

Reactに、画面遷移(ルーティング)・サーバー機能・最適化などを足した人気フレームワーク。ファイルを置くとページになる仕組みなどがあり、実務のReact開発ではよく使われます。この学習サイト自体もNext.jsで作られています。

💡 実務での使い方

実務でこう説明する: 本番のReactアプリはNext.jsで構築し、ルーティングやサーバー処理、最適化の恩恵を受けています。

React/Next.js

Vercelバーセル

Next.jsアプリを簡単に公開できるホスティングサービス。GitHubにpushすると自動でビルド・デプロイされ、URLで世界に公開されます。手順は暗記せずAIに聞けば十分です。

💡 実務での使い方

実務でこう説明する: GitHubへのpushをトリガーにVercelで自動デプロイし、公開までの手間を最小化しています。