Open11
nextjsを学びながら脳死コードをリファクタリングする
ろーぜハッカソンに向けて作成したサービス の担当箇所であったフロントエンド部分があまりにもパワーすぎたため、今一度Next.jsに入門して学びながらリファクタリングする。
ろーぜ最初はgachaHomeページ。
やばすぎるので、まずはコンポーネント化してファイルを分ける。
ファイルを分けたのちにどういう構成にするかは後で考える。
ろーぜパッと見るだけでも以下が必要そうなのでまずはこれらに取り掛かる
- 横スクロールでガチャを選ぶところをコンポーネント化
- インデックスによってカラーコードを決定する関数は他でも使うから分ける
- ごちゃ混ぜモードの部分をコンポーネント化する
- ボタンもコンポーネント化
- ガチャサムネイルの種類によって画像が微妙に違って大きさが異なるので修正したい
これは中間apiについて知見を深めてからの実装にしたいので保留だが、api部分も分けたい。
ろーぜ横スクロールのコンポーネント化はできた。
ただ、色を決定する部分の機構が欠けていたけど、このtime_idによって色を決める関数はめちゃくちゃ使うので共通関数として切り出す。
共通関数はutilsというフォルダに入れるのが良さそう。
ろーぜてか今まで適当に全部tsxにしてたけど、
- htmlを返す→tsx
- 値を返す（メソッド）→ts
でよい
ろーぜnextに限った話じゃないけど1ファイル1関数が必須なのか？めちゃくちゃファイル多くならん？だがそれでいい！のか？
ろーぜexport についての勉強も
ろーぜなんか色々絡んでて一生参照するからそういうデータを作った方がいいことがわかった。グローバルで使うそれ系はconstantsに置くのがいいらしい
ろーぜReactNode型って何やねんって思ったけどどうやら最強のやつらしい。マジで汎用性欲しい時はこれ使うのか
ろーぜこいつはためになる