女性向けエンジニアスクール
3秒でわかる
数値をひとつ保持して増減させる仕組み。状態を持ち、それを変え、画面へ映すという一連の流れを学ぶ最小の題材として使われます。
もう少し詳しく
どういうものか
数値の状態をひとつ持ち、ボタン操作やイベント発生に応じて足したり引いたりする仕組みの総称。UI の題材としては「+ と - のボタンと現在値の表示」という最小構成を指し、プログラム一般では出現回数を数える処理も含む。
UI のカウンタが入門の定番になるのは、状態を持つこと、状態を変えること、変わった結果を画面に反映することという 3 つを、いちばん少ない行数で通せるからになる。
なぜ必要か
画面が変わるアプリは、どれも「値を持ち、操作で更新し、再描画する」という同じ流れで動いている。カウンタはその流れだけを取り出した骨組みで、ここを理解しておくと、フォームやカートや検索条件といった複雑な状態も同じ考え方で読める。
具体例
React で書いた最小のカウンタ。
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>現在の値は {count}</p>
<button onClick={() => setCount((c) => c + 1)}>ふやす</button>
<button onClick={() => setCount((c) => c - 1)}>へらす</button>
<button onClick={() => setCount(0)}>リ<a href="/glossary/set-ds" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">セット</a></button>
</div>
);
}集計としてのカウンタなら、辞書を使って数える形になる。
from collections import Counter
words = ["apple", "banana", "apple", "cherry", "apple"]
print(Counter(words).most_common(2)) # [('apple', 3), ('banana', 1)]つまずきやすいところ
React で setCount(count + 1) を 1 つのハンドラの中で 2 回書くと、値は 2 ではなく 1 しか増えない。count はそのレンダリング時点の値に固定されており、両方とも同じ数を元に計算するため。前の値を引数で受け取る setCount((c) => c + 1) の形にすると正しく積み上がる。
もう 1 つは、count++ のように状態を直接書き換える操作。React は変数の中身の変化を検知しないため、値は変わっても画面が更新されない。更新は必ず setter を通す。
複数のイベントで同じカウンタを触る場合、更新が競合しないよう、常に前の値からの差分で書く癖をつけておくと安全になる。
覚え方
「持つ、変える、映す」の 3 手。どんな画面もこの 3 手の繰り返しでできている。
