Reactハンズオンラーニング第2版

ひさしぶりに学習した。
Reactは2015年くらいには、趣味でVRハウスを作ったり、QRコードを読めるページを作ったり、仕事でも使ったり、React鳥貴族っていう名前のただの飲み会に行ったりと、しばらくは触っていたのだけど、チームの異動があって、最近は主にjsx-domという、JSXを書いてBabelを通すとcreateElementに変換してくれる、という独特の世界観のJSXを書いたりしていた。
jsx-domは、Styled Componentsを使えたり、useRefを使えたりと、ちょっとReactのエッセンスは吸われているものの、単にcreateElementしてくれるだけで、差分レンダリングとかは当然できない、という、シンタックスシュガーとしてJSXを使える、というもので、偶然発見して、React非導入アプリケーションにとっては便利じゃん、って使っていたけど、身の回りに使ってる人はいないと思う…。

jsx-domの話はさておきで、最近のReactの様子をキャッチアップするために、8月くらいに出たReactハンズオンラーニング第2版を読んだので、そのメモ。

JavaScriptの知識とか、周辺ツールの役割とか、一通り教えてもらえる本になっている
- 普段ちゃんと書いてないけどレビューで呼ばれる人とかの、キャッチアップにも良さそう
- webpackとBabelの違いは？とかがわかる
書き方の紹介がfunction componentになっていつつも、以前はこう書いていました、というコラムも載っているので、以前使ってたuseStateはどうなったの？とかがわかる

コラム目次
旧クラスコンポーネントにおけるステート管理
レガシーコードにおけるsetState
shouldComponentUpdateとPureComponent
O'Reilly Japan - Reactハンズオンラーニング第2版

6年ぶりに見ると、ステート管理まわりが一新されている。逆に考えると6年前とかは非同期なステート管理を誰がどこでやるということにReact本体としては無関心で、みな苦労して、どういうアーキテクチャにするか、ということを話し合っていたと思う
非同期リクエストを扱うときにも、処理の単位をuseStateを使って隠蔽しつつ、うまく書くことができる
- async/awaitを使ったいい感じのインターフェイス設計技、の上に、React世界観にうまくなじませるというフックを使った技がはさまるイメージを持った
GraphQLとあわせて使うときには、みたいな話も載っててありがたい、と思ったら、著者は初めてのGraphQLも書いた人だった
- お世話になりすぎている
- 初めてのGraphQL ―Webサービスを作って学ぶ新世代API
  - 作者:Eve Porcello,Alex Banks
  - オライリージャパン
  Amazon
Suspenseの章で、Promiseをthrowしたときは〜という話が載っていて、うまいこと考えるな、と思った
- 普通に暮らしていてPromiseをthrowする人はいなかったと思うので、既存のプログラミングパラダイムを壊さずに新しい状態を表現できていておもしろい
サーバーサイドで手でレンダリングする方法とか、Next.jsを使えばなぜかそういうことをしなくても動く様子とかが紹介されている

こういう本を読むと、まっさらなきれいな環境からReactの導入が始まるけど、プロジェクトがどんどん立ち上がっていくような環境でなければ、現実的には、構築して数年が経ったレガシーなReact非導入アプリケーションになんとかしてReactを導入していく、という流れのほうが多いと思う（個人的にはそういう経験しかない…）ので、そういう場合に役立つ情報とかも集めていきたい。