今日のタブ記事
普段Reactを業務で使っていないのにReactの記事ばかり開いている……。
hooksは前職でも利用していたんだけど、使っていたhooksはせいぜいuseState, useEffectが大半という感じで、いかにも「hooksに入門したてです」といった感じの状態で知識が止まっているのでもっとhooksについて色々知りたいと思っている。
React公式がクラスコンポーネントから関数コンポーネントにシフトすることを推奨しているように、前職でも新しいコンポーネントを実装するときは必ず関数コンポーネントで実装していた。ただ、リファクタリングに関してはプロダクトの課題に対してモチベーションがそこまで高くなく、経験する前に退職してしまったので、こういう記事を読んで勉強していきたい。
この記事ではReactのv17以降削除されるライフサイクルメソッドの存在がリファクタリングのモチベーションに影響していると書いてあって、実際公式が非推奨にする機能やバージョンを利用することには躊躇いがあるし正しいと思う。
リファクタリングを実際にするとなると、stateに関してはuseStateにすればいいのだけど、ライフサイクルや副作用などの部分を正しくuseEffectに実装し直すのが難しそう、というイメージがある(イメージです)
クラスコンポーネントのライフサイクルとそれに対応するuseEffectの書き方をしっかり間違えないように書かないといけないイメージ。
たぶんuseEffectのこともっと詳しくなれば大丈夫だと思うけど……。
Memo化については自分は全然分かってなかったので、この記事でシンプルな例を取り上げてくれて参考になった。
自分より親のコンポーネントで起きるライフサイクルでの再描画などをMemo化することで防いでパフォーマンスを意識した開発ができるということ、らしい(あってるかな)
そしてこの使い方以外でのMemoの使いみちをちゃんと調べておこうと思いました。あとuseRefとかも全然分かってない。
あと「無理に書き直さない」は結構強く思うところで、当時の自分は全部関数コンポーネントに書き直したい！みたいな気持ちがあったけど、そうは言っても複雑なロジックが書いてあるコンポーネントはリファクタリングにかなりの労力を費やすし、そもそもテスト書いてあるかどうかみたいなところも重要なので、今思うと無謀だなあと思う。でもまあ書き直したい気持ちも分かる。
リファクタリングをする上でテストがないと怖くてできないなと思うようになってきたけど、テストまだ全然分かってないし今の仕事でもまだテストちゃんと書けたという機会がほぼないので、テストもちゃんと書いていきたい。
Node.jsの表の話し
Next.js で Node.js の API がいつ入ったのかわかる表を作る
Node.jsのAPIがどのバージョンから使えるのか分かる表を作った話で、自分がこういうの作りたいな〜と思うようなサイトだったので使わせてもらおう、と思った。
Node.jsは常に最新版にアップデートし続けられればいいんだけど現実問題まあそううまくいくこともないので、Node.jsのバージョンアップは大変な作業だと認識している。
その中でこういう表があるのは非常に便利なんじゃないだろうか。
公式ドキュメントがMarkdownで管理されているというのは結構意外だったけど、そういうもんなのかな？
そして「ビルド時にしかfetchしないので行儀がいい」これめっちゃ大事だしこれが簡単に実現できるNext.jsっていいなあと思いました。