開発ログ

[hrddd]

事前準備

特に手順を決めず、まず動く→整えるという方法でやってみる。（ワクワクしないので） ブランチとかも切らない。（疲れるから）

何を作る？

ポケモンの名前でアナグラムパズル 難易度easy/normal/hard。タイムアタック方式。 レスポンシブ想定。

ざっくり計画

1. [x] 開発環境。https://qiita.com/IzumiSy/items/b7d8a96eacd2cd8ad510 こちらで行ってみます。component管理はAtomicDesignにて。★個人的に開発しやすい感じにここでざっと整えることに。大きなとこでは、Atomicとかスプレッドとか、ducksとか、そんなんに変更する。あとcontainerの接続にはhooksを使う（connectしない）
2. [x] ベース作り。アナグラムは一回のみ。3体くらいで。https://github.com/fanzeyi/pokemon.json を使う予定。全てのデータをgetで取ってきてclient側で整形する。正規化するかもしれないが、元データはいじらないでみる。 以降の段階でうまくいくよう役割わけに注意してモジュールを作成する。 想像できるというのは驕り、、、
3. [x] （追加）ベース作りその２（ヘビーであったので分割）、動作。入れ替えたいものをクリックして、その次に対象をクリックして入れ替える。
4. [x] dnd https://github.com/react-dnd/react-dnd/ をいれる。PCとSPで切り替えねばならないみたい。頑張ろう
5. [x] UXの向上。スクロールはロックしておき、正解したら次の設問へスクロールする。アナグラムに集中するための工夫。。。一旦不正ができちゃう前提で、正しい順番で正しい名前が来たらOKとする。
6. [x] なんかでdeployする
7. [x] ゲーム性の調整: タイムアタック性を入れる。もう一回ボタン作る。設問の範囲、問題の数を選べるようにする。
8. [x] コード上の調整: test,component管理, 非同期処理,middleware(ローディング)
9. [x] PWA化。オフラインでも遊べるようにする（オフラインモードの実装。jsonをキャッシュしておく）
10. [ ] スタイリングに良きように（styleを分割する。storybookなど導入してみる）
11. test入れてみる?
12. [ ] linter入れてみる?
13. [ ] CI入れてみる?（githubActions）
14. [ ] 非同期部分の設計検討
15. [ ] 難易度easy/normal/hardの選択画面を作る。router https://github.com/supasate/connected-react-router いれる
16. [ ] それぞれの難易度の中身作る。絵も出してみる。全部10体。easy→1回入れ替え。全部でてる。normal→2回入れ替え。時間が経つと絵が表示される。hard→3回入れ替え。正解するまで次の設問は表示されない
17. [ ] swagger入れてみる？
18. [ ] API化する。取得時はserver側で全て正解したらAPIを叩いて、開始時のtimeと終了時のtimeをserverで判定する。 https://applingo.tokyo/article/1568 を参考にexpressで作ってみる。（追加）非同期の精査もここ
19. [ ] 不正防止。その場で正解判定の場合、逐一APIに問い合わせるとインタラクションがよくない。一方で、idがそのままだと、正解データがすぐに作れてしまうはず（全pokemonのjsonから、設問用のjsonのidに該当するものをpickすればOKになってしまう）。完全には防止できないが、APIからの設問用ではidをランダマイズし、対応表を併せて送信することで、ワンステップ挟んでみる
20. ~~別ブランチでnext化してみる? ~~

かかった時間

1時間半くらい + 修正15分