Vue3に挑戦したきっかけ

タイトルでも書いた通り、これまでメインで使っていたのはReactだったのですが、
そんな中、新卒1年目に勉強の一環で作ったjQueryのシステムを新しくすることになりました。
何を使っても良いという状況だったので、何で作り直すか考えてみたところ、

今回はReact以外のものに挑戦してみたい
ドキュメントが分かりやすそう
ググったら参考になるものが沢山出てきそう
TypeScriptに対応している

という4点から、Vueに挑戦することにしました。
ちょうど、Vue3が出たタイミングで、
TypeScriptの対応も手厚くなっているという話だったので、
「よしこれはいっちょ使ってみるか…！！」という思いもあり、決意。

一通り、開発も終わったので、Reactと比較して感じたVueの感触を以下にまとめていきたいと思います。

Vueの良かった点

1.HTML/CSS/Javascriptを1つのファイルにまるっとかける

Reactだと、CSSファイルは別置きが基本となっているのに対し、
Vueでは、1つののファイルにCSSも含めて書くことができます。
自分で書いたクラス名を確認するにも、1つのファイル内で確認できるので見やすいですね。

CSSメタ言語(scssやless等)の導入も

CSSメタ言語導入

<style lang="scss">
...
</style>

で済んでしまうのも良き点です。

2.ルートに複数の要素を置ける

これはVue3で新しくなったポイントらしいです。

ルートに複数の要素を置ける

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

これまでだと、div等でラップしなければいけなかったところが、
上の書き方でも通るようになり、書く必要がなくなりました。

~~Reactだと、divでのラップが必要になってくるので、比較すると無駄な要素がなくて良いです。~~
Reactでも、同様に書けるようです！(コメントでご指摘くださった@Munchkinさんありがとうございます！)
(勉強不足でしたが、おかげでReactのが好きだなぁという最後の結論を強めることとなりました…笑)

正式リリース前に総予習!! Vue3の変更点まとめ

3.reactiveな値(Reactでいうところのstate)の定義が楽

Reactと比較すると、リアクティブな値の書き方についてはVueの方が間違いなく簡潔です。
まずはReact。

Reactでのstateの定義

const [loading, setLoading] = useState<boolean>(true);

次にVue。

Vueでのリアクティブな値の定義

const loading = ref(true);

一目瞭然ですね。
Vueだと、値を更新するための関数を一緒に定義する必要がないので、簡潔に書くことができています。
また、型定義についても同様で、
わざわざ明示せずとも、Booleanであることを判断してくれます。
ちなみに、Vueで値を更新したいときは

Vueでのリアクティブな値の更新

loading.value = false;

これで済みます。めっちゃ楽。

Vueのあんまりな点

1.templateタグ内で使いたい関数や変数をreturnしないと使えない

returnしないとtemplateタグ内で使えない

  setup() {
    const loading = ref(true);
    // returnの中にloadingを含めないと、templateタグ内で使えない
    return { loading }
  }

上記の通り、一度定義した変数(もしくは関数)はreturnしないと、templateタグの中で使えません。
Reactだと一度定義した変数については、特にreturnする必要もなく、jsxの中ですぐに使えます。

2.templateタグ内で型が効かない

例えば、以下のようにbookオブジェクトを定義します。

オブジェクトの定義

  setup() {
    const book = {
        title : 'aaa',
        author : 'bbb',
    };
    return { book };
  }

それを下記のようにtemplateタグ内で使おうとすると、

templateタグ内で型が効かない

<template>
  <div> { book. } </div>
</template>

book.とかいた段階で、
titleとauthorがサジェストされてきてほしいところ
これが出てこないです。
悲しい…。
Reactだと、この悩みが一切なかったので、やはりTypeScriptとの相性はReactの方が良さそうだなぁと感じました。

3.拡張機能を入れていても補完がいまいち(な気がした)

VScodeを使って開発していたのですが、
Reactで開発を進めていた時には気にならなかった補完が、
Vueだとしっくりこない感じがしたというかなりふわっとした、いまいちポイントです。
(言語化できないことを入れるなというクレームが出てきそうですが、一個人の意見ですのでお許し下さい...)
ちなみにですが、拡張機能はveturを入れていました。

ReactとVueを比較してみた結果

個人的には、Reactの方が良いなぁという結論。
特に補完とtypescriptとの相性が気になりました。
Vueで良い点として挙げた部分が、「それがないと生きていけないんだ…！」となるくらいのポイントではなかったからというのもありますかね。

次の投稿では...

ReactとVueの対応表なんて作れたら良いなと思いました。
忘れない内に投稿できるよう頑張ります。

最後まで読んでくださった方々ありがとうございました。

Reactに漬かっていた私がVue3に挑戦して感じたこと