Vue2ユーザーが感じたReactの開発体験について

こんにちは！CastingONE の岡本です。

変更履歴

2023/04/25
あくまで弊社で使っている Vue2 と React の開発で感じた違いについての記事でしたが、ユーザーからのコメントを受けて確かに誤解を受けかねない内容でしたので以下の点について修正しました。

• 記事タイトルの修正
• 注意文言の追記

はじめに

私は普段、フロントエンド開発を担当しています。弊社のフロントエンドは Vue の 2 系 で開発していますが、React に移行することになりました。私は今まで Vue でしか開発を行ったことがなかったので、これを機に React の勉強を始めました。その勉強を通じて感じた React と Vue の開発体験の違いについて書いていこうと思います。

この記事はあくまでも Vue は 2 系 についての話になります。今、弊社で使われている Vue の 2 系から React に代わる際の体験の違いについての所感になります。

React の良いと思った点

私自身 Vue の開発経験しかなかったので、React を勉強してみて Vue よりも良いなと思った点を挙げていきます。

確実な型付けができる

React を勉強していて一番感じたことは、TypeScript の型がバシバシ当たることです。Vue は.vueという単一ファイルコンポーネント（SFC）を使用して開発を行うのですが、厳密には JavaScript ではないのでエディタでの補完や構文解析がされません。これらを行うためには、Vetur のような拡張機能を導入する必要があり、導入するとある程度行われますが、完璧とは言えません。例えば、.vue ファイルで props に型を当てたコンポーネントを作成して、そのコンポーネントを import して使う時に props の型を判定してくれないので、違う型を渡してもエラーを表示してくれません。

Parent.vue

<template>
  <Children :title="100" /> // string型にnumberを渡しているのにエラーにならない
</template>

React は jsx という JavaScript を拡張した構文を使用するので、Vue のような事象が起こらず、TypeScript の型が途切れることなく使用できるので、より型安全な開発が行えます。

JavaScript で全て書ける

React の開発は JavaScript で全て記述できます。コンポーネントの作成にjsxという特殊な構文を使用しますが、これも JavaScript に UI がどのような見た目かを記述するために拡張された構文なので、JavaScript の機能を全て備えています。
このおかげで Vue の template のv-if、v-forのような特殊な記述を新たに覚える必要がなく、三項演算子や map でやりたいことが実現できます。

また、何か周辺ツールを導入する時にそのまま書ける点が良いと思いました。例えば、Storybook を導入する時は、Vue の場合 .vue ファイルにコードを書くことができないため色々工夫する必要がありますが、React はそもそも JS ファイルなので、いつもの書き方がそのまま使えます。

Vueの場合のStorybook

const Template: Story<Props> = (args, context) => {
  return Vue.extend({
    props: Object.keys(context?.argTypes || {}),
    components: { Button },
    template: `<Button v-bind="$props" />`
  })
}

Reactの場合のStorybook

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

このように周辺ツールを導入する時もシンプルな記述で簡単に行えます。

Vue の良いと思った点

React の勉強を進めていく中で、Vue はこうだった、Vue のあの機能便利だったと思ったことを挙げていきます。

直感的に記述できる

私は Vue を始めた時ほとんど JavaScript の知識がないにも関わらず、それなりの開発ができました。その理由はこの直感的に記述できる点だと思います。

SFC(単一ファイルコンポーネント)

Vue は.vueという SFC で HTML/CSS/JavaScript の記述が一つのファイルにまとまっているので、初学者にとっても関係性が掴みやすかったです。また DOM の変化にリアクティブに特殊な動作をしてくれるディレクティブというのもタグに埋め込むだけで使用でき、直感的でわかりやすかったです。

VueのSFC

<!-- マークアップ -->
<template>
  <div>
    <!-- isLoadingがtrueだとそのタグを表示 -->
    <div v-if="isLoading">
      <!-- ... -->
    </div>
  </div>
</template>

<!-- JavaScript -->
<script>
//
</script>

<!-- Style -->
<style>

</style>

v-model

v-modelは Vue のディレクティブのひとつです。v-modelを使うことで、画面上でフォームの入力値を変更するとコンポーネント内のデータも自動的に変更してくれます。このおかげで、深くネストしたオブジェクトも簡単に更新することができてとても便利です。

v-model

<template>
  <input v-model="profile.name.last" type="text" name="last" />
</template>

<script>
export default {
  data() {
    return {
      profile: {
        name: {
          last: '',
          first: ''
        }
      }
    }
  }
}
</script>

React は v-model のような双方向データバイディングはないので、フォームの入力値を反映させるには、以下のようにイベントハンドラを使用したデータ更新処理が必要になります。また、データがネストしている場合はスプレッド演算で展開するか、愚直に全てのキーバリューを書く必要があり、少し手間がかかります。

v-modelをReactで再現

const [profile, setProfile] = useState({
  name: {
    last: '',
    first: ''
  }
});

const handleInput = (e) => setName(() => ({
  ...profile,
  name: {
    ...profile.name,
    last: e.target.value
  }
}));

return (
  <input type="text" onChange={handleInput} value="text" name="last" />
)

プログラミングを始めて間もない頃に Vue を触り始めた私にとってv-modelはフォームに入力したデータが変数に代入される流れがあまりにも簡単かつ直感的すぎて、逆に何が便利なのかも分かりませんでした。。しかし、経験を積んでいく内に裏側で色々な処理が施されているおかげでこのような直感的な記述ができていることが分かり便利さを実感できました。

ライフサイクルフック

Vue にはそれぞれのライフサイクルの段階で処理を実行できるライフサイクルフックという関数があります。React でも useEffect などの hooks を使用して、再現できますが、Vue はそれぞれのライフサイクルで実行される関数(created や mounted)が用意されており、わかりやすくて大変重宝しました。

ライフサイクルフック

created() {
  // Vueインスタンスの初期化後に実行される
}
mounted() {
  // DOMが作成された直後に実行される
}

まとめ

Vue を始めた頃は、React の書き方(特に jsx)が独特と感じていて直感的に記述できる Vue の方が使いやすそうなのに React の方が人気なのは何故？🤔 「Vue は Easy、React は Simple」ってよく聞くけど、React のどこが シンプル？ 😡「Vue より React が大規模開発に向いている」と言われる理由は何？😭 と常々思っていました。ですが、色々と理解が深まるにつれて、Vue は確かに Easy だけど、Vue 独自の記法を新たに覚える必要があるし、TypeScript の型が正確ではない点などを考慮すると開発が大規模になるにつれて Hard になると思いました。それに比べて React は全て JavaScript で書けるので JavaScript を理解していれば新たに特殊な構文を覚える必要がなく、コードの切り出しも行いやすく設計をシンプルに保ちやすいと思いました。また、より型安全である点や周辺ライブラリとの相性を考えると大規模開発に向いていると言われている理由がわかりました。

今では、サクッとアプリケーションを開発するのに向いているのは Vue で、大規模なアプリケーションを開発するなら React と思うようになりました。

終わりに

以上が私が感じた React と Vue の開発体験の違いです。React を勉強することで React も好きになりましたし、Vue がいかに初学者だった私の開発のハードルを下げてくれていたことを実感し、ますます好きになりました。

弊社ではいっしょに働いてくれるエンジニアを募集中です。社員でもフリーランスでも、フルタイムでも短時間の副業でも大歓迎なので、気軽にご連絡ください！

https://www.wantedly.com/projects/1130967

https://www.wantedly.com/projects/768663