React.js propsとstateの基礎を理解

簡単なカウンターアプリを実装

基礎をおさらい

props (プロパティ)

コンポーネントが親（上の部品）から子（下の部品）にデータを渡すためのもの。

例）親が子どもにプレゼントを渡すようなもの。子どもはそのプレゼントを使うことができますが、プレゼント自体は変えられません。

state (状態)

stateは、コンポーネントの中で自分自身のデータを持つことで、このデータは変えることができます。

例）おもちゃの車があって、その車がどこにあるかを覚えているようなもの。車を動かすと、その位置が変わります。

コードの説明

// カウンター部品（Counter）
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialCount);

Counter部品

• initialCountというプレゼント（props）を受け取る。
• useStateを使って、countという数字を覚える。この数字がstateです。
• incrementという関数を作り、ボタンを押すとcountが1増える。
• decrementという関数を作り、ボタンを押すとcountが1減る。
• resetという関数を作り、ボタンを押すとcountがinitialCountに戻る。

// メインアプリ部品（App）
function App() {
  return (
    <div style={styles.appContainer}>
      <h1 style={styles.title}>Counter App</h1>
      <Counter initialCount={0} />
    </div>
  );
}

App部品

• ここではカウンター部品を使います。
• カウンター部品にinitialCountとして0を渡します。

return (
    <div style={styles.counterContainer}>
      <p style={styles.counterTitle}>Count</p>
      <p style={styles.counterText}>{count}</p>
      <div style={styles.buttonWrap}>
        <button style={styles.button} onClick={increment}>
          +
        </button>
        <button style={styles.button} onClick={decrement}>
          -
        </button>
        <button style={styles.button} onClick={reset}>
          Reset
        </button>
      </div>
    </div>
  );

• {count}は、カウントの状態（state）を表示しています。
• onClick={increment}はイベントハンドラーを設定。ボタンがクリックされたときに対応する関数を呼び出しています。
• {increment} カウントアップ
• {decrement}　カウントダウン
• {reset}　値をリセット

なぜリセットがsetCount(initialCount)なのか？

initialCountは、カウンターの初期値を表す。

親コンポーネント（App）:

CounterコンポーネントにinitialCountという名前のpropsを渡します。
<Counter initialCount={0} />では、initialCountの値を0として渡しています。

子コンポーネント（Counter）:

CounterコンポーネントはpropsとしてinitialCountを受け取ります。
useStateフックを使ってcountという状態を作成し、その初期値をinitialCountで設定します。

hooksの理解

上記コードに、hooksで機能を追加してみた

useEffectを使って、副作用（コンソールログの表示）を追加しています。

  useEffect(() => {
    console.log(`カウントされた: ${count}`);   // 第1引数
  }, [count]);  // 第2引数

• 第1引数
  • 副作用関数。countが変更されるたびにこの関数が実行され、カウントが更新されたことをコンソールに表示する
• 第2引数
  • 依存関係の配列。この配列にはcountが含まれており、countが変更されると副作用関数が再実行される。