🧺

Reactの学習記録的な感じで書いてみます！

2025/06/09に公開

 はじめに：Reactの勉強、はじめてみたけど…「今どきのWebサイトを作れるようになりたい！」と思ってReactの勉強を始めたみなさん。

こんにちは！（私だけ？w）
…ところで、始めてみてどうですか？

なんだかよくわからないし、色々ルールがあって「うわーっ！」ってなってませんか？

わかります。私も最初はそうでした。
でも大丈夫！実は、まず基本の3つだけ分かれば、Reactがぐっと身近になって、一気に見通しが良くなるはずです！（たぶん）

今日はその3つのポイントを、一緒に見ていきましょう！

 その１：Webページは「レゴブロック」の集まり！Reactのいちばん大事な考え方は、Webページを**「コンポーネント」**っていう「部品」に分けて作ることです。
ヘッダー、フッター、サイドバー、記事のカード…みたいに、ページを構成するパーツを、ぜんぶ別々のブロックとして作ります。そして最後に、そのブロックたちを「ガチャンコ！」と合体させて、一つのページを完成させるイメージです。
これ、すごく便利だと思いませんか？

だって、一度作った「記事カード」ブロックは、色々なページで使い回せますよね。それに、もしデザインを直したくなっても、そのブロックだけを修正すればOKなんです。
// 「ようこそ！」って表示するだけのレゴブロック（コンポーネント）
function WelcomeMessage() {
  return <h1>ようこそ！</h1>;
}

 その２：HTMLっぽく書ける「JSX」が超便利！じゃあ、そのブロック（コンポーネント）の見た目はどうやって作るの？

それが、**「JSX」**っていう書き方です。
これは、HTMLとJavaScriptの"いいとこ取り"みたいなやつで、HTMLを書く感覚で、見た目を作ることができます。
しかも、{}を使えば、その中にJavaScriptの変数を「ひょいっ」と埋め込めるんです。

見た目（HTML）とデータ（JavaScript）を一緒に書けるから、コードがすごく分かりやすくなります。

const userName = "hogeさん";

function Greeting() {
  // HTMLの中に、{userName}っていう変数を埋め込んでる！
  return <div>こんにちは、{userName}！</div>;
}
ひとつだけ注意！

HTMLでclass="hoge"って書くところ、JSXではclassName="hoge"って書きます。これだけは「そういうルールなんだな」って覚えてあげてください！（適当）

 その３：Reactが"動く"仕組み：「State」と「Props」さて、いよいよReactの本質の部分です。クリックしたら表示が変わったり、動的なページを作ったりするにはどうすればいいんでしょう？

そのカギを握るのが　「State」と「Props」　です。
State：見た目をガラッと変える方法
Stateは、そのコンポーネントが持ってる「状態」や「データ」のこと。

そして、Reactのいちばん面白いところがこのStateなんです！
ただの変数と違って、Stateの値が変わると、画面も勝手に「ささっ！」と更新してくれるんです。
Stateを使うには、useStateっていうのを使います。

import React, { useState } from 'react';

function Counter() {
  // 「count」っていうStateを作る。最初は0。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>クリックした回数: {count}回</p>
      {/* このボタンを押すと、countの値が1増えて、画面の数字も自動で変わる！ */}
      <button onClick={() => setCount(count + 1)}>
        クリック！
      </button>
    </div>
  );
}
Props：部品にデータを渡す"バケツリレー"
Propsは、親の部品から子の部品へデータを渡すための仕組みです。

よく「バケツリレー」に例えられるらしいです。

「はい、これ使って！」って、上から下へデータを渡す感じ。
「この部品にはこの名前を表示してね」みたいに、外から指示を出したいときに使います。

// 子部品。propsっていうバケツでデータを受け取る
function Greeting(props) {
  return <p>こんにちは、{props.name}！</p>;
}

// 親部品
function App() {
  return (
    <div>
      {/* Greeting部品に「田中さん」ってデータを渡してあげる */}
      <Greeting name="田中さん" />
      {/* こっちの部品には「鈴木さん」を渡す */}
      <Greeting name="鈴木さん" />
    </div>
  );
}

 まとめ：最終的にReactの超基本ポイントを3つ、紹介してみました。
少しReact理解できた気がしませんか？（できなかったらごめんなさい、、）
その１：コンポーネント（レゴブロックみたいに部品を作る！）

その２：JSX（HTMLっぽく書ける便利なやつ！）

その３：StateとProps（画面を動かす言葉と、データを渡すバケツリレー！）
この3つがなんとなく分かれば、他の人が書いたコードやチュートリアルが、「あ、これやったやつだ！」みたいに読めるようになってきますよ！
私もまだまだ勉強中ですので、もしつまずいたらまたこの記事を見に来てくださいね！

一緒に頑張っていきましょう！

はじめに：Reactの勉強、はじめてみたけど…

その１：Webページは「レゴブロック」の集まり！

その２：HTMLっぽく書ける「JSX」が超便利！

その３：Reactが"動く"仕組み：「State」と「Props」

まとめ：最終的に

Discussion