フロントエンド何もわからない（その５）〜 React Hooks + Redux + TypeScriptでいいんじゃね

去年から悩んで来ましたが、React (React Hooks + Redux) + TypeScript に落ち着きそうな気がしてきました。

前提

Webページの制作よりは、ヒューリスティックコンテストや数理最適化などのビジュアライザをさくっと作るのが主な目的です。

メインのフレームワーク

React (React Hooks + Redux) + TypeScript としました。

React Hooks + Reduxの使い方はこんな感じでシンプルです。

ReduxのReducerやActionを定義
Providerを定義し、Reduxのストアをコンテキストとして情報を伝える
useSelectorで状態を取得、useDispatchで状態を更新

セルの値をボタンやクリックで変更するだけの簡単なサンプルを作成しました。
https://threecourse.github.io/app-cells-react (Github Pages）
https://github.com/threecourse/app-cells-react (ソースコード）

以下、雑感です。

用いる方法によっては、メソッドや状態をコンポーネントの親子関係に沿って受け渡すバケツリレーが発生するが、このやり方ではその心配がない
関数コンポーネント + React Hooksで書く方がクラスコンポーネントで書くより良い様子
クラスの方が「ちゃんとしていて拡張性が高い」イメージがあったが、Reactはどうもそういう訳ではないらしい。　
TypeScriptは入れない選択肢もあるが、型が付くのはやはり強力
型をより精緻に書いたり、useMemoなどを使って高速化したり、非同期を上手く処理するのは今後の課題
初心者が作る場合Nuxt.js/Vue.jsで開発するほうが悩む場所が少ないかもしれない。ただ、コンポーネントの再利用性やTypeScriptとの親和性を考えると、Reactが優位に思えた

参考文献

TypeScriptは以下の本が良くまとまっています。Kindle Unlimited対象ですが普通に買っても良いと思いました。
速習 TypeScript 第2版速習シリーズ
https://www.amazon.co.jp/dp/B086JKVGPB

React/Reduxは公式ドキュメントが良さそう。
https://ja.reactjs.org/
https://ja.reactjs.org/docs/hooks-intro.html
https://redux.js.org/
https://react-redux.js.org/
https://react-redux.js.org/api/hooks

Linter設定

Linterおよびその他の環境構築は以下を参考にしました。
create-react-app Lint構築よくばりパック(ESLint + TypeScript + airbnb + Prettier + lint-staged & husky + VSCode拡張)
https://qiita.com/jonakp/items/7d9f47c613c16cbf95aa

create-react-app + TypeScript + eslint + prettier によって導入し、airbnb/huskyなどは入れませんでした。
なお、vscodeでなくWebStormを使っているので、WebStormの保存時に自動Prettierを適用する設定としました。