昨日からタイピングのアプリを本格的に開発しており、一旦タイピングゲームをするためのガワの部分としてReactでフロントエンドを作っている。
Reactはインターンの時も何となく書いているという感じなので、しっかり理解しないとやばいなと感じる今日このごろ。この個人ブログの記事の執筆部分とか自動保存部分とかは結構Reactっぽく細かい制御をしていた気がするので、その時に改めて状態とかコンポーネントのライフサイクルとかについてしっかり頭に入れたという感じだったが、もう4ヶ月前のことなので、かなり忘れてしまっていた。
てなわけで、今日はReactのリハビリを行いながら、タイピングアプリの開発に精を出していた１日である。と言っても対して集中して書いているわけでもないんだけど。
〜
今日大きく詰まったところは
ReactでsetIntervalを使用したタイマーの作成
stateの値が即時反映されないこと
ひらがなをローマ字入力する際の揺れを吸収する方法
の３つだった。上の２つはReact中級者の人にとっては当たり前のことなんだが、いつも雰囲気でやっているせいで結構理解に戸惑ってしまった。
1つ目のReactのsetIntervalを使用したタイマーの作成については、useEffectを使用して実装したが、あまり参考になる良さそうな記事がなくて少し手間取った。一旦はuseEffect内でそれっぽい感じに処理を書いてみたのだけど、多分書き方が微妙だと思うので、コンポーネントを切り出す時には少し修正が必要そう。ちなみに、以下の記事はそこそこ参考になった。
https://qiita.com/FumioNonaka/items/587c3ed8545d820f330c
2つ目のstateの値が即時反映されない問題については、そもそもuseStateのsetterは非同期関数なので、呼び出しタイミングでは、キューにレンダリングのスケジュールを追加する処理を行い、良きタイミングでReact側で再度レンダリングをするらしい（公式docにはトリガー→レンダ→コミットとして記述されている）。つまり何が言いたいかというと、stateの更新タイミングというのはあくまで非同期でReact側で制御されるものなので、stateの更新後の値を何らかの処理に使いたい（例えば、stateが特定の値になったタイミングで何か別の処理を行う）場合には、更新後の値を別の変数として持っておくなりして使用する必要があるということだ
3つ目はReactとは直接関係ないが、日本語のタイピングアプリを作る上での少し厄介になるポイントなので、少し説明しておく。
前提として、私が現在開発しているタイピングアプリは、変換操作を含まないタイピング（寿司打やe-typing）の形式のアプリである。（変換操作を含む場合は、単に変換後の文字列を比較すれば良いだけ）
かな文字の入力方法は大きく分けて訓令式とヘボン式の２種類があることはご存知の通り。また、「ん」は、次に来る文字が存在しない、または「なにぬねの」の時はnnでなくてはならないが、それ以外では、nでもnnでもんに変換される。このように、あるひらがな文字列を入力するローマ字の組み合わせは１つに定まらないというのが、日本語のタイピングを照合する際の難しさの一つである。
例えば、「しんじゅく」というひらがなに対応するローマ字入力は
sinjuku
sinzyuku
shinjuku
shinzyuku
sinnjuku
sinnzyuku
shinnjuku
shinnzyuku
の８通りある（siとshi、nとnn、juとzyuで2通りが３つあるから2の3乗で8通りになる）。お
https://adalabtech.com/blog/typing-game-romaji-converter
上記記事のconverterが具体的に内部でどのように文字列評価をしているのかまでは具体的には追えていないが、出力がおかしい箇所があるので後で直す必要がある。500行くらいあるファイルなので、まぁまぁめんどくさい。GithubのRepositoryを見に行ったら、コード置いてあったんだけど、Claude Codeが作ったっぽい雰囲気だった。本人のタイピングアプリ内は日本語対応していなかったのは、Caludeが吐き出したこの合致評価アルゴリズムを修正できなかったのだろう。こうなったら自分で読んで修正するしかないcar。（AIでやらせてもあまり勉強にならないので、個人開発は基本的に自分で手を動かしてやるつもり）
あとは、ReactのonKeyDownイベントハンドラで入力キーを一文字ずつ受け取ってそれを元に逐次入力キー列を評価していくという感じの処理なので、普通に結構めんどくさい。
ただ、Reactの勉強という観点では、タイピングアプリはかなりおすすめかもしれない。JSのイベントなどの概念にも触れつつ、ReactのState周りをかなり丁寧に見ていく必要があるため。（WEB開発のチュートリアルとしてTODOアプリをやるみたいな感じ）
明日からは技術研修の開発も本格的にスタートする感じで、おそらく持ち帰りで作業することも増える気がするけど、配属されたらReactも当然書くので、少しずつ感を取り戻しつつ、同時に本質的な理解を進めて行かねばという感じ。頑張ろう💪
〜
ちなみに、今日の日中は自由が丘に買い物をしに行って、雑貨屋さんが並ぶストリートマーケットをぶらぶらしていた。インド風の藁？ぽい材質の手提げ鞄が、プレゼントを詰め合わせるのにちょうどよくて、買おうとしたのだけど、前の客がずっと店の人としゃべっててかれこれ１０分くらいうろうろと待機する羽目になった。自由が丘で買い物するような東急沿線に住んでいる主婦は土日なんて本当に時間を持て余しているのだろう（クソデカ主語