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

投稿日 2021-02-18

Reactの勉強用としてラグマスのスキルシミュレータを作ってみました。とりあえず、まだ未完成ですけど一区切りのところまでできたので公開してみます。

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

作ってみた感想とか

まだチュートリアルの域を超えていない気はしますが、何となく基本的なことは分かった気がします。チュートリアルでは先っぽから作ってリフトアップしていく形式でやってますけど、ある程度必要な要素が分かってれば上側のstateに持たせて下に流すほうが楽な印象でした。

JSONの読み込みとか分からなかったのでスキルのデータとかはメインのプログラムソースにグローバル変数として直書きしてるのがかなりダサいポイントですね。加えて同一ページで複数の職業に切り替える仕組みを完全に切り捨ててあります。他の職業のを作る時は別のディレクトリに開発環境コピーしてスキルデータとか書き直しです。

あとスキルの配置なんかも完全にハードコーディングなので、自分の見てない環境でどう見えてるのか全く想像できません。ただiPad mini(5th Gen)の横画面で見たら、意図せずにぴったりサイズになってたのが面白かったです。

ああそうだ、一応職業名の辺りを触ると状態がリセットされるようになってます。リセットボタンを配置するのが面倒だっただけなので後で何とかします。

ToDo

Reactのお作法がまだまだ分かってないので勉強する
Reactのチュートリアルで最初から入ってる要素をカスタマイズしたい(faviconとか
上位2次職からの上限突破スキルへの対応をする
3次職への対応をする
合法的に画像が手に入るならスキルアイコンを付けたい
アイコンの件と合わせてUI関係の調整をする(無いなら無いなりの表示に
入力データの保存・復元をできるようにする
入力データのURL出力・入力をできるようにする
スキルレベル減少ボタンを付ける(要る？

まとめ

というわけで、まだまだ習作ですがコツコツやっていくつもりで公開してみました。感想とか要望とかアイデアとか何かありましたらコンタクトかTwitter辺りに気軽にコメントしてくだされば励みになるので、よろしくお願いします。

それでは。