【書評】りあクト! TypeScriptで始めるつらくないReact開発 第3版
総評
とても良かった
他の人にも勧められる書籍です
技術メンターになる人が周りにいない場合*1や、他のメンターの意見も聞いてみたい人にお勧めです
出版時点(2020/9)の最新動向まで書かれているので、一昔前のスタンダードを追いかけるのではなく、過去の経緯を踏まえて 今 こういう流れになっているというバックボーンの理解も深まります
はじめに
私のバックボーンなど
私はJavaのサーバーサイドのプログラマとして*2、家業の学習ソフトのリプレイス(MSXからブラウザベースへ)を8年前くらいに一人でやったという経歴です。
jQuery(&jQueryMobile)を使って、オレオレアーキテクトを考えて ゴリゴリとオブジェクト指向*3で作り込みつつ それなりに動くものを作りました。
サーバーサイドの見直し*4を含めて考え直している中で、クライアントアプリも技術素振りも兼ねて見直そうと思い立ちます。
あと、JavaScriptについては Node.jsでちょっとしたアプリを作ったことはあるという感じです。
技術選定(ReactかVue.jsか)
JavaScriptの名前空間でグローバルに扱うプログラムも慣れれば そういうものとして悪くは無いですし、動的型付けな面白さも悪くはないと思っています。
が、いかんせん年々記憶力も落ちており Javaのような型があると やっぱりうれしいのでTypeScriptは導入してみたいというモチベーションがありました*5。
このあたりも見つつReactにしようと決定
完全に独断と偏見だけどReact vs Vue してみた - Qiita
書評(or 感想)
ようやく本題
JavaScriptの実装とTypeScriptの1冊目
jQueryを使いつつクラス志向の開発はしたことはあるので、ブラウザのちょっとした操作を実装したという経歴以上ではあると思いますが、独学ベースでツギハギでした。
内容としてはReactに直結はしなかったところが多かったかもしれませんが、私としては逆にラッキーでした。
あと他の本で「Create React Appを使わず、自分でwebpack 使っていきましょう(意訳)」とあったのですが、本書にて「webpack職人になれますか?(意訳)」とあり、「確かに 目的はアプリを作ることだから 本当に必要になるまではwebpackによる構築面はスルーしたほうが良いだろう」と踏みとどまれました*6。
Reactの基本を学ぶ2冊目
Reactによる実装の基本とJSXとは、ということが学べます。
JSXの好き嫌いは 分からなくは無いですが、結局 動的に形成したものを見て確認するのだから、テンプレート型(Vue.js)であれ 似たようなことだと割り切っているので、私としては そもそも気になりませんでした*7。
そもそもテンプレートをベースとした静的なページはJavaで実装して(している)、動的アプリ部分をJavaScriptで構築する(している)の前提ですし。
あと、具体的な開発に必要なツールを含めた開発環境構築に大きな割合を割いているのも、私にはよかったです。
Linterについては、過去の系譜といった ある種 豆知識的な技術選定の根拠を個人的には知りたいので*8、読み物として面白かったです。
Reactによる状態管理を学ぶ3冊目
よほど簡易なものでない限り、アプリケーションにおいて状態管理は必要です。
最新状況に至るまで、これまでのReactにおける状態管理の実装について丁寧に示されています。
読み手の状況(新規開発なのか、既存アプリのメンテナンスなのか)に応じて広く使える内容だと思います。
たとえば 現場によっては、Reduxを使ったり、Redux以前のやり方を使ったり、色々あると思います。
過去の系譜をなぞってコードベースで説明されているので、プロジェクトの実態に合っている部分が どこかしらにあると思います。個々の状況に応じて適用していけばいいでしょう。
私の場合は完全リプレイスを目指しているので 本書の示すオチをベースに、その他の要素を引き算して(遡って)、どこを落としどころを見極めれば良いという使い方ができます。
例えば著者の言うマイクロフロントなアプリを目的としていないし、現時点でテストツールが充実していそうな Redux&REST APIにしたほうが良いかな?という感じで適用範囲を考えられます。
読み方
正直なところ、はじめはコードも理解しつつ読むようにしていたのですが「おそらく この後で より良い変遷を示されるだろう」と思ってからは、コード部分については飛ばし気味で読みました。
上述もしましたが、それはその部分が無意味ということではなくて、個々の現場で それぞれのフェーズに遭遇した時に照らし合わせて読み込めば良いだろうという判断の下で そういう読み方に変えました。
その意味でも本書の守備範疇は広いように思います。
役に立つ
総じて、Reactを知る本ではなくて、Reactを使ってJavaScript(&TypeScript)によるアプリ開発をする本だったという印象です。
書籍のサンプルはGitHubでも公開されています。
書籍によっては、ツギハギな情報だけを示して、実際の全体像が分からないということもありますが、そういうこともありません。
実際に自分のローカルに落として動かしてみることができます*9
さいごに
一回読んだだけなので、まだまだ理解は浅いです。
また私は本を読むときには読むことに専念して手を動かすことを後回しにしています。
ですので再度読み返しをしつつ 手も動かそうと思います。
また、初見の感想を記録として残した上で、改めて本書の活用をしつつ 以下の書籍も購入してしたのでテスト周りのやり方もあわせて学ぼうかと思っています。
追記(2020/11/13)
「りあクト! TypeScriptで極める現場のReact開発」読了
おすすめは 6章「プロフェッショナル React の流儀」
開発プロセスへの言及がとても良かったです。
先の書籍を購入された方は、この書籍を「締め」に読むと良いと思います。
開発プロセスについては、個人的には スッとなじめました。
こちらのサンプルの基本構成をベースに開発すれば、個人開発でも ツギハギではない 一気通貫した思想の下で開発ができる手ごたえのようなものを感じました。
繰り返しになりますが、せっかく先の3冊を読んだのであれば この本も必ず読んでほしいと思える本です。
追々記
書籍のサンプルにあわせて、Sagaで状態遷移を考えていたけれど以下のコメントをいただきました。
第3版まえがきにも書いたように Saga は正直終わった技術なのでかなり非推奨です。どうしても Redux が使いたいのであれば止めはしませんが、MW を使うより Effect Hook を組み合わせたほうがいいです。もしくは私は未検証ですが redux-toolkit の createAsyncThunk とか。https://t.co/EHDS4Jb0h0
— 大岡由佳『りあクト! 第3.1版』BOOTHにて/紙本も販売中 (@oukayuka) 2020年11月13日
ということで サンプルを自分なりにアレンジして 理解を深めつつ あれこれやってみる余地もありそうです。
あれこれすることも含めて「技術素振り」の範疇だと思っていますし、この書籍があったお陰で「技術調査および自分にあっているスタイルの検討」の手探りの時間を 大幅にショートカットできたと思っています。
追々々記(2021/1/4)
「りあクト! TypeScriptで極める現場のReact開発」ではStorybookのバージョンが5系であるため追記時点の6系とは推奨される書き方やaddonが違います。
目的と役割については流用できますが、実装については独自に調べる必要があります。
*1:私は主にこれです
*2:厳密には現役SIer時代はPLでプログラマでもない。退職してからプログラミングした人。
*3:クラス志向な部品を作ったり、継承も使ったり云々
*4:Javaのバージョンアップとか TomcatからPayaraへの乗り換えとか
*5:そのためにオレオレアーキテクトで部品作ったりもしましたが、、まぁ当初の思惑は作っているときには それなりに覚えていますが、数カ月もたつと、、という良くある話
*6:悪い意味で、私は 本当にやりたいことがなかなか進められない性格なので、立ち止まれたことは多分 良いことだと思っています。この反省の下 Payaraを使おうと考え直したわけですし
*7:ふむふむ、こうやって画面構築するんですね、くらいの温度感
*8:気になるという言い方でも良いですが
*9:まだ動かしていないんですけどね(汗)