【プログラミング】VueをつかったあとReactを勉強した際のメモ

最近、Reactを使用するプロジェクトに携わることがあり、少々勉強する必要があったので、 その内容をメモしていこうと思います。
普段はVueを使用することが多く、ちょっとした違和感だったり、なぜこんな記述になっているのか個人的につまずいたところをピックアップしたいと思います。
よくあるReact vs Vue の対立を論じる記事では無いのでご注意を。
（どちらも使えるようになればええんやというのが個人的な感想。）

Vueのthis 地獄から解放された

これは人とかプロジェクトとかによるのかもしれないけど、 thisを書く機会が減りました。
Vuexとかを使うとよく書くことになる下記のようなやつですね。

this.$store.hogehoge.commit

thisを使いまくっていると、thisが何を指していたっけ？と書いているうちに分からなくなったり、 とりあえず動かしてみてデバッガで確認するみたいなことがよくあるんですよね。
こうしたある種不毛なコーディングが減っただけでも個人的には快適に過ごせています。

どうやらクラスコンポーネントというものがあるらしい

自分が勉強したReactにおいては、関数コンポーネントでの記述が主流なのですが、どうやらむかしはクラスコンポーネントというものがあったそうな。
このクラスコンポーネントの場合は、同じくthis地獄に悩んでいたそうな。

Reactの予約変数地獄が待っていた

Reactを使っていて、一番大変なのが予約変数が多かったことですね。
React自体というより、React系統全般が予約語を多様しているように思います。
代表格がpropsで、変数名をそのままpropsとするのも個人的には違和感だったり。
どのコンポーネントのpropsなのかコミュニケーションが取りづらくて苦労しました。
他にも独自のフックの関数名はuseから始めましょうといった、とにかく覚えることが多いイメージです。
vueは割りとネットの例を見ながら書けたんだけど、reactはプロジェクトによって書き方が違ったりすることが多いので、 導入障壁が高い気がする。

styleの管理がしづらい

reactのスタイルの当て方が独特で結構困りました。
まず、classはclassNameと書くことが推奨されているし、 classの内容はオブジェクトで定義するのが基本形でさらに、 cssのプロパティと区別するために大文字にしなくちゃいけないという独自仕様。
正直使いづらいのでscssを外部に設けています。
ただ、これで完璧なのかというとそういうわけでもなく、 scssの支配範囲がコンポーネントで限定されていないのが個人的には 使いづらかったかな。
vueはコンポーネント単位で、cssの適用範囲をコンポーネント単独かアプリ全体かを選択できたので、 そのクセが抜けきれないままで苦労してます。
もしかしたら、scssの範囲をコントロールする方法があるのかな～？

ネットの参考情報が多い

コーディングしてて困っても検索で引っかかることが多いです。
日本語検索では出なくても、英語で検索すると大抵出てきます。
vueはたまに中国語をgoogle翻訳させるときがあったので、このあたりは非常に助かるなぁと。

returnでhtmlを書く

これは、単なるメモですね。
DOM要素をredurnで返すというもので、一見するとDOM要素を生成しないものはどうすればいいの？となりますが、そもそもDOM要素を生成しないものはReactを使用しなくても良いわけですね。
普通のjavascriptファイルと拡張子レベルで強制的に分けることになるのはいい気がする。

フラグメントって要るの？

コンポーネントを使用する際に登場するのがフラグメント。
複数の要素を返す必要が有る場合に必要になる。
必要なのは、分かるとして<>っていきなり出てきたときは、何コレ？という状態。
そもそも複数の要素があるかどうかなんて、機械的に分かるんだから人がわざわざ宣言しなくてもというのが本音。

<>
// 複数のDOM要素
</>

調べてみると、上位の要素が並列に存在しているときに出るようですね。
この記号も、React.Fragmentの略記法とのこと。

Reduxを後から導入しづらい

グローバル変数を管理するライブラリとしてReduxがあるんですけど、こちらもしきたりじみた使い方のルールが多いです。
まず、グローバル領域を作成する関数を使うのが推奨されていない。
そうではなく、reduxツールキットを利用するのが良いとのこと。
こんなん初見殺しやろ。

npx create-react-app my-app --template redux

ちなみに、これを知らずにcreateStore関数を呼ぶと注意文が出てきます。

redux-toolkit.js.org

strictモードかつデバッグモードだと2回実行される

Reactv18の特殊事情らしいんですが、strictモードかつデバッグバージョンだと、各コンポーネントが2回実行されます。
初めてデバッガを動かしたときはびっくりしました。
これによって、変数が意図通り更新されなかったりすることもあったので正直不便。

Reactの方が対応しているOSSが多くて嬉しい

Reactを使ってて思うことが、React向けで動作するOSSが多いことですね。
しかも、活発に更新されていることが多い。
完全なる主観ですが、OSSの開発となると欧米の方が活発なので、仕方ないのかもしれませんね。
vueの場合だと、対応しているOSSがあったとしても更新が止まっていて使えないという目によく会いました。
あと、最終更新が5年前のものとかを意図的に組み込むのは怖い。

無限ループをReactの方が埋め込みやすい設計と思う

自分の書き方がだめなだけなのかもしれませんが、無限ループに悩まされることが多いです。
コンポーネントの分割の仕方が適切でないと結構困る気がする。
しっかりと、Reactの再描画の条件を理解しておかないと起こる可能性にも気づかなければ、起きたとしても原因を特定できないので困ります。
Vueだとそんなに意識したことがなかったんですけどね。
もしかしたら、Vueを使っていたプロジェクトはコンポーネントの分割が大きめで見えやすかったのかもしれませんが、あとはVueだとコンポーネントのライフサイクルにおいて初期化する処理をわざわざ書く必要があったので、気をつけるべき変数が予めわかっていたからかもしれません。