レビュー(5/16)

[wafuwafu13]

• [おすすめ]以下のようにするとスッキリかけます。

const colorModels = [
    "XYZ",
    "cmyk",
    "hsv",
    "hex",
    "name",
    "hsl",
    "rgb"
] as const;

type colorModel = typeof colorModels[number];

type State = {
    color: number[][]
    result: {
        [C in colorModel]: {
            value: string
        }
    }
}

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/redux/colorSlice.ts#L6-L31

• 汎用的なメソッドを置くディレクトリ名はutilが一般的だと思ってます。
  https://github.com/nisi0929/favorite-color-recommend/tree/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/methods

• [細かい]tがマジックナンバーかつ変数名から意味が取れないのでMINやMAXのように定数化するかコメントで補足するかした方が良いと思います。(iも同じ)
  https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/methods/RandomColor.ts#L5

• [細かい] https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map#when_not_to_use_map に該当するのでforEachの方が適切です。

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/methods/CalcResult.ts#L6-L10

• [単体テスト書くとしたら] Math.roundを別関数に切り出してその関数をモックします。イメージ: https://wafuwafu13.hatenadiary.com/entry/2021/03/01/121427 の序盤

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/methods/CalcResult.ts

• [質問] 以下のようにvalueという変数名を設定しなかったらRedux Toolkitは動作しないとかありますか？同じvalueというキーを持っているのは冗長のように思えました。

result: { 
     XYZ: ""
     cmyk: ""
     ...

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/redux/colorSlice.ts#L34-L37

• [質問] 同じ処理なのに分けた意図ってありますか?

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/redux/counterSlice.ts#L11-L16

[感想]

• https://color-recommender.netlify.app/about がもう少しだけ詳しくてもいいかも(「選択した5色の平均を取ります」の1文だけでも)
• https://www.thecolorapi.com/ 便利ですね

[kazuki-komori]

型パズル良いね 👍

[miso-devel]

@wafuwafu13

• [質問] 以下のようにvalueという変数名を設定しなかったらRedux Toolkitは動作しないとかありますか？同じvalueというキーを持っているのは冗長のように思えました。

result: { 
     XYZ: ""
     cmyk: ""
     ...

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/redux/colorSlice.ts#L34-L37

• 質問の意図に添えているかわかりませんが、valueを設定しないとエディタで指摘されます。Redux Toolkitだから動作しないみたいな感じではない気がします。

• [質問] 同じ処理なのに分けた意図ってありますか?

https://github.com/nisi0929/favorite-color-recommend/blob/6d029ec9c18e806311cacf9698ce692a4715a6a4/src/redux/counterSlice.ts#L11-L16

• 少し違う仕様で作ろうと思っていてその仕様ができなかったので一旦残している感じになります！

[wafuwafu13]

valueを設定しないとエディタで指摘されます。Redux Toolkitだから動作しないみたいな感じではない気がします。

色々変えないといけないっぽいのでペアプロでもしましょー

少し違う仕様で作ろうと思っていてその仕様ができなかったので一旦残している感じになります！

👍