前回作成したカウンターコンポーネントを改良して、より機能的なバージョンを作ってみましょう。 今回は、増加機能に加えて、減少機能とリセット機能を実装します。

改良版カウンター

以下が実際に動作する改良版カウンターです。各ボタンをクリックして動作を確認してください：

現在のカウント: 0

増加 (+1)減少 (-1)リセット

実装の解説

前回のバージョンから機能を追加し、UIも改善しています。新しいコードを見てみましょう：

import { useState } from 'react';

export default function EnhancedCounter() {
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <p>現在のカウント: {count}</p>
      <div className="button-group">
        <button 
          onClick={() => setCount(count + 1)}
          className="counter-button increment"
        >
          増加 (+1)
        </button>
        <button 
          onClick={() => setCount(count - 1)}
          className="counter-button decrement"
        >
          減少 (-1)
        </button>
        <button 
          onClick={() => setCount(0)}
          className="counter-button reset"
        >
          リセット
        </button>
      </div>
    </div>
  );
}

追加された機能

1. 減少機能:

   • -1ボタンをクリックすると、カウントが1減少
   • setCount(count - 1)で現在の値から1を引く

2. リセット機能:

   • リセットボタンをクリックすると、カウントが0に戻る
   • setCount(0)で値を初期状態にリセット

3. UI改善:

   • ボタンを横並びに配置
   • 機能ごとに異なる色を使用
   • ホバー効果の追加

まとめ

このように、基本的なコンポーネントに機能を追加していくことで、 より使いやすく魅力的なUIを作ることができます。