事情があって[^1]本格的にReactをやることになった。今まではVue2.xで開発していた。 慣れてしまう前に印象を書き残しておくことにする。
前提は↓の記事と同じ。
所感
「State自体がわからない」ところから始めるならVue（Options API）から始める方が圧倒的にわかりやすい。 逆に、保守や継続した開発を考えるとReact.jsの方がメンテナンスしやすい印象を受けた。
State自体がわからないとき
Vue2.xのときはState管理は基本的にdataを使う。これがとてもわかりやすかった。
右も左もわからない状態からだと「dataにコンポーネントのStateが保存される」と理解できる。デバッグツールでもdataをまず参照し、自分が調べたいState名を検索すれば良い。
デバッグツールで状態を変更できるため、dataが変わったときにどのような見た目になるのか調べやすい。また、State自体を更新したいときは対象のStateに変更後の値を代入するというのも分かりやすいなと感じた。
変数の値を更新するイメージでできる、という点がとっつきやすいなと感じるポイントなのかなと思う。
一方、React.jsはuseState()を使ってStateを管理する。Vueに慣れていたこともあり、理解するのにとても時間がかかった。
まず、Stateの初期値がどこで設定されるのかがわからなかった。useState("初期値")なのだが、初期値というと変数を宣言するときに=で代入するイメージが染み付いている。これが原因でわかりにくく感じるのかなと思う。
「Stateを宣言するためのuseState()関数を使う」と考え方を変えると「初期値はかっこの中に入れるよね」という気持ちになれるのかもしれない。
もう一つ理解が難しい点として、[index, setIndex]のようにStateを管理する変数とStateを変更する関数を設定する記述が挙げられる。
最初はこの配列が何用途なのかさっぱりわからず、"おまじない"的な感じに見えた。
indexでステートを管理する変数があるのに初期値の宣言はuseState()の中、というのも混乱する理由かなと思う。
そこにsetIndex()が来るのでもっと訳がわからなくなる。
React.jsでStateを更新するときは更新用の関数が必要、という点を理解しないとおまじない感が続いてしまう。
ボタンなどのクリックイベントだとおまじない感から抜け出せなかった。フォームの入力に応じてテキスト出力を変更する、のようにStateを頻繁に変更する例をやるとなんとなく勘所がつかめた気がする。
最初はChatGPT（GPT-4）に事例を出してもらい、写経した方がいいかもしれないなと思った。本などはコードが断片的になっており、useState系は結構理解するのが難しかった。
保守は継続的な開発を考えたとき
Vue.jsだとStateがどこで更新されているのか調査するのが難しい。これは代入すればStateが更新できる、という性質にあると思う。「どこでStateを使っているか」はコード検索で引き当てることができる。ただ、Stateにアクセスして表示を切り替えるような記述でも検索結果に出てくるため、コードリーディングの手間がかかる。
行数が少ないのであれば良いが、記述が長くなってくると苦しい印象がある。また、Stateの更新は自動で行われるため、算出プロパティ（computed）やメソッドと組み合わさると「いつ、どのような内容で更新されているのか」を把握するのは結構大変だった。
React.jsだと更新用の関数setXXXを直接探せば良いのため、考慮事項が減る。書いてから時間が経ったコンポーネントの挙動を確かめるときはこちらの方が調査量も少なく楽に感じた。
総括
VueはEasy、ReactはSimpleという表現を見かけるが、確かにその通りだったなと感じた。
ただ、Vue3.x系のComposition APIではReact.jsっぽくStateを管理するようになっている。
dataのとっつきやすさが良さなのかなと思っていたため、それならReact.jsを使った方が…と感じてしまった。Stateごとに宣言が必要かどうか、くらいしか違いがない印象を受けた。
