TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発[3.6 ~ 7章]

昨日の続き。 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発[1 ~ 3.5章] - Kuranari::Log

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

作者:手島拓也,吉田健人,高林佳稀
技術評論社

3章

3.6章のNext.js入門は飛ばして4章から読もうと思ったけれど、4章は3.6章のプロジェクトがあることが前提だったため、Next.jsの準備として3章に戻る。以前 Next.js のチュートリアルをやった際にSSR/SSG/CSRは試したことがあったのだけど、ISRは初めてだった。ユーザー投稿型サービスかつ高速なレンダリングが求められるようなサービスだとISRも便利なのかもしれない。知識として頭の片隅に残しておく。

4章

今日の学習ポイント。styled-component や Storybookへのコンポーネント登録はあまり経験がなかった部分だったので重点的にキャッチアップ。一方で jest や React Testing Library は多少馴染みがあったのでサラッと流す。

ここまで手を動かしながら読み進めておかげで、Hooksも手に馴染んできた。

5 ~ 7章

5章は写経しながら進めていたもののESLint関係のライブラリを npm install で列挙するあたりで挫折。サンプルリポジトリの package.json をコピペして進めようかとも思ったが、その後の記述量もかなり多そうだったので、リポジトリをcloseしてアプリケーション挙動やサンプルコードを眺める方針とした。

読み進める中で json-server や SWR のような便利そうなライブラリを知れたのはよかった。

6章はStorybook を起動してコンポーネントを眺めた程度で終了。実際にコンポーネント作成する時に戻ってくる。 MUIやReactstrapのようなUIライブラリを使わずに独自のデザインシステムを構築する場合は、結構気合入れて取り組まないと大変そうだなという感想。

7章も軽く読んで、実運用する段になったら再読することにした。個人開発ならVercelを使うこともあるかもしれないけれど、業務だと別のインフラ環境にデプロイすることになりそう。

感想

5~7章のアプリケーション開発の

現時点での最新版のReact/Next.jsを使って
現場で発生する要件をカバー（認証あり、複数のエンドポイント利用(POST含む)、ファイルアップロード、etc...）した中規模なアプリケーションを
自作のデザインシステムで実装している

という組み合わせが、この本のよさを際立てていると感じた。

このバランスを取るために著者の方は構成に苦労しただろうなと思った。 (シンプルにするならGETだけのアプリケーションを取り上げるのだろうけど、それだと認証もFormバリデーションも不要になってしまうし、MUIなどのライブラリを使ったら見通しは良くなるけれど見栄えはサンプルアプリケーションの域を出ないし、、、)

サーバーサイドの複雑さは json-server などで隠蔽しつつ、フロントエンドのロジック・UIに注力した構成は、何かの折で参考にさせてもらいたい。

6章を丸々使ってUIコンポーネントの解説をしているなど、アプリケーションロジックに加えてUIコンポーネントの開発・管理手法に比重を置いているのが印象的だった。逆に、APIクライアントのような説明は必要最小限に留められていて、飛ばし読みをすると実アプリケーションへの組み込みの全体像が掴みづらいかも知れない。 5章でSWRの紹介があり、6章で fetcher 関数やAPIクライアントを作るのだけれど、それを使うのは Atom / Molecules のコンポーネントを作った後になっていためだ。

個人的にクライアントアプリケーションの学習をする際には、APIクライアントの設計が特に気になることもあり、APIクライアントを作った直後に SWR や Context とのつなぎ込みについて補足を入れてもらえると嬉しかったなと思った。(とはいえ、リポジトリのコードを追ったら短時間で理解できたので大きな問題ではない)

Typescript, Hooks, テストのようなアプリケーションロジックによった部分は読み飛ばしつつ、Storybook / Atomic Design に時間をかけて理解を深められたのが、今の自分に足りていない知識を補うためにちょうどよく、「アプリケーションロジックの実装はできるけれど、UIコンポーネントやデザイン実装は苦手」という人にもおすすめできる。