Reactを使ってカウンターアプリを作成！【学習記録】

Posted at 2025-07-07

はじめに

こんにちは！
未経験からエンジニアを目指して学習中のReoです。

前回はJavaScriptでシンプルなカウントボタンを作りましたが、
今回はReactを使って、カウンターアプリを作ってみました！

さらに、

数を「増やす」だけでなく「減らす」機能
「リセット」して0に戻す機能
も追加して、より実用的な構成にしてみました！

改めてReactについて再確認し、前回と同じものを作成することで
JavaScriptとReactの違いを実感できると思います！

いざ実装！

まずは、VScode上のターミナルで以下のコマンドを実行します。
そうすることで、Next.jsアプリのひな型が作成されます。
コマンド入力後の質問に対しては、「App Routerを使う？」だけ「YES」にしています。

npx create-next-app@latest counter-app

これでアプリ用の環境構築ができました。

注意
作業前にディレクトリを変更することを忘れない：cd counter-app

もし移動せずにnpm run dev を実行するとエラーになります。
→なぜなら package.json が見つからないから！
※package.jsonは「このアプリに何が必要か」「どう動かすか」をまとめた説明書のようなもの。

package.jsonの役割	内容
① 必要なライブラリを管理	例：React、Next.js、Tailwind など
② スクリプト（コマンド）を定義	例：npm run dev、npm run build
③ プロジェクトの情報を管理	アプリ名、バージョン、ライセンスなど

次に、ターミナルで「npm run dev」を実行して、現状どんなページが表示されるのか確認します。
すると、以下のような雛形ページが表示されるので、これにカウンターアプリの要素を盛り込んでいきます。

counter.jsxファイルを作成して、以下の画像のようにcounterのコンポーネントを作成しました。その際に、コメントアウトで何をしているのか整理してみています。

page.js側でcounter.jsxをインポートして表示できるようにします。
表示場所としてはリストの下にしています。

アロー関数ってなんだっけ？
JavaScriptの中で「関数を短く書くための新しい書き方」のこと!
以下の例のように関数が短く1行でかける！
例：
▼普通の関数
function handleIncrement() {
setCount(count + 1);
}
▼アロー関数
const handleIncrement = () => setCount(count + 1);

※もし複数の処理を行いたい場合は、以下のように{}で囲む。
const handleIncrement = () => {
console.log("増やしました");
setCount(count + 1);
};

実際にnpm run devコマンドで正しくページに表示されてるか確認してみます。
しかし、以下の画像のように「Build Error」が表示されてしまいました。

原因としては、サーバー側で動かす定義ができていなかったこと。
というのも、Next.js（App Router構成）では、ページやコンポーネントはデフォルトでサーバーコンポーネントになっています。
ただし、useState や useEffect などのReact Hooksは「ブラウザ（クライアント側）」でしか使えません。

なので、Next.jsに「これはクライアント側で動かすよ」と明示的に伝えるためにcounter.jtxファイルの先頭に 'use client' を書きます。

これでもう一度、npm run devを使用します。
今度はRuntime Errorが発生してしまいました。

原因としては、関数名がCounterになっていなかったこと。
counter.jtx側では関数をAppで定義してしまっており、インポート側と関数名が違うことで読み込めていませんでした。
なので、関数名はCounterで統一します！