【React入門】カウントアプリを作って学ぶ！useStateとイベント処理を完全習得

プログラミング

Reactで「カウントアプリ」を作ることは、Reactの基本を学ぶ第一歩に最適です。
「Reactの使い方がいまいちわからない」「stateやイベントの仕組みを体験したい」と感じていませんか？
本記事では、React初心者でも迷わず作れるよう、環境構築から完成コードまで、わかりやすく解説いたします。
たった数分で作れるアプリを通じて、「動くReact」を体験できる内容になっています。

React カウントアプリの作り方完全ガイド

結論：カウントアプリはReact学習の登竜門

カウントアプリは、Reactにおける「状態管理（state）」と「イベント処理」の基本を一度に学べる題材です。
この2つを理解すれば、他のアプリ開発にも応用できます。
初心者にとって、学習の第一歩として最適な構成と言えるでしょう。

Reactの開発環境を用意しよう

必要なソフトの確認

まず以下がPCに入っているか確認します。

  • Node.js（https://nodejs.org/ja）
  • npm（Node.jsと一緒に入ります）

確認コマンド：

1
2
node -v
npm -v

Create React Appで開始

簡単にReact環境を整えるにはCreate React Appが便利です。

1
2
3
npx create-react-app counter-app
cd counter-app
npm start

数分で開発環境が立ち上がります。

カウントアプリに必要な構成を理解

アプリに必要な機能

今回のアプリでは以下の操作を実装します。

  • 「+1」ボタンで数値を増やす
  • 「-1」ボタンで数値を減らす
  • 「リセット」ボタンで0に戻す

使用するReactの要素

以下の機能を使います。

  • useState（状態を管理）
  • イベントハンドラー（onClick）

これらはReactでアプリを作る上で必須の知識です。

カウントアプリを実装する手順

コード全体を作成

以下はApp.jsの例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useState } from "react";
 
function App() {
  const [count, setCount] = useState(0);
 
  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);
  const handleReset = () => setCount(0);
 
  return (
    <div style={{ textAlign: "center", marginTop: "100px" }}>
      <h1>カウント: {count}</h1>
      <button onClick={handleIncrement}>+1</button>
      <button onClick={handleDecrement}>-1</button>
      <button onClick={handleReset}>リセット</button>
    </div>
  );
}
 
export default App;

このコードをsrc/App.jsに書き換えるだけで動作します。

補足：スタイルの追加

スタイルはCSSでもよいですが、今回は簡単にstyle={{}}で追加しています。

よくあるエラーと注意点

useStateの書き方ミス

  • ✅ 正しい記法：const [count, setCount] = useState(0);
  • ❌ よくある間違い：useState = (0);

JSXでのonclick記述

  • 正：onClick={関数名}
  • 誤：onClick="関数名()"

初心者が混乱しやすいポイントです。

学びを深めるおすすめ教材とリンク

React公式チュートリアル

  • https://ja.reactjs.org/tutorial/tutorial.html

公的な支援制度（例：GIGAスクール構想）

  • 文部科学省 GIGA：https://www.mext.go.jp/a_menu/other/index_00001.htm

学習を支援する政策も活用しましょう。

完成形コードのまとめ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useState } from "react";
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <div style={{ textAlign: "center", marginTop: "100px" }}>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}
 
export default App;

まとめ：最速でReactの基礎が身につく

Reactのカウントアプリは、最小のコードで最大の学習効果が得られる題材です。
環境構築からuseStateの理解、イベント処理の使い方まで、一通り体験できます。
まずはこのアプリを作り、Reactの世界に一歩踏み出してみましょう。

タイトルとURLをコピーしました