https://blog.uhy.ooo/entry/2022-08-11/typescript-react-nextjs/

blog-logo-256.png

皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。

おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。

筆者はフロントエンドエンジニアで、TypeScriptとReactを専門としています。今回の本はTypeScript, React, Next.jsというスタックで、ちょうど筆者の専門領域を扱うものとなっています。そのため、筆者がこの本から新しい知識を得ようというよりは、人に紹介するときにどうかという観点から読みました。

残念ながら、この本を書いたのはフロントエンドの専門家ではないと判断せざるを得ません。内容からは、どちらかというとサーバーサイド寄りのフルスタックエンジニアという印象を受けます。記述のクオリティが高いところと低いところに差があり、Reactそのものに関してやフロントエンドのビルドの仕組みなどについては間違いが散見されます。また、マークアップやコンポーネント設計についても、良いアプリケーションを作るために必要なメッセージがあまり読み取れません。一方で、CSR, SSR, SSG, ISRの使い分けなどのトピックやNext.jsのアーキテクチャ図などは比較的しっかりしているように見え、サーバーサイドも絡んだこのような領域が得意なのだと思われます。

本の内容としては、タイトルにあるようにTypeScript, React, Next.jsというトピックについて学習し、本の後半（6章）では実際にNext.jsを使ってアプリケーションを作ってみるという構成になっています。後半の内容は、実務の現場でも使われているさまざまなライブラリを取り入れて使用する実践的なものとなっています。

TypeScriptの説明が一定の知識を前提としており「超速習TypeScript」の様相となっているので、プログラミング未経験の方が読むのは難しいでしょう。サーバーサイドなど、他の分野でプログラミングの経験がある人がフロントエンドにコンバートする（あるいはフロントエンドもやる）場合に適しています。TypeScriptやReactの機能の説明においては、基礎的な部分はともかく、実務でReactのコードをいじるのに必要な知識は一通り揃うようになっています。

そのため、御託はいいからとにかく早くフロントエンドの現場に入れるようにしてくれ！ という人が読むのがよいと思います。

この本を読むととりあえずReactのコードをいじれるようになると思われますが、基礎的な部分やコンポーネント設計の何たるかなどはあまり取り扱われていません。そのため、基礎からじっくり身に付けたいという人には向かないと思われます。本書で到達できるのは「とりあえず動く」というレベルであり、それを超えるような高いクオリティ（設計のよさ・Reactらしさ等）を出せるようにするためにはさらなる研鑽や別の本が必要です。

とくに、基礎的部分の取り扱いが薄く記述の質も良くないことから、この本だけ読んでフロントエンドをリードしたり、他のメンバーに教えたりする立場になるのは難しいでしょう。この本を取っ掛かりにしてさらに勉強するか、あるいはメンバーとして入り、他のより詳しい人から教えてもらいながら成長して一人前になるというのが堅実なプランです。

各章の概要、感想、良い点・悪い点を紹介します。

Next.jsやTypeScriptを用いるモダンなフロントエンド開発の概要を知るとともに、そこに至るまでの歴史（JavaScriptの開発、Google Map、SPAという概念の普及、単方向データフローの普及など）を概観する内容です。歴史の説明は要点を踏まえてまとまっており参考になります。

また、Next.jsの機能に絡めてSSRやSSGの紹介やその必要性に関する説明もあります。

一方で、筆者がここで気になったのは、ReactとNext.jsの機能境界に誤解があることです。この本ではSSRは（Reactではなく）Next.jsの機能としていますが（p2, p20など）、実際にはSSR用の関数はReact本体が持っているものであり、Next.jsはそれをラップしているという関係にあります。

これは一見すると些細な間違いに見えますが、著者らの理解度を推し量る上で重要です。というのも、この本ではReact 18が取り扱われていますが1、React 18の新機能の一つとしてStreaming SSRがあることから、Reactの情報をちゃんと追っていればSSRがReactの機能であることは必然的に理解していたはずです。

他にも、webpackの機能として「利用している依存モジュールのバージョン管理」（p18）が紹介されている点など不正確な記述があります。

説明を簡単にするために簡略化した可能性もありますが、このような基本的な部分を雑に済ませるのは筆者としては感心しません。本の信頼性を下げるし、間違いがあると本を読んだ人が活躍できる幅を狭めるからです。このような間違いを鵜呑みにしてしまった人が他の人を教育する立場になると、不幸なことになります。

章名が示す通り、この章はTypeScriptがどのような言語か、そしてTypeScriptの基本的な使い方を説明する章です。総評にも書いた通りTypeScriptの言語機能の説明はかなり簡潔で、ある程度の事前知識と、足りないところは自分で調べて補う力が要求されます。配列の説明は0.5ページで、オブジェクトは1ページといった具合です。型アサーション（as）の説明も序盤にありますが、危険な機能である（ランタイムエラーを引き起こす可能性がある）と一言添えられているのが好印象です。