去年に続き、2回目のアドカレ参加です！

自己紹介

私はこれまで React + MUI という技術スタックで開発を行ってきました。
React を使い始めたのは、知り合いの勧めがきっかけです。
MUI は、UI を考えるのが苦手な私が、簡単に良い感じに UI を作れるという素晴らしさに惹かれて使い始めました。

🎉そんな私が最近、Nuxt + Vue3 をばりばり使うことになりました！🎉

AWS や Azure といったクラウドサービスも、似たような技術を知っていれば差分学習でスムーズに学習できることが多いですが、React と Vue も同様だと感じました。

そんな「差分学習」を経て、思ったことをポエムります。

ポエム

必死に止めてた再レンダリングからの解放

Vue の公式ドキュメントもおっしゃる通り、Reactってレンダリングがとっっっても曲者だと思います。
予期せぬタイミングで再レンダリングが発生し、いつもそれを止めるためにフックを大量に書いていた記憶があります。
ですが、Vue だとほとんど意識せずに、うまくレンダリングしてくれるんです。

必要な部分だけ、自分で制御を実装すればいい

天才ですね！

🎉レンダリング地獄から解放されました🎉

子から親にイベントを渡すのがちょいややこしい

vue には emit という概念があり、普段（個人的に）意識している親 → 子の関係だけではなく、親 ↔︎ 子が可能になります。この時点で頭がこんがらがってきました。。。

しかも！です

emit の公式ドキュメントからコードを拝借して。。。
MyComponent というコンポーネントの some-event にcallback を渡します。

 <MyComponent @some-event="callback" />

MyComponent というコンポーネントではsomeEvent という名前でそれを扱います。

 <!-- MyComponent -->
 <button @click="$emit('someEvent')">Click Me</button>

えっっっ (´-ω-｀)
子コンポーネントではキャメルケース、親コンポーネントではケバブケースに変わるんです。

これにはかなり苦戦しました (°ㅂ°҂)

Vue のいいなって思うところ（感想）

Vue は HTML に似た構文で、CSS も直感的に書けるので、とても書きやすいと感じました。
React を初めて勉強した時、再レンダリングの仕様や JSX に苦しんだことを思い出します。
HTML と、微妙に違うので、悩みながらコードを書いていると無限レンダリングに入りエラーが出てたり。。。
Vue の方が、学習曲線が緩やかで、初心者にも扱いやすい印象です。

React のいいなって思うところ（感想）

React は好きなように作ってね！というスタンスなイメージです。
俺が考えた最強の。。。みたいなことをよく見聞きしてました。
最初の方は選択肢が広く悩むことも多かったですが柔軟性があるのは良いことだと思います。
Vue はある程度推奨される方法があるため、外部ライブラリなどを取り入れることが少ない印象です。

最後に

React も Vue3 も流行り話題の技術でどちらも良し悪しがあります。
ここに書いていないこともたくさん感じて色々な知見を得ることができました。
今回は少しふわっとした内容になってしまいましたが、いつかもっと詳しくなった時にまた記事を書こうと思います！

多分こういうフレームワーク初めてだわって人は vue から入るのが学びやすいのではと思います
ただ、 React も良いところがたくさんあるので推しておきます！

みなさんクリスマスプレゼントはサンタさんにお願いしていますか？
忘年会のための胃袋と肝臓は用意できていますか？
おせちやお雑煮を食べすぎない心構えは大丈夫ですか？

良いお年をお過ごしください！