『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読んでいる。
私がフロントエンド開発に注力していたのは2016年 ~ 2018年3月頃。当時はReact Nativeを使ったアプリ開発や、jQueryベースで作られたサービスを部分的にVue.jsで置き換えるような仕事をしていた。 当時からTypescript / Reactは存在していたものの、JS型付けの選択肢としてはFlowが有力な選択肢として残っていたし、ビルドツールもWebpackが優勢だったもののBrowserifyを採用しているプロダクトも多かった。SPAのフレームワークもReact, Vue.jsに加えて、Angular2, Riot.js, HyperApp(builderscon 2017 での発表が印象的だった) など大小様々な選択肢があった時代だった。
当時書いたフロントエンドのコードはほぼ残っていないのだけど、FluxアーキテクチャをRuby実装した形跡が残っていた。
GitHub - kuranari/flux-ruby: 【学習用】FluxアーキテクチャのRuby実装
その後の転職を機にフロントエンド開発からは遠ざかっていた。 その間に Hooks や Context など新しいAPIが出ていたり、エコシステムもややデファクトが決まりつつある状態になってきて、周回遅れ感が否めないので今年の夏休みを使ってキャッチアップしている。
今日は1章から3.5章までを軽く手を動かしながら読んだ。明日は「4章: コンポーネント開発」から読み始め、3.6 Next.js入門に戻り、5章以降のアプリケーション開発に入っていこうと思う。 直近で必要になるのはSPAのReactの知識だけなのでNext.jsは必須ではないのだけれど、パラパラめくった感じそこまで無駄になる知識もなさそうなので、一通り読んでみることにする。
以下、読んでみた感想。
1章: Next.jsとTypeScriptによるモダン開発
4 ~ 5年フロントエンド開発から離れていた身としては、ここ数年の技術の変遷を総括してもらえるこの章はありがたいとともに懐かしさを感じた。 冒頭に書いたような技術選定の話もだし、懐かし話として楽しく読めた。
2章: TypeScriptの基礎
Typescript は軽く触ったことがあったので、軽く気になるところを動かす程度で。
3章: React/Next.jsの基礎
ゆるふわな理解だった Hooks の学習。useReducer は今回初めて使った。
useEffect の節では React v18 の <React.StrictMode> と useEffect の組み合わせの影響か、サンプルコードそのままだとLocalStorageに値を保存してもリロードのたびにLocaleが en-US になってしまう挙動に悩まされた。
いろいろ試してみたのだけど
- localstorageへの保存は useEffect ではなく select 要素の onChange のイベントハンドラーで行う
Clockコンポーネントを<React.StrictMode>の外でレンダリングする
で解決できることがわかった。
React18におけるuseEffectの挙動の変化もコラムの情報から当たりがつけられた。出版日が2022/08/06なのに、React v18の情報を含んでいるのがすごい。
というわけで、今日は Typescript と React の API についてざっと調査ができたので、明日以降はコンポーネントカタログや実際のアプリケーション開発について読んでいこうと思う。
