【React入門】4ステップで作れるカウントアプリ｜useState・useEffect・propsを実践で習得

はじめに

Reactを学び始めたけど、「useStateやuseEffectの使い方がいまいちピンとこない…」そんな方も多いのではないでしょうか？

この記事では、React初心者でも簡単に作れる「カウントアプリ」を通して、useState・useEffect・propsの3つの基本をステップ形式でやさしく解説します。

💡この記事の内容は、Viteの開発環境が整っていればすぐに始められます。まだ環境構築が済んでいない方は、こちらの記事をご覧ください。

このカウントアプリで学べること

• useState で状態管理をする方法
• useEffect で副作用の処理を実行する方法
• props を使って親から子へデータを渡す方法

ディレクトリ構成

以下のようなファイル構成となります！

以下二つのファイルは今回新規作成するファイルとなるので先んじて作成しておきましょう。
※他のファイルはViteを入れた時にデフォルトで用意されているものです

/src/components/Display.jsx
/src/Counter.jsx

your-project/
├── public/
├── src/
│ ├── components/
│ │ └── Display.jsx　← ステップ3で使う
│ ├── Counter.jsx  　← カウント機能本体（ステップ1〜3で使う）
│ ├── App.jsx        ← エントリーポイント（Viteで自動生成されてる。ステップ4で使う）
│ └── main.jsx       ← Viteで自動生成されてる
├── index.html       ← Viteで自動生成されてる
├── package.json     ← Viteで自動生成されてる

ステップ1：useStateでカウントを管理しよう

まずは、ボタンをクリックしたらカウントが増える基本のカウント機能を作成します。

コード例

// Counter.jsx

import { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

解説

• useState(0) で初期値0の状態を作成
• setCount を使って状態を更新すると、画面も自動的に再描画されます

ステップ2：useEffectで副作用処理を追加しよう

次に、カウントが変更されたときにメッセージを表示する処理を追加します。

コード例

// Counter.jsx

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('カウントが更新されました:', count);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

解説

• useEffect の第2引数 [count] によって、count が変化するたびに処理が実行されます

ステップ3：propsを使って表示専用コンポーネントを作ろう

作成したコードを部品（=コンポーネント）ファイルと本体に分けてリファクタリングしましょう！

カウントの表示部分を別コンポーネントに分けて、propsでデータを渡しましょう。

コード例

// Counter.jsx

import { useState } from 'react';
import Display from './components/Display';

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

  return (
    <div>
      <Display value={count} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

// components/Display.jsx (=コンポーネント)

function Display({ value }) {
    return <p>カウント: {value}</p>;
}

export default Display;

解説

• Display コンポーネントは value を受け取って表示するだけの部品です
• 親 → 子へのデータ渡しが props を通じて行われます

ステップ4：ステップ1～3にて作成したカウント処理を呼び出す

最後にViteの既存ファイルであるApp.jsxのAppメソッドに、カウントアプリの見出し（h1）とカウント処理を呼び出す処理を書きましょう！

// App.jsx
import './App.css'
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Reactカウントアプリ</h1>
      <Counter />
    </div>
  );
}

export default App;

完成

開発環境URLにアクセスして確認してみましょう。

「+1」部分を押すたびに「カウント:～」の数値が1ずつ増えていくはずです！

よくあるエラーと対処法

まとめ

この3ステップで、Reactの基本である

• 状態管理（useState）
• 副作用処理（useEffect）
• コンポーネント間のデータ受け渡し（props）

をしっかりと体験できました。

まずはこうしたシンプルなアプリを通して、Reactの仕組みに慣れていくことが大切です！！

関連リンク・おすすめ記事

• React開発環境の構築方法（Vite編）
• Reactの基本構文とコンポーネントを5分で理解する入門ガイド
• ReactのuseStateとuseEffectの使い方を図解でやさしく解説！