React 習作 第10回 ラグマス スキルシミュレータβ版

前回からそこそこの期間での更新になります。今回はReactのクラスコンポーネントで書いていた部分を全部Hooksで書き直しました。内部の動作は変わりましたが見た目の動作はほとんど変わっていないはずです。

※β版につき各自の責任でお使いください。

作ってみた感想とか

最初は四苦八苦しましたが、慣れてくるとコードの見通しが良くなる傾向にありました。あとはuseMemoとかuseCallbackといった計算の結果をキャッシュしてくれる仕組みが便利に感じました。毎回計算しなくても良い部分が所々にあったわけですね。

他だとthisをほとんど書かなくて良くなったのが印象的でした。stateが単なる1変数になる仕組みだからですね。これもコードの見通しが良くなった一因ですかね。

そんなわけでクラスで書くより便利になったので、今後はHooksで書くことになると思います。

ToDo

  • Reactのお作法がまだまだ分かってないので勉強する(Hooksの更なる理解が必要
  • そもそもJavaScriptの勉強が足りてないのでは?
  • 合法的に画像が手に入るならスキルアイコンを付けたい(望み薄
  • 入力データの保存・復元をできるようにする(要らなそう
  • URL入出力のチェックを厳しくする(どうしようかな…

まとめ

というわけで内部の更新でした。ざっと触って問題なく動いているはずですが、かなり書き直したのでバグってる可能性はあります。バグの指摘などがありましたらコンタクトTwitter辺りにコメントしてやってください。手癖で触るから自分だけだと完全にバグの除去ができないと思うのでツッコミお待ちしております。

それでは。