Vue使いがReactに入門してみた感想

こんにちは!スギモトです!


普段はVue.jsしか使っていないのですが、ふとReactってどうなんだろう??と思い、業務の合間を見てReactに入門してみましたので、Vue使いから見たReactを紹介したいと思います。


ちなみに、Reactのチュートリアルをやってから、簡単なアプリを1つ作ったレベルでこの記事を書いています。(学習時間:8時間くらい)

TL;DR

  • 入門時のわかりやすさはVueの圧勝
  • コードの記述量も圧倒的にVueのほうが少ない
  • 日本語の情報量もややVueが勝ってる印象
  • 開発環境はReactのほうがすんなりできた

Vueユーザーから見たReactとの比較

 ReactVue
DebugVS CodeでOKVS CodeでOK
CLIcreate-react-appvue-cli
Routerreact-routervue-router
Storeredux / react-reduxVuex
Axios使える使える
TestJestJest
UI Component LibraryMaterial UI などVuetify など

開発環境については、VS Code以外考えられませんので特筆すべきことはありません。

あと、axiosは当然使えますし、テストもVueでJestを利用している場合はそのまま利用できますので差はないかと思います。

UIコンポーネントのライブラリについても、「Vuetify」相当の「Material UI」という本家っぽい名前のライブラリがありますのでまったく困りません。

使い方もほぼ一緒でした。


Reactのインストール

※npmが使える状態を想定して進めます。

アプリの雛形を自動で作る

npm init react-app my-app

redux + axios

npm i redux react-redux redux-logger redux-thunk redux-promise redux-promise-middleware axios

routerを追加

npm i react-router-dom connected-react-router

さらに、「material-ui」を追加

npm i @material-ui/core @material-ui/icons

アプリの立ち上げ

npm run start

サクッと立ち上がると思います

Reducerの理解に苦戦

Vueとの大きな違いはStoreの記述方法ではないでしょうか。

Vueの場合は、Vuexをimportすればストアに処理をゴリゴリ書いたり、stateを更新および参照したりできます。

しかし、ReactはStoreのstateを更新するだけでも中々の記述量があります。まだ、ほとんどわかってないだけかもしれませんが……。

VuexのActionのイメージを持ったまま、React/Reduxの世界に行くと中々混乱しました。聞き慣れない「Reducer」とかいう言葉も出てくるし。


APIはどこで呼べばいいのか困惑

調べたところ、Actionでやりましょうとのこと。

ただ、そのまま素直にコーディングしていくとasync / await がなぜかエラーに……。

なんで??とここで小一時間ハマりました。どうも、「redux-thunk」というミドルウェアが必要とか。

てっきりReducerに記述するものなのかと考えていたのですが、Reactは本当に最小構成になっていて必要なものはあとから追加していくスタイルなんですね。

理解していけば「シンプルでいい!!」となるのかもしれませんが、初学者にとってはハマりポイントが多いかもしれません。


まとめ

以前、VueはEasyでReactはSimpleと聞いたことがあるのですが、今回はじめてReactに入門したみたところ腑に落ちました。

どちらがいいとか悪いとかはまだ自分の技量では言えませんが、感覚的にはモダンなフロントエンド初心者にはVueを勧めたいです。

今回、かなり勉強になったのでもう少しReactで遊んでみようと思います。

そのうちAngularにも挑戦したいなぁ。