miso-devel / favorite-color-recommend

Color Recommender

仕様

• ランダムな色を 5 回選びその平均をとった色を表示するアプリケーション

仕様技術

• [email protected]
• [email protected]
• @reduxjs/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

favorite-color-recommend's Issues

Test何をどこまでする？

E2Eテストか結合テストか

そこまで大規模なアプリでないのとユーザーが操作する部分がそこまで多くないので結合テストがいい気がする

どの部分をテストする？

• 画面遷移
  • 色を選択した時
  • footerのボタンを押した時
• State
  • 色を選択した時のcolor state
  • 色を選択した時のcount state
  • 結果が表示された時のstate
• API
  • APIから返ってきたデータが表示されているか

# favorite-color-recommend

favorite-color-recommend

仕様

• 毎回4色の中から１色選ぶ
• ランダムな色を４色viewに描画する
• それを5回繰り返す
• 選んだ色は上部に示しておきたい
• 選んだ色の平均値をとって結果として表す。

不安なとこ

• 色をbutton要素として設置したい

divをbuttonの中に入れて解決

• 更新したら進行状況が消えちゃうのでどこかに一時的に保存したい（localstrage???）
• Color APIは最終的に結果の色の情報を示すために使うべき
• colorコードをランダムに返す関数を作る
• colorをどうやってとってきてstateに保存する？

colorを引数に渡してstateに保存する
colorを引数に渡すとき表示されてる色とその色は同一でなければならないのでコンポーネントで分けるしかないのか

レビュー(5/16)

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

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/ 便利ですね