いいねボタン

初段 / 目安 15分

カードが部品になって上機嫌の陽葵さんが、次の注文を出してきます。「メニューに『いいね』を付けたい。押すたび数字が増える、あの中毒性のやつ」。

画面にはすでにボタンと、いいね数を出す className="likes" の段落が置いてあります。押しても数字は 0 のまま動きません。初期コードは普通の変数でいいね数を持っているからです。

ここが React の最初の分かれ道です。普通の変数を書きかえても画面は変わりません。 変数の値は確かに増えますが、React には「画面を作り直して」という合図が届かないので、前に描いた文字がそのまま残ります。仮に何かの拍子に部品の関数がもう一度呼ばれたとしても、let count = 0; の行を最初から実行し直すので、増やした値は 0 に戻ってしまいます。

この2つをまとめて引き受けるのが state です。useState で持たせた値は、更新関数を通して変えると React が変化に気づいて部品を呼び直し、呼び直されても値は前の続きから始まります。

書き方は const [count, setCount] = useState(0); です。左の count が今の値、右の setCount が値を変える関数で、初期値をかっこの中に渡します。増やすときは count = count + 1 ではなく setCount(count + 1) です。この違いが「画面が動くかどうか」を分けています。

完成条件

• いいね数を useState で持つ
• className="likes" の段落に「いいね 0」のように現在の数を出す
• ボタンを押すたびに、表示される数が1ずつ増える

進め方

useState は React から読み込んで使います。初期コードの先頭には import { useState } from "react"; がすでに書いてあります。

ボタンに処理を付けるのは onClick です。HTML の onclick と違って、渡すのは文字列ではなく 関数そのもの です。onClick={handleLike} のようにかっこを付けずに渡すか、onClick={() => setCount(count + 1)} のようにその場で関数を作って渡します。onClick={handleLike()} と書くと、描いた瞬間に1回実行されてしまうので気をつけてください。

コンソールに数字が出ているのに画面が変わらないときは、まだ普通の変数を触っています。React では画面に出したい値は必ず state にする、と覚えておくと迷いません。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。