ナンクロで数字探しを省くためのツール作成
最近漢字ナンクロをよく解いたのだが、問題が大きくなってくると熟語を考えるより数字を探す時間の方が長くなってしまい面倒だった。それを解消するためこちらのようなツールを作った。
https://y-kamiya.github.io/nankuro-editor/public/
使い方
repo上にexamplesとして例となるデータをおいたので、同じようにjsonファイルを作ってブラウザ上で読み込めばOK
{
"data": [
[2,4,1,3,4],
[4,0,2,4,0],
[2,2,0,2,5],
[0,5,3,0,1],
[1,3,2,5,3]
]
}
上のようなデータをloadすると下のような画面になる
上部に答えを入れるテーブルがあり、focusすれば問題中の対応する部分もわかる。
解いている間に間違って戻るなどボタンなど押してしまうとすべてクリアされてしまうので注意。save fileをすれば答えも含めてjsonとして保存できるので、解きつつたまにsaveしておくことを推奨。
ちなみに、問題が大きい場合jsonデータを作るのが大変なので、imageファイルから必要なデータを読み取ってjsonするツールを別途作成中。
実装
reactで実装。tableの各セルの値に合わせて処理を変える必要があるが、reactだとその部分をcomponentとして分離しておけるので相性よく感じた。また、
- 入力に応じてイベントを飛ばす
- イベントに応じてstoreの処理
- storeの状態に応じて表示分け
とすべてを分離して書けるので各々をすっきりと書くことができ、ロジックを考える上でも混乱することなく進められたのもよい。
開発環境についてはホストの環境上にいろいろinstallするのを避けたかったためdockerを利用。
docker-composeは特に使う必要なかったのだが、使うimageやオプションを設定ファイルとして書いておけるというメリットがあるので使ってみた。
