今日のタブ記事

React のコードを Hooks にリファクタリングしていく話

普段 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 っていいなあと思いました。