正式名称をなんというのかわからないが！ 「二字熟語のそれぞれの漢字の最後のN画だけ描かれたものから元の熟語を当てるクイズ」です。
たとえばこういう問題。使用している漢字は小学一年生レベルです。
答えは……
簡単ですね！
というウェブアプリが以下。漢検十級から二級まで選べるので、好きな難易度で遊んでみてください。解答欄とかはないので、自分で答えを叫んでくださいね。
技術的なこと
めかぬか、漢字ルと、どうやら自分はKanjiVGが好きなようなので、そろそろ再利用しようと思ってReactコンポーネント化を試みた（Storybook）。リモートのSVGファイルを読み込んで、SVGを編集したうえでそれを表示できる最低限の感じ。次に使うときには切り出せそう。
「次の問題」をクリックしたときにちらつかないように、いったんフェードアウトさせた上でSVGのロードが終わったらフェードインするようにしている。二次熟語を構成する両方の漢字のロードが終わったとき、ということで <Kanji char="先" onKanjiLoad={...} /><Kanji char="日" onKanjiLoad={...} /> の onKanjiLoad が合計2回呼ばれたことを確認してフェードイン、という具合だ。しかしこれだと「先日」のあとに「毎日」という問題になった場合に <Kanji char="日" /> については再描画がおこなわれず、onKanjiLoad が1回しか呼ばれなくて困ってしまった。最終的には <Kanji /> の親コンポーネントに key="先日" などと、毎回変わるキーを設定することで強制的に再描画させることができた模様。Reactと非同期処理、いまだよくわかっていな感じがする。
今回はVercelを使ってみた、ということでog:imageも生成できたら面白そうなんだけど、それは今後の課題としておく。
