search

hrddd / poke-anagram

https://poke-anagram.vercel.app
0 stars 0 forks source link

開発環境 #2

Open hrddd opened 4 years ago

hrddd commented 4 years ago

packageのinstall

globalのnodeを推奨版にしとく

nodenv global 12.18.2

create-react-app する

npx create-react-app ./ --typescript

→ templateができない。global installされてるとダメ https://create-react-app.dev/docs/getting-started/ https://qiita.com/kijibato/items/ca74c6582141f3292240

npm uninstall -g create-react-app
npx create-react-app ./ --typescript

コレもダメ（uninstallされてない） 完全に消そうとしてみる

which create-react-app
// 出てきたやつをremove
rm -rf /hoghoge/create-react-app
npx create-react-app ./ --typescript

いけてそう。 npm run startで動作確認、、、OK。 一旦commit。

次、reduxなどのinstallへ。

npm install --save redux react-redux
npm install -D @types/react-redux
npm install --save typescript-fsa typescript-fsa-reducers

特に問題なし。commit

かかった時間

30分

デモ

引き続き以下 https://qiita.com/IzumiSy/items/b7d8a96eacd2cd8ad510

npm run start

怒られる。

Could not find a declaration file for module 'react'. '/path/to/node_modules/react/index.js' implicitly has an 'any' type.
  If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`  TS7016

VSCodeで右click→QuickFixから、reactの型ファイルをinstall。commit。 ※同じ理由でreact-domも追加

"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",

その後、コピペで動作はするも、Redux Devtoolsでtraceできない。 単純にmiddlewareに入れていないから。自分の経験不足が光る（忘れているだけ、、、と慰める）。 propsで受け取れてはいるので、まあ良いとする。 hooksなどの調整とともに一気にやってしまうことに。 コピペ状態で一旦commit

かかった時間

45分

hooks化、ducks化とか

seletorの集約、reducersおまとめファイルの作成

ディレクトリの調整とか。 あとtypescript-fsaについて何がそんなに便利なのか考える。 actions（オブジェクト）とactionCreator(actionsをreturnする関数)の型をいちいち書かなくていいって素敵。 https://qiita.com/m0a/items/703d64c74e43cb392a64 （そんな困ったことはないけど）信じ込めそう。 ducksで特に効果を発揮しそうだなーと思う。逆にducksでなかったら大変そうじゃない？と思う。 fsaがなければ、きっと長くなるので、re-ducksになりそうだな、くらいにしておく。

かかった時間

1時間

devtoolsいれる

https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm コレ。現時点でmiddleware入れてないので引数なしで実行すれば良い

かかった時間

15分

actions集約

https://github.com/qsat/next-spa-boilerplate/blob/master/src/redux/modules/registration.ts https://tech.playground.style/javascript/re-ducks/ この辺を見つつ集約。 役割に応じてファイルが減ると気持ちがいい。 一旦actionsの共通化はしないことにする。

かかった時間

20分

stateのtypeをcomponentから削除

componentから接続できるのはいつだってselector。 typeもそれに準ずる

かかった時間

5分

connect -> hooks

Containerからjsxを返すとこで構文エラー。。。 なんぞと思ったら、ファイル形式をjsxにせねばならぬのだった。 それとReactをimpotする。。。 また、ベースにしたコードではcontainerで設定したhandlerでstringを受けていた。 悩ましいところだが、eventを受けるように調整する。 なんとなく、、、valueのみを渡す定義をcontainerで定義すると、presentationalでstringを明示的に渡さなければならず、依存度が高くなる気がした。

また、コレも悩み中だが、propsをスプレッドから直指定に変更するか否か、、、 下記味が気持ちいい程度でスプレッドのママにした。 パフォーマンス差異は計測したい。

かかった時間

30分

Atomiic Design の適用

ディレクトリの移動自体はサクサク。VSCodeのimport調整が強力。 あとpropsのスプレッドは廃止した。文字数は増えるが行数は減るし変数宣言も無くなるので、関心が分散しないかな、と思ったため。

かかった時間

20分