Claudeで作る「桜ちらしLPICコマンド練習暗記ツール」— コンポーネント設計・アニメーション・状態管理を全部解説

はじめに 「問題に正解したら桜吹雪が舞い、ネコバスが合格行きで走る練習ツール」のレシピをシェアします。 本記事では コンポーネント構成・アニメーション・状態管理・SVG描画 を中心に、同じものを自分で作れるレベルまで解説します。 https://claude.ai/public/artifacts/64740b14-28b9-49ef-a2e9-c162a6effbab 全体構成 import { useState, useRef, useEffect, useCallback } from "react"; const SAMPLE = [ { id:"l01", mo...