ChatGPTに頼る前に理解すべきReactの3つの概念

AIに頼る前に理解すべきReactの3つのコンセプト

2026年の今、プログラミング学習の景色は一変しています。

• エラーが出たらChatGPTに投げる
• Cursor（AIエディタ）にコードを書かせる
• UIをすべてBolt.newやLovableで作る

これらはビギナーの間でもごく一般的です。

しかしこのような学習法を続けたために、「Reactがわかった」という実感を得られない初心者が増えている…

というのが私の印象です。

AIを「使いこなす」ためにも、最低限の理解は必要です。

本記事では、ChatGPTに頼る前に知っておきたいReactの3つの概念を簡潔に紹介します。

概念①コンポーネント

Reactの中心にある考え方が「コンポーネント」です。

コンポーネントとは、UIを部品に分けたもの。

例えばあるウェブアプリを思い浮かべてください。

ヘッダー、サイドバー、記事一覧、フッター。

Reactではこれら一つひとつを「コンポーネント」という「部品」として作ります。

部品に分けることで、それをアプリ内のどこでも使いまわせるからです。

修正も楽になります。そのコンポーネントを一箇所直せば、使われているすべての場所に反映されるからです。

コードで見ると、コンポーネントは次のような形をしています。

const Header = () => {
    return (
        <div>
            <h1>サイトのタイトル</h1>
        </div>
    )
}

やや専門的に言うと、「コンポーネント」とは「JavaScriptのfunction」のことです。

「Reactのコンポーネント = JavaScriptのfunction」と覚えておくだけで、Reactコードが読み解きやすくなります。

• monotein.com/present

概念②Props（プロップス）

コンポーネントを部品として使いまわせることは分かりました。

しかし「使いまわす」だけでは不十分な場面があります。

例えば「ボタン」コンポーネントを複数の場所で使いたいとき、場所によってボタンの文言が違う場合はどうすればいいのでしょうか。

そこで使うのが「Props」です。

Propsとは、コンポーネントに渡すデータのこと。

コードで見てみましょう。

const Button = (props) => {
    return <button>{props.label}</button>
}

このButtonコンポーネントに対して、呼び出す側から次のようにPropsを渡します。

<Button label="送信する" />
<Button label="キャンセル" />

同じコンポーネントでも、渡すPropsによって表示が変わります。

「送信する」と書かれたボタン、「キャンセル」と書かれたボタン。両方とも同じコンポーネントをベースにしているのです。

ChatGPTが書いてきたコードにほぼ必ず使われているのが、このPropsです。

必ず理解しておきましょう。

概念③State（ステート）

コンポーネントとPropsを理解したら、次に覚えるべきが「State」です。

Stateとは、コンポーネントが持つ「変化するデータ」のことです。

例えば、ショッピングアプリに「カートに追加」というボタンがあるとします。

ボタンを押すたびにカートの数が1ずつ増えていく。

この「カートの数」のように、ユーザーの操作によって変化するデータがStateです。

ReactでStateを使うときは、下記コードのようにuseStateというものを使います。

import { useState } from "react"

const Counter = () => {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>増やす</button>
        </div>
    )
}