sena-v.com

sena-v.com
画像

画像

画像
scroll top

自分がReactを選ぶべきだと思うただ1つの理由

自分がReactを選ぶべきだと思うただ1つの理由

今後何を勉強するかを分析して、対応幅が広くなりそうなReactをやろうと思った。
Vueと同じくフレームワークだったりCliツールだったり色々あるので、
React内の各ツールとVueを比較しながらReactをやる方向に考えを持っていくために調べてみることにした。

React

2020 12 01 01 2020 12 01 02

Vueと比べてJavaScriptがメインの開発であるため、初学者が取り組む場合JS学習から始める必要がある。
(非同期、イベント駆動、基本的なESバージョン差の吸収ができないと厳しいかも)
学習コストが高い以外、特に弱点みたいなものはない印象。

デメリット記事から見ても、Reactの問題というよりは導入事例が少なかった事が大きいので、
現在知見は量がありNode.jsが書ける人は抵抗なく入れると思われる。

開発する場合CRA(create-react-app)によるプロジェクト生成・Next.js(フレームワーク)他
ボイラープレートを使用した環境構築をすることになるが、CRAだとクライアントサイドでのレンダリングが
基本になりSEOの面で弱いため、NextのSSR(Server Side Rendering)またはSSG(Static Site Genelator)で
SEOに強いサイトを作成することが一般的。

CRAは機能を後で導入したくなった場合カスタマイズが面倒だったり、実運用に必要な機能は要拡張なので、
手軽に・かつSEOを気にしない機能を作る場合以外のプロジェクトであまりおすすめできない印象がある。

  • 特に抵抗ないならNextを使っとこう
  • TypeScript学習をしておくと最新フロントエンド環境に追いつける

参考リンク
Next.jsの特徴と採用するメリットについて考えてみた
Next.js 4年目の知見:SSRはもう古い、VercelにAPIサーバを置くな:機能レベルの知識視点。
なぜNext.jsを採用するのか?:CRAとNext.jsの比較
CRA (Create React App), Next.JS, Gatsby【 どう使い分けるのか?】

Vue.js

2020 12 01 03 2020 12 01 04

Reactと比べて単一コンポーネントにhtml/css/JavaScriptが纏まっている。
そのため機能が分割されておりシンプルなコードにしやすく理解が楽になる。

またTypeScriptとの相性があまり良くない。
クリティカルに言及している記事はないっぽいけど、お悩み相談の記事に書いてある事に加えて
2019年版Vue.jsTipsから解釈すると、Vue.js自体JavaScriptが動的であることを生かしたFWであるため、
型が発生することで本来存在していない要対応の問題が出てきてしまう問題はあると思う。

使用するボイラープレートによっては上の限りではないけど、はじめからどっちでも良いのであれば
多種多様な機能を公式導入できるReact + TypeScriptにシフトするプロジェクトが多い気はする。

加えて、Tips記事へのリアクションでも多く見られる「Vuexを入れるならNuxt以外のFWを使うべき」という
部分と「大規模になるならVuexを入れたほうがいい」という考え方が競合するので、
個人勉強レベルで「入れてみたor入れなかった」で学習難度に差が出るのも気になった。

  • 初学者が集まるプロジェクトならVueの方が楽。2が主流だがVue-Cli3の発展に期待。
  • Vuexが曲者。導入する場合は上と異なり分かる人がいないときつくなりそうなイメージ

追記:Veuxについてはツイッターで流れてきたLINEのPotato4dさんのスライドが参考になりました。
   Vue3はより使われるようになると思うので、タイミングを見て検討するのがベターかも。

参考リンク

【Vue.js】vue-cliとNuxt.jsの比較まとめ:自動ルーティングの有無、状態管理の有無
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips
【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた
開発はVue.jsでしたいけど、TypeScriptを入れたい問題をどうするかフロントエンド開発のお悩み相談


採用事例系

Vueはフロントエンドエンジニアが多い企業(特にWebデザイナー・コーダー)で導入されることが多く、
動きが多くなったり連携モジュールが多くなりそうな場合はReactを採用している会社が多い印象を受けた。

DMM採用事例2018:基本Nuxt、Nextも使ってみているためどっちでもという感じではある
Yahoo採用事例2018:Nextが多い
Next採用事例まとめ:参考程度。大手でも結構使ってるよ、的な
ホットペッパービューティーコスメ:チャレンジ気味なAMP開発でVueなくReactを選んだ

結論

  • 小中規模のプロジェクトの場合ほぼ差は出ない。メンバーの習熟度を見て選択する。
  • React→大規模になると状態管理的に優勢。React Nativeを勉強すればスマホアプリも作れる。
  • Vue→学習コストが低いので小規模で収まることが確実なら工数少なくできる。Vuexが辛い。

大規模なプロジェクトの採用シェアが高く、小中規模の差が出にくいので遠回りしてもJavaScriptを学ぶ
→Reactを勉強する方向が一番メリットが大きそう。Node.jsに発展できればほぼなんでも作れるので、
案件に配属される予定があるのであればVue、個人開発or学習目線で実施するならReactが良いと思う。

学習レベルは上の通り、プロジェクトにおいてはVuexを使う場合工数かければできないことはないと思うので
React-TypeScriptの採用知見がとても多い事が一番のReact採用理由だと思う。

その他

あらためてReactとVueを比較してみる〔2020年最新版〕
React(Web)とReact Native(with expo)の同じところ違うところ

Author: sena-v       © 2021, Built with Gatsby