見出し画像

【ReactとVue】共通点と相違点についてまとめてみた

DXサービス推進2の王(ワン)です。

本記事では、7月15日のLT大会で発表した内容「【ReactとVue】共通点と相違点について」を共有します。

① 本記事作成までの経緯

まず、私が本記事を作成するまでの経緯について説明します。

2018年~
フロントエンドの開発はまったく経験がない中、Vueの案件に参加しました。よくわからないことが多かったけれど、Vueのドキュメントを読みながら、なんとなく動かした感じでした。

2021年~
Vue3.0の案件に参加しました。composion-apiの概念はVue2と比べ、だいぶ異なってきましたが、基本の文法が変わらず、親しみが感じられるようになりました。

2022年~
Vueの渦から外の世界を見たく、Reactの学習を開始しました。70時間で基礎を習得しました。JavaScriptにより近いということがわかり、Vueのような便利さが少々なくなりましたが、Vueに比べ操作性がよいことも感じました。

フロントエンド開発に携わる予定の方にとって、両フレームワークを比較した本記事は、何らかの役立つのではないかと思います。

VueとReactをデータの面から比較してみます。

② VueとReact、データによる比較

Google Trend による比較(人気度がわかります)

上記の図から、日本においてほんの少しではありますが、Reactの方が人気であることがわかります。

③ VueとReactの共通点

  • Component
    両フレームワークとも、Componentを単位にして組み立てることによって、構造の最適化を実現できるように設計されています。

  • Virtual Domで差分レンダリング
    アルゴリズムが少々違うかもしれませんが、基本的な考え方は一緒です。まず、template(vue)/jsx(react)でバーチャルdomを生成し、真実domと比べ、差分を入れ替える設計となります。

  • SSR対応のフレームワークもある ⇒ nuxt(vue)/next(react)
    SSRとはServer Side Renderingの略です。nodejsなどのフロントエンドサーバーでHTMLのコードを生成し、ブラウザ側の負担を軽減したり、検索エンジン最適化にしたりする技法です。

  • Qiita/Zennなどのコミュニティが豊富
    基本的に、探せばほとんどの問題が解決できるような気がします。

④ VueとReactの相違点

  • 構成
    Vue:一般的なhtml(template)⇒script⇒cssの流れで比較的に理解しやすい。
    React:JavaScriptの中にjsxの文法が包括される。JavaScriptでjsxを操作し、ループしたり、条件分岐したりします。

  • 特徴
    Vue:v-modelの文法を使って、データだけ操作すれば、画面はそれに応じて反映されて利便性を感じます。
    React:最終的にsetStateで画面を更新します。更新までに細かい操作ができそうな感じです。

⑤ まとめ

VueとReactについてまとめたいと思います。

  • Vue
    - 初心者に優しい、比較的に学習コストが低め
    - 中小規模のアプリを素早く開発が可能
    - 案件に参加しやすい

  • React
    - JavaScriptに馴染みがない人なら学習が難しい
    - 大企業が使う傾向がありそう
    - 機能に応じて必要なライブラリを選ぶ必要がある
    - 細かくコントロールできる

最後までお読みいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか?