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コードが読み解きやすくなります。

概念②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>
    )
}

useState()のカッコ内にある数字は初期値です。ここでは0になっています。

ボタンが押されるたびにcountが1増えていき、それが画面に反映されます。

Stateを理解すれば、AIにより的確な指示を出せるでしょう。

AIは「わかっている人」をさらに速くするツール

コンポーネント、Props、State。

この3つはReactの土台となるコンセプトです。

基礎を理解した上でAIを使うと、「このエラーはStateの問題だな」といったように「当たり」をつけて質問できるようになります。

質問の精度が上がり、AIの回答の精度も上がるのです。

AIは、分かっている人をさらに速くするツール

「AI時代でも基礎の理解は必須」ということを覚えておきましょう。

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers