React を学び直す

最近は React と戯れる時間が増えた。

React 自体は、だいぶ昔から触っているし、プロダクトのコードも時々修正したり、修正を眺めたりしていたんだけど、あまりしっかりとコードを書く機会はしばらくなかった。

大きな差分としては、 Hooks だった。 Hooks が出た当初、どうしてこのコードが動くんだろうというのが第一印象で、その後なんとなく理解したもののなんか変なものを入れたなあという印象があった。 時間を経て、今回しっかり使ってみると、ああこれは手に馴染む仕組みだなと、感じた。

カスタムフックを使うと、コンポーネントから、状態管理や、副作用を伴うような非同期処理を引き剥がすことができる。このカスタムフックを使う感触がよくて、凝りすぎると見通しが悪くなるだろうが、なかなか書き味がよい。

また、このあたりは、 redux やその周辺ライブラリが一部担っていた気がするけど、Context API もできたいま、 redux を使う必要はあるのだろうか、と思ったりもする。

Portal ってやつも便利だった。Modal とか DOMツリーを外れるコンポーネントをさっと作れる。

ライブラリとしては、 styled-component / styled-system というのを少し覚えた。これは人によってちょっと好き嫌いはあるかもだけど、個人的には便利に思えた。

React / TypeScript / VS Code / ESLint / Prettier というスタックは、定番となったし、本当に生産性が高い。

一方で、 Hooks の概念をちゃんと理解する、TypeScript を自在に扱う、というのがより重要になってきていて、ちゃんとしたフロントエンドのコードを書く、依然として難しい時代だなと感じる。