Counter App
数値を増減させるシンプルなWebアプリケーション。
プロジェクトのメイン画像
概要と目的
Reactの最も基本的な機能である「ステート管理」を学ぶために作成したアプリケーションです。ボタンクリックによって数値が増減するという、UIのインタラクションの基礎を実装することを目的としました。
技術スタック
- React (`useState` hook)
- JavaScript (ES6+)
- CSS3
工夫した点・苦労した点
課題: Reactを学び始めたばかりで、クラスコンポーネントではなく、よりモダンな関数コンポーネントとHooksを使って状態を管理することに挑戦しました。
解決策: `useState`フックの概念を学習し、カウンタの現在の値を保持するステート変数と、その値を更新する関数を定義しました。これにより、クラスを記述することなく、シンプルで宣言的なコンポーネントを作成することができました。
このプロジェクトから学んだこと
React Hooks、特に`useState`の基本的な使い方を完全に理解することができました。コンポーネントの状態がどのようにUIに反映されるかという、Reactの核となるリアクティブなシステムの仕組みを掴むための、非常に重要な第一歩となりました。