こんにちは!スギモトです!
普段はVue.jsしか使っていないのですが、ふとReactってどうなんだろう??と思い、業務の合間を見てReactに入門してみましたので、Vue使いから見たReactを紹介したいと思います。
ちなみに、Reactのチュートリアルをやってから、簡単なアプリを1つ作ったレベルでこの記事を書いています。(学習時間:8時間くらい)
目次
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にも挑戦したいなぁ。