🤔

Reactゴリゴリ書いてきたエンジニアがVue学び始めた所感

2020/12/10に公開

JavaScript

フリーランスエンジニアのmasayaです。この記事はiCARE Advent Calendar 2020の10日目のエントリとして書かれています。

先月よりiCAREでお手伝いさせていただくことになりまして、初めてVue.jsに触れました。
Reactをゴリゴリ書いてきたエンジニアからみて、Vueを学び始めて感じたことをまとめてみようと思います。

はじめに

一応Reactをどれくらい書いてきたかというと

React/Reduxでモノオク立ち上げ
React/Redux/Next.js/TypeScriptで新規ECサービス立ち上げ

この2つはコンポーネント設計や全体の状態管理の設計など、大きく関わりました。
その他にも大炎上案件のリファクタリングに携わったりと、ここ3年くらいで1番書いてきた&個人的にも好きなライブラリです。特にHooksの便利さに気づいてから余計書くの楽しくなりましたね。

そんなわけでReactを始めた頃からVueの存在は知っていたんですが、ちょっと食わず嫌いしてたこともありなかなか触れるタイミングもなく気づけば2020年末。。。

ようやく学び始めていくつか気づきがあったので以下所感です。

所感

根本的なところは似てる

Vueのドキュメント等読む前に先にコードを読んだんですが、大体何やってるかはわかるって感じでした。

書き方の違いはあれど、コンポーネントがstate(状態)を持っていて、それらを操作するライフサイクルイベントや関数が存在してるってのは根本的に一緒なのでわかりやすかったですね。
細かいお作法は公式ドキュメントが充実しているのでそれ読めば一発って感じでした。

特に最近リリースされたVue3のComposition APIを用いることでコンポーネントからビジネスロジックを分離させることが容易になったので、Vue3が普及していくとReact経験者はより取っつきやすくなりそうな気がします。

学習コストはReact>Vue

学習コストはVueの方が低いのかなという印象です。

最近駆け出しエンジニアがVue始めました的な記事よく見るなあと思ってましたが納得ですね。HTML&CSSとJavaScriptの基礎的なこと覚えて、動的なページ作ってみたいって場合はReactより断然ハードル低いと思いました。個人的には昔jQuery覚えたときの感覚に近いですね。

ReactはJSXに慣れてしまえばめちゃ書きやすいんですが、既存のHTMLの拡張のような形で書けるVueの方が軍配があがるかなという気がします。ちょっとコード書けるデザイナーとかに修正してもらいたい場合とかVueの方が有利かもですね。

ただあくまでもVueは初期の学習コストが低いってだけで、0→1でがっつりプロダクト作るぞって場合はあまり変わらなさそうな気もします。

それぞれの向き・不向き

Vueはとにかく薄く導入できるのがいいですね。既にWebサービスを運用していて、リニューアルは重すぎるので徐々にSPA化したいってときはまさにVueがベストだと思います。
また、上述の通り学習コストが低いので、React/Vue経験者いない中で数ページ程度の小規模なSPA作りたいって場合もVueの方が向いているのではないでしょうか。

ただVue3でコンポーネントからロジックが分離しやすくなったとはいえ、まだ再利用性を踏まえた設計のしやすさではReactに一日の長があると思います。なので中〜大規模な、スケーラブルなサービスを立ち上げるならReactの方が作りやすいイメージです(ちょっと経験バイアスかかってると思いますが)。

おわりに

今回Vueに触れたことでライブラリ・フレームワークは本当に適材適所だなと改めて感じました。
今までは自分の中でSPAやるならReact！って感じでしたがVueも選択肢として十分ありですね。

Vueは学び始めたばかりでコードも全然書けていないので、まだまだ気づけていない魅力がたくさんありそうな気がしています。これからどんどん学びを深めていき、iCAREに貢献できたら良いなと思っています。

iCAREではちょうど15億円の資金調達を終え、Vueゴリゴリ書きたいフロントエンドエンジニアやチームを引っ張っていくテックリードも積極採用中なので興味ある方は是非ご応募を🙏