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

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

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

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

1 TL;DR
2 Vueユーザーから見たReactとの比較
3 Reactのインストール
4 Reducerの理解に苦戦
5 APIはどこで呼べばいいのか困惑
6 まとめ

TL;DR

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

リンク

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

	React	Vue
Debug	VS CodeでOK	VS CodeでOK
CLI	create-react-app	vue-cli
Router	react-router	vue-router
Store	redux / react-redux	Vuex
Axios	使える	使える
Test	Jest	Jest
UI Component Library	Material 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にも挑戦したいなぁ。

リンク