ダークモード切替(React版)

初段 / 目安 20分

陽葵さんが夜のカウンターから顔を上げます。「JS 版の夜モード、リニューアル後も残して！ でも classList を触るんじゃなくて、React 流でね」。

JS 道場では、ボタンが押されるたびに要素を探し出して classList.toggle でクラスを付け外ししていました。React ではその手つきを使いません。触るのは state だけで、クラスが付くか付かないかは 今の state から毎回決め直す 形にします。

持つのは真偽値の state を1つです。const [dark, setDark] = useState(false); と書けば、dark が今の夜モードの状態になります。あとは一番外側の要素の className を、dark から組み立てるだけです。三項演算子を使って className={dark ? "wrap dark" : "wrap"} のように書くと、state が変わった瞬間にクラスの有無が付いてきます。

切り替えるボタンは、今の値をひっくり返した値を更新関数に渡します。setDark(!dark) です。dark = !dark と直接代入しても画面は動きません。

これが React の言う「宣言的」の入口です。DOM を直接いじって手順を並べるのではなく、状態と見た目の対応を一度書いておけば、状態が変わったときの見た目は React が引き受けてくれます。

完成条件

• 夜モードかどうかを真偽値の useState で持つ
• 一番外側の要素は常に wrap クラスを持ち、夜モードのときだけ dark クラスも付く
• 最初は夜モードではない
• className="mode-btn" のボタンを押すたびに、夜モードと昼モードが入れ替わる

進め方

CSS 側には .wrap.dark の見た目が仕込んであります。クラスが付いた瞬間に背景と文字色が入れ替わるので、動いていれば見た目ですぐ分かります。

三項演算子は 条件 ? 真のときの値 : 偽のときの値 の形です。JSX の属性に埋めるので、波かっこの中に書きます。文字列をつなぐ書き方でも構いませんが、wrap を落とさないよう気をつけてください。wrap が消えると幅も余白も一緒に消えます。

押しても何も起きないときは、更新関数を呼んでいるか、渡している値がひっくり返っているかを確かめてください。setDark(dark) では今と同じ値を渡しているので、何も変わりません。

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