つくる - ヘッダー時計
この回で作るもの
プロフィールサイトのヘッダーに、いまの時刻を出しつづける時計を置きます。JavaScript 入門で innerHTML を書きかえて作ったものを、React の書き方でやり直します。
第7章で学んだ3つをそのまま使います。副作用は useEffect に置くこと、依存配列で走るタイミングを決めること、始めたタイマーはクリーンアップ関数で止めることです。
state に入れるのは時刻そのもの
時計の state は「表示用の文字列」ではなく Date のオブジェクトにします。
JavaScript (JSX)
const [now, setNow] = useState(new Date());こうしておくと、時刻から何を作るか (時分秒だけ、日付つき、挨拶の文言) を描画側で自由に決められます。state には元のデータを持ち、見せ方は描画で作る のが基本の形です。
2桁に揃える
getMinutes() は 5 分なら 5 を返します。そのままだと表示が揃わないので、padStart で 2 桁にします。
JavaScript (JSX)
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");
const clock = `${hh}時${mm}分${ss}秒`;ヘッダーを部品にする
時計はヘッダーの中身なので、Header.jsx に切り出して App.jsx から使います。useState と useEffect は使う部品の中に書きます。時計の state を App が持つ必要はありません。
JavaScript (JSX)
import Header from "./Header.jsx";つまずきどころ
タイマーが動いているかは、時刻の表示だけでは分かりにくいものです。今回は確認用に更新回数も出します。数が増えていれば、setInterval が生きている証拠です。
演習
ヘッダーに常駐する時計を完成させます。