NieRのメニュー画面をReact + Reduxで写経する
３月です。 ４月から新生活ということで研究やインターンが終わってしまい、プログラミングをやっていく場と目的が取り上げられたので自分のことしか考えていないコードを書くチャンスです。 ということでNieR Automataのメニュー画面をReactで実装してみました。 ゲームUIをブラウザで動くように写経する活動、あまり見られないですが結論からいうとめっちゃ楽しいので体験として良いです。
様子
装飾が加わった pic.twitter.com/WRsTSlL0Nm
— aodnawg (@aodnawg) 2018年3月7日
動いている様子はここから。
IEでみていないけどIEでみると多分八つ裂きにされます。
Safariですらビミョーな動作をする。chromeでやっていきましょう。
https://aodnawg.github.io/nier/public/
github。コードは汚い。
使用技術
ReactとReduxを使っています。
Javascriptは話題のWebpack4を使ってコンパイルしています。 なんか速くなったらしい（何もわからない）。
見た目の調整はSassで記述してこれもwepbackでコンパイル。
アイコンや図形はすべてSVGで書いている。
直線や円形は直接JavaScriptで計算してるけどカーソルとか装飾的な箇所はAffinity Designerで書き出した。
React、SVGを直接DOMとしてpropsで値をダバダバ流していけるのでとても楽しい。
メニュー画面を開くときに三角形がランダムに表示される演出がめっちゃ好きで、これはまた別記事で実装方法書きたい。
所感
資料はネットにたくさんある。
プラチナの開発記事も含め、外部のインタビューにもたくさん資料は転がっている。
こういう記事がゴロゴロと転がっており、写経のためのヒントは用意されている。
Reduxめっちゃ頭使う
データ構造を考えるのがめっちゃ苦手で、リアルタイムな状態をどのように構造化するかを考えるのってめっちゃ頭を使う。
このあたりをナメまくって実装を進めたので本当にひどいデータ構造になっている。
またReactの方もこのデータ構造に依存しまくった書き方にしているので、データ構造の変更に対応するのにめちゃくちゃ時間がかかってしまう。ボロッボロな地盤の上にReactが頑張って動いている感じになってしまった。
Reduxというより依存度が高いデータ構造はちゃんと設計しないとあとで死ぬ。
どんなページを持っていて、現在どのページを表示しているか？とかを適切に表現する方法とか書いてある記事があったら読みたい。
また変更を加えるときにImmutableに行わなければならないから
うっかり破壊的な処理をしてバグに気づくのに時間がかかったりしてしまった。このあたりは慣れかな。
頭を空っぽにしてコードを書きたい。
アニメーションの非同期処理がむずい
たとえば、メニュー画面を表示したあとに文字のタイピングアニメーションを表示させる、など非同期に処理が続いていくときに困った。 Reduxを使うときに非同期処理をさせるライブラリとしてよくredux-thunkとredux-sagaが挙げられるが今回はsagaを利用した。名前がカッコイイので。
アニメーションの非同期処理についてはDenaの開発ブログがよかったです。
おしまい
おしまい。UI写経楽しいのでおすすめ。
