React ハンズオンラーニングを読んだので感想

感想

こちらの本を読みました。

結論としては結構いい本だと思いました。5点満点中4点くらい。

Reactの概要から始まり、JavaScriptの基本知識、Reactの仕組みの概要、具体的な使い方、 具体的なReactフックの使い方、フックによるステート管理、useMemo, useCallbackによるパフォーマンスの効率化、 REST APIとGraphQLでのリソース取得、リソース取得の効率化、エラーハンドリング、静的解析、テスト、おまけでルーティングやSSR 等々を具体的なアプリケーションを作りながら学ぶことが出来ます。

Reactについては公式チュートリアルが未だにクラスコンポーネントになっていたり、 色々と古い知識が点在していたりして、何が今のベストプラクティスなのか調べるのに骨が折れるのですが、この本では恐らく最新のベストプラクティスに準拠した形で知識が纏められており、わざわざ古い知識をフィルタリングする必要性が無いです。 ここまで丁寧に必要な部分だけを抽出して纏められている本は他に無いのではないでしょうか。 薄い本なので深く学ぶことは出来ないでしょうが、この本で得た知識を元に詳細な部分を調査するのは難しくないでしょう。

注意点としてはサンプルアプリケーションの設計がメチャクチャで、コンポーネントの名前付けも超適当。どこに何が書いてあるのか理解しづらい気がしました。 この本の構成として、最初にアンチパターンや古い方法を見せて苦しみを与えて、それを楽に解決してくれる新しい方法を提示してくれるので、このサンプルアプリケーションにおいても もしかしたらわざと酷い設計にして後でリファクタリング過程を見せるつもりなのかと途中で思いましたが、どういう訳かリファクタリングの過程が省かれており、読者が自分で行う必要があります。

あと、サンプルアプリケーションをそのまま実装してもeslintのエラーがたくさん出てきます。 そのまま実装しても動かない部分もあり、信じがたいことに筆者の作成したサンプルページを見に行っても正しく動いていません。

私はあまり詳しい人間ではないのですが、本書のサンプルアプリケーションのコードは良くない設計と実装として批判的に見たほうが良い気がします。 Reactのプロからの正しい評価をお待ちしてます。
oreilly-japan/learning-react-2e-ja 本書のコード

1章 Reactの世界へようこそ

簡単にReactの概要と環境構築を教えてくれます。ここで先に付録も見たほうが良いです。create react appで本書の実装を進めるのがおすすめです。

2章 Reactに必要なJavaScriptの知識

Reactを学ぶための最低限必要なJavaScriptの知識を教えてくれます。当然ですが詳しくはないのでわからない部分はjsprimerなどを参照したほうが良いです。

3章 JavaScriptにおける関数型プログラミング

map, filter, reducerなどの関数の使い方と、関数を合成してロジックを組み立てる考え方を教えてくれます。 この章の最後では小さい関数をいくつも合成して簡単な時計アプリケーションとして動く、関数型JavaScriptソースコードを見せられます。ここで、私は「え…こんなの無理…。書けない…。」と思ってしまったのですが、別に書けるようになる必要は無いと思います。関数型JavaScriptが書けなくても小さい関数を合成してロジックを組み立てる考え方さえ理解できればReactは使えるようになります。

4章 Reactの基本

Reactの仕組みについて簡単に紹介してくれます。ここは、読み飛ばしていい気がしました。

5章 ReactとJSX

このあたりからReactの具体的な使い方を教えてくれます。

6章ステート管理

useState, useContextを使ったステート管理を教えてくれます。reduxは出てきません

7章フック

useEffectやカスタムフックの実装方法、useMemo, useCallbackなど、レンダリング時のパフォーマンス最適化について教えてくれます。

8章データ

REST APIやGraphQLでのリソース取得について教えてくれます。仮想リストやデータ取得時のパフォーマンス最適化なども教えてくれます。 ここらへんで手を動かして実装を始めたのですが、サンプルコードが良くないです。サンプルレポジトリからそのままコピペしても動かなかったりします。 具体的に言うと、ページ199のRepositoryReadme.jsの実装について、react-markdownのv6以降では、sourceが廃止されており、childrenというpropsにmarkdownを渡す必要があるので、そのままでは動かず、注意が必要です。 他にもいくつか問題点があるように思えます。

10章サスペンス

この章ではReactに現在実験的に存在している幾つかの機能について紹介してくれます。 ここまで読んでいるうちにクライアント側の例外処理やエラー監視をどうやってやるのか気になりましたが、エラーバウンダリという機能でサポートしているようです。 サスペンスはpending状態のpromiseをキャッチして保留用の処理を行うことが出来ます。 サスペンスとエラーバウンダリを使用することで、非同期処理の成功、失敗、保留に応じた処理を行う事ができます。 fiberについてはReactの内部機構変更の話なのでとりあえず知っておくというだけで良いと思いました。

11章 テスト

jestを使った振る舞いとレンダリングのテストを教えてくれます。

12章 ルーティング

react routerを使ったルーティングを教えてくれます。react routerは面倒くさそうですけど、next.jsならルーティングが楽みたいですね。

13章 SSR

サーバーサイドレンダリングについて教えてくれます。

終わりに

全体としては非常によくまとまっていて、この本を読めばReactにとてもスムーズに入門できると思いました。 誰かからReactの勉強を始めたいと言われたら間違いなくこの本をオススメすると思います。