はじめに

こんにちは！
未経験からエンジニアを目指して学習中の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で統一します！

これでやっと、カウンターアプリが表示されるようになりました！
今回追加した機能の減少とリセットもうまく使用することができました。

完成品

page.jsの余分な部分を削除して、page.jsファイルの先頭にもuse clientを定義すると完成です！

学んだこと・つまずいた点

学んだこと：

useState を使って状態（count）を管理する方法
JSXの中でイベント処理（onClick）を書く方法
コンポーネントの中で関数を定義して使えること

つまずいたこと：

サーバー側で動かす定義ができていなかったこと
関数名が相違して、うまく読み込めていなかったこと

まとめ

対応する関数名を間違えたり、機能がサーバー側なのかブラウザ側なのかの定義が必要なことを改めて意識しようと思いました！

次回は、
外部APIのSendBirdの使用を行いたいと思います！

最後まで読んでいただきありがとうございました！