概要
React(Next.js)しか使ったことのない私が今回初めてVueを触ったので、Vueの初心者目線で感じたことをReactと比較して書かせていただきます。
私のスキル感
- （1.5年）Markup(HTML,CSS,JavaScript)
- （1.0年）React,Next.js
- （1ヵ月）Vue.js
→React(Next.js)も全て個人開発で使用のため初心者です…
感じたReactとVueの違い
ファイル構成
Vueは単一のファイルで完結するので、とても理解しやすく書きやすいなと感じました。
| （Tailwind等のCSSフレームワークを使用しない場合） | |
|---|---|
| React | .jsx ＆ .css |
| Vue | .vue |
CSSファイルの競合
別ファイルに用意せずとも競合を意識せずに作業できるのは非常に便利だなと感じました。Reactだと毎回importするのも地味に面倒…
| （Tailwind等のCSSフレームワークを使用しない場合） | |
|---|---|
| React | sample.module.css |
| Vue | <style scoped> |
Routing
ルーティング自体に関しては現段階ではあまり大きな差は感じられませんでした。
Routing Animation
Reactでは遷移時のアニメーションをつけるにはreact-transition-groupやFramer Motion等のライブラリをインストールして実装する必要がありました(簡単な方法があったらすみません)。ですがVueでは備え付けの<transition>コンポーネントを使用することで簡単に遷移時のアニメーションを実装できました。これは地味に感動しました。
条件分岐や反復
HTMLしか知らなかった私がReactを使い始めた時にも便利だなと思ったのが条件分岐や反復でした。jsxファイルとvueファイルで書き方が違いましたが、覚えてしまえば同様の使い方ができるのでとても便利でした。
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
props,slot
単純なボタンなどでデザインは同じだけど中身の文言だけ変えたいという時にコンポーネント化してpropを渡す場合があると思いますが、Vueではわざわざpropsで渡さずとも<slot>で渡すことができました。
<template>
<button><slot /></button>
</template>
<template>
<div>
<Button @click="handleRegister">登録</Button>
<Button @click="handleDelete">削除</Button>
</div>
</template>
状態管理
ReactではReduxがよく使用されますが、VueにもVuex(Pinia)がありました。
Hooks / Composition API
私がReactの学習を始めた際にReactのわかりにくさを感じたのがHooksで、しばらく理解ができなかったのですが、便利で必須な機能でした…。Vueにも同様の機能があり完全に一緒ではないですがVue3からComposition APIというもので提供されているようでした。
| 機能 | |
|---|---|
| React | React Hooks |
| Vue | Composition API |
学習コスト
ReactとVueを比較する様々な記事を見るとVueの方がわかりやすく、学習コストが低いという話をよく見かけます。ですが、結局バックエンドからではなくHTM,CSSから学び始めた人にとっては、自分の書いたことがそのまま全て表示される静的ページから動的なページの書き方だったり、フレームワークへの考え方だったりを学ぶことに時間がかかるので、学習コストにそんな差は無いのではないかと感じました。Vueの方が視覚的にも感覚的にも分かりやすいことは間違い無いのかもしれませんが、一からある程度きちんと学ぶ時間を取れるのであればどちらを選んでも学習コストに大差ないのではないかと感じました。(個人の意見です)
比較してVueの良かった点（個人の感想）
- 単一のファイルで完結するので、とても理解しやすい
- コンポーネントは全てscopeで統一すればCSSの競合を意識せずに書けて良い
-
<transition>でリッチな表現が手軽にできる - JSXはJavaScriptの中にHTMLを入れているという感覚だったが、Vueではその独特な感じもなくわかりやすいと感じた
結論
JSXに先に慣れているとあまり変わらないのではないかとも最初は思いましたが、HTML,CSS,JavaScriptと学んだ人は、Vueの方がコードを書きやすいのは間違いない。と感じました。Vueの良いところをまだまだ見つけられていないと思うのでこれからVueのいいところも見つけつつ他の言語でも精進していきます！！
Reactしか触っていない人はVueも気軽に触ってみたらいいと思います！
最後に
Routing Animationの手軽さに感動したので数分で実装したものではありますが、Routing Animationを実装したページを置いて失礼いたします。ありがとうございました。
いつかSvelte,Astro仮想DOMを使用しないライブラリ、フレームワークも勉強しないとな…