Open hrddd opened 4 years ago
jsonはさておき、reducerの追加は面白かった。 空配列を置いた時に、typescriptで怒られたので、asを使い、型を教えてあげた。 そのほか、APIの返り値(json)の型を定義しておき、コード上で活用してみた。 ほぼほぼ画面をみることなく、ベースの作成ができた。 async(データのfetch)に関しては、実験すらしていない。コレが次のstep（jsoon読み込み）でいい感じにできていたら、TSすごい、ということになるだろう。 ただ、それを抜きにしてもTSを使用した開発は気持ちが良い。 考えるフローがコードに現れてくるようなイメージ。 空配列をおく時に、「コレはただの空配列じゃなくて、こんなデータが入ってくるやつと認識して書いている」を記述することができて、その後に書いたものは、インテリセンスもそれに対応してくれる。 妖精さんとかそんな感じだね。 後から見返した時、、、はもちろんなんだけど、書き味のよさ、が指示され続ける理由なんだろうなあと思ったりした
3時間
「poke」という名称をどこまで使うか悩んだ。 pokeDataを格納するところ、、、はいいと思っている（resourceはAPIと一対一でつくっとけばいいかな、、、って） uiでどこまでやるか、、、「anaglamPuzzle」というredux module, componentを作り、その中でもpokeDataの型を参照しているんだよなあ、、、 型にしか依存してないので、いいっちゃいいが、ポケモンじゃないバージョンとも切り替えたいときはどうするのだ、、、とか、、、 いや、、、コレはワナだ、、、失敗するために勉強しているんじゃないか、、、と思い直す。 逆にポケモンじゃないバージョンとの切り替えもマイルストーンに置くことを思いついた。 他にもわからんことはありすぎるので、一旦コレで良しとする。迷ってもしょうがない、、、（実装したことがなければ想像は正確じゃない）。 次はいよいよfetchを実装する
30分
やっぱどっちもナールほど、という感じがしない。 特にthunkはpayloadの型がfunctionになるのがきもい。 直感的ではあるけど、ネストが深くなりそうなのもなんだか、、 sagaはまだ分かる、、、けどなあ、、、なんかな、、、middleware封じ込めって感じが如何せん気に食わない。 middlewareにはデータ構造に関係しないヤツ、、、を入れたい気持ちがある。 要件が変わった時にコレって示したいよね。。。。と思ったが、うん、どれにしろmiddlewareで解決するじゃんね、と思い、どれでもいいかという感じがしてきた。 redux-effectsも良さげだし、hooksで書くのもいいとか書いてあるし でもreduxにはAPIはmiddlewareで受けとけとか書いてあるしなあ、、 どうしようかな。。。 悩んだら公式だ。 https://github.com/aikoven/typescript-fsa#redux-observable redux-observableに興味ニキかあ。。。
めんどくせえhooksだ（他のは後からやる）
1時間
namespace区切ってくれるとかやったーとか思ってたらそうじゃなかった（クソ） わざとActionの名前を被らせて実行してみる、、、両方とも反映されました（死） 推測よりも計測ですね（あと公式のdocumentみとけという）
15分
dispatchで返すのはプレーンなobjectでなければいけない、、、（actionCreatorを返してはいけない、、、） asyncでやったら忘れてた。 必ず引数を与えてやらなければいけない、、、（方法あるかもだけど）
const actionCreator = actionCreatorFactory('pokeData'); export const fetchPokeData = actionCreator.async<string, PokeDex, string>("FETCH");
useEffect(() => { // NG dispatch(fetchPokeData.started); // NG dispatch(fetchPokeData.started()); // OK dispatch(fetchPokeData.started('Please Give Me Pokemons...')); }, [dispatch]);
TypeScriptでのエラーハンドリングが難しそうだった https://qrunch.net/@tommy/entries/N4RabinOf00WZXd8
どうにも理解できなかったので、公式参考にgetJSONで、、、 https://typescript-jp.gitbook.io/deep-dive/type-system/generics#dezainpatnnajenerikku ちょっとだけジェネリクス君が作れそうな気がしてきた
ちなErrorに関してアノテーションは使えない、、、とか。多分、Errorだけthrowされるとは限らないでしょ、、、ってことかな https://typescript-jp.gitbook.io/deep-dive/main/common-errors#kyatchinohaanotshonwotsukotohadekimasencatch-clause-variable-cannot-have-a-type-annotation
hooksに関して、配列を返しているんだけど、as constにしないとダメそげだった（型推論的に、まあ分かる）
['string', {'hoge': hoge}] // 3つ目には何が入るんだろうか？決められない → (string | {'hoge': hoge})[]
['string', {'hoge': hoge}] as const // ここで固定 → [string, {'hoge': hoge}] // 使える（呼び出したとこで指定できる）
4時間 （画面全く見ずに組めるのすごいかも）
jsonの追加とreducerらの追加
jsonはさておき、reducerの追加は面白かった。 空配列を置いた時に、typescriptで怒られたので、asを使い、型を教えてあげた。 そのほか、APIの返り値(json)の型を定義しておき、コード上で活用してみた。 ほぼほぼ画面をみることなく、ベースの作成ができた。 async(データのfetch)に関しては、実験すらしていない。コレが次のstep（jsoon読み込み）でいい感じにできていたら、TSすごい、ということになるだろう。 ただ、それを抜きにしてもTSを使用した開発は気持ちが良い。 考えるフローがコードに現れてくるようなイメージ。 空配列をおく時に、「コレはただの空配列じゃなくて、こんなデータが入ってくるやつと認識して書いている」を記述することができて、その後に書いたものは、インテリセンスもそれに対応してくれる。 妖精さんとかそんな感じだね。 後から見返した時、、、はもちろんなんだけど、書き味のよさ、が指示され続ける理由なんだろうなあと思ったりした
かかった時間
3時間
タイポの修正と悩みの時間
「poke」という名称をどこまで使うか悩んだ。 pokeDataを格納するところ、、、はいいと思っている（resourceはAPIと一対一でつくっとけばいいかな、、、って） uiでどこまでやるか、、、「anaglamPuzzle」というredux module, componentを作り、その中でもpokeDataの型を参照しているんだよなあ、、、 型にしか依存してないので、いいっちゃいいが、ポケモンじゃないバージョンとも切り替えたいときはどうするのだ、、、とか、、、 いや、、、コレはワナだ、、、失敗するために勉強しているんじゃないか、、、と思い直す。 逆にポケモンじゃないバージョンとの切り替えもマイルストーンに置くことを思いついた。 他にもわからんことはありすぎるので、一旦コレで良しとする。迷ってもしょうがない、、、（実装したことがなければ想像は正確じゃない）。 次はいよいよfetchを実装する
かかった時間
30分
redux-saga, redux-thunk の復習
やっぱどっちもナールほど、という感じがしない。 特にthunkはpayloadの型がfunctionになるのがきもい。 直感的ではあるけど、ネストが深くなりそうなのもなんだか、、 sagaはまだ分かる、、、けどなあ、、、なんかな、、、middleware封じ込めって感じが如何せん気に食わない。 middlewareにはデータ構造に関係しないヤツ、、、を入れたい気持ちがある。 要件が変わった時にコレって示したいよね。。。。と思ったが、うん、どれにしろmiddlewareで解決するじゃんね、と思い、どれでもいいかという感じがしてきた。 redux-effectsも良さげだし、hooksで書くのもいいとか書いてあるし でもreduxにはAPIはmiddlewareで受けとけとか書いてあるしなあ、、 どうしようかな。。。 悩んだら公式だ。 https://github.com/aikoven/typescript-fsa#redux-observable redux-observableに興味ニキかあ。。。
めんどくせえhooksだ（他のは後からやる）
4
かかった時間
1時間
ふと気になったActionのNamespace
namespace区切ってくれるとかやったーとか思ってたらそうじゃなかった（クソ） わざとActionの名前を被らせて実行してみる、、、両方とも反映されました（死） 推測よりも計測ですね（あと公式のdocumentみとけという）
かかった時間
15分
dispatchの基本的な話
dispatchで返すのはプレーンなobjectでなければいけない、、、（actionCreatorを返してはいけない、、、） asyncでやったら忘れてた。 必ず引数を与えてやらなければいけない、、、（方法あるかもだけど）
かかった時間
15分
fetchでjsonを読み込む
TypeScriptでのエラーハンドリングが難しそうだった https://qrunch.net/@tommy/entries/N4RabinOf00WZXd8
どうにも理解できなかったので、公式参考にgetJSONで、、、 https://typescript-jp.gitbook.io/deep-dive/type-system/generics#dezainpatnnajenerikku ちょっとだけジェネリクス君が作れそうな気がしてきた
ちなErrorに関してアノテーションは使えない、、、とか。多分、Errorだけthrowされるとは限らないでしょ、、、ってことかな https://typescript-jp.gitbook.io/deep-dive/main/common-errors#kyatchinohaanotshonwotsukotohadekimasencatch-clause-variable-cannot-have-a-type-annotation
hooksに関して、配列を返しているんだけど、as constにしないとダメそげだった（型推論的に、まあ分かる）
かかった時間
4時間 （画面全く見ずに組めるのすごいかも）