非エンジニアのRyoです。
また新しいことを学んだのですが、最初は本当に意味が分からなかったです。Reactって聞いただけで「うわ、難しそう…」と思ってましたが、実際に触ってみると意外と理屈はシンプルでした。同じように「コードって何？」状態の方にシェアしてみます。
Reactって聞くと、なんだか難しそうなイメージがありますよね。私も最初は「プログラマーしか使えないもの」だと思ってました。でも実際に学んでみると、「部品を組み合わせて画面を作る道具」というシンプルな考え方だったんです。
🧩Reactの基本思想：部品に分けて考える
Reactの一番の特徴は、画面を小さな部品に分けて作ることです。
例えば、ECサイトの商品検索ページを考えてみましょう。いきなり全部を一から作るのではなく、こんな感じで部品に分けます：
・検索ボックス（SearchBar）
・商品リスト（ProductTable）
・カテゴリ表示（ProductCategoryRow）
・商品の1行表示（ProductRow）
これって、レゴブロックを組み立てるのと同じ感覚なんです。小さな部品を組み合わせて、大きな作品を作る。マジでこの考え方が分かると、プログラミングが楽しくなります。
✨最初は動かない見た目だけ作る（ステップ1・2）
いきなり動くアプリを作ろうとすると、確実に挫折します。私も何度も失敗しました。
Reactでは、まず動かない見た目だけを作ります。そのときに使うのが「props（プロップス）」という仕組み。
propsは「親から子へデータを渡す方法」で、お弁当を手渡すようなイメージです。親コンポーネントが「このデータを使って表示してね」と子コンポーネントに渡すんです。
この時点では、検索機能やチェックボックスの動作はまだ作りません。見た目だけを整える段階です。
💡動きをつけるには「state（ステート）」を使う（ステップ3・4）
見た目ができたら、次は動きをつけます。ここで登場するのが「state（ステート）」です。
stateは「変わるデータを覚えておく仕組み」です。例えば：
・検索ボックスに入力された文字
・チェックボックスのON/OFF状態
これらは、ユーザーが操作するたびに変わりますよね。その「変わるデータ」をstateで管理するんです。
重要なのは、stateは親コンポーネントが持つということ。子どもコンポーネントは、親から渡されたデータを表示するだけです。
🔁子から親にデータを返す仕組み（ステップ5）
ここが一番難しい部分かもしれません。ユーザーが検索ボックスに文字を入力したら、親のstateを更新する必要があります。
そのために、「こうなったらstateを変えてね！」という関数（イベントハンドラ）を子どもに渡します。
例えば：
- ユーザーが検索ボックスに「fruit」と入力
- onChangeイベントが発生
- 親のsetFilterText関数が呼ばれる
- stateが更新されて、画面全体が再表示される
この流れが分かると、Reactの仕組みがすげー分かりやすくなります。
✅Reactでアプリを作る流れまとめ
- 画面を小さな部品に分ける
- propsを使って見た目だけ作る
- 変わるデータ（state）を決める
- stateをどこに置くか決める
- 子が親のstateを変えられるようにする
この5ステップで、動くアプリが作れちゃいます。
🧪実際に作れるアプリの例
例えば「検索ボックスに”fruit”と入れると、果物だけが表示される」みたいなアプリが作れます。
最初は「こんなの作れるの？」と思ってましたが、部品に分けて考えれば意外とシンプルなんです。
まとめ
Reactは確かに複雑に見えますが、「部品に分けて、データの流れを整理する」という基本思想が分かれば、誰でも使えるようになります。
私も最初は「わからん…」状態でしたが、少しずつ理解できるようになってきました。同じように学習中の方の参考になれば嬉しいです。
