こんにちは！気付けばフロントエンド4年生、Mizutani(@sirycity)です。

この3年間でフロントエンドエンジニアとして色々なプロジェクトに参画する中、私の隣にはいつもReactとVueがいました。

どちらも沢山使いました。でもやっぱり僕はReact。その辺りの理由を書きます。

全てがJSという自由度

reactは全てがJS。JSさえ知っていればもう、何でもできます。何でも。

HTMLやCSSのつらみをJSで強引に吸収できます。これは割とHTML CSS JSで綺麗に分かれているVueだと取りづらいアプローチです。

あとはJSXの存在。こいつのおかげで分岐やループの独自構文がないのが本当に有り難い。Vueだと v-if や v-for などで担う部分をReactは普通にJSの文法で書ける。

あと分岐は三項演算子、ループはmapやreduce、findなど、分岐、ループ部分をJSパワーでどんどん強力にできます。

適当に書くけどこういう書き方が普通にできる↓これVueだと結構辛い。

<ul>
  {foo.map(({ bar, baz }, i) =>
    bar ? <li key={i}>{bar}</li> : <li key={i}>{baz}</li>,
  )}
</ul>

CSS in JS

※ VueでもCSS in JSは使えます

これも要は全てJSになるが故の表現力です。例えば条件に合う文字が赤くなるケースを考えるとVueでは

<div class="txt" :class='{"txt--red" : isRed}'>
  hello world!
  <div>
    <style scoped>
      .txt {
        color: black;
      }
      .txt--red {
        color: red;
      }
    </style>
  </div>
</div>

だいぶ省略してるけどこんな感じ。でもreact+cssinjsだと

<div style={{ color: isRed ? 'red' : 'black' }}>hello world!</div>

これだけ。何が良いってコード量少なくなるのも勿論なんだけどclass名考えなくて良いってのが大きい。BEMとか使わなくていい。

reactにどっぷり浸かるとこの感覚分かってくると思うけどclass名考えなくて良いのはほんとに楽。大事なことなので2回言いました。

実際↑の .txt って名前すぐ考え付きました？僕は .text にしようか .helloworld にしようか .hello-world-text とかにしようか… とかで10秒迷いました。

reactの方はtailwind.cssとかと合わせても面白いですね。

<div className={isRed ? 'text-red-900' : 'text-gray-900'}>hello world!</div>

これなら更にカラーコードすら考えなくて良くなる。究極の脳死コーディングです。

Fragment

※ vueにもフラグメント実装の予定はあるみたいです

vueもreactも基本的にはルート要素は1つしか返せません。これは駄目な例(react)

() =>
  <div>1</div>
  <div>2</div>

駄目な例(vue)

<template>
  <div>1</div>
  <div>2</div>
</template>

でもreactはFragment使えば普通にできる。こう

;() => (
  <>
    <div>1</div>
    <div>2</div>
  </>
)

Vueは<div>かなんかで囲まないと駄目だけど、divが入ると構造が変わってしまう…

<template>
  <div>
    <div>1</div>
    <div>2</div>
  </div>
</template>

Fragmentは多用するとreactのシンプルさをなくしてしまうのでケースバイケースですが滅茶苦茶便利です。

こんな感じでPC用とSP用分けたりとかよくする。これは別にv-ifでもできるんだけど、ナビゲーションみたいにPCにもSPにも出るけど全然レイアウトが違うようなコンポーネントは同じファイルに書きたいけどルート要素を全然違うスタイルにしたくて、そういう時とかに重宝する。

;() => (
  <>
    <nav>PC用</nav>
    <nav>SP用</nav>
  </>
)

あとはJSXでCSS直書きする時とか。こんなかんじ。これはあまりない。

;() => (
  <>
    <div className="apple">りんご</div>

    <style>{`.apple { color: red; }`}</style>
  </>
)

おわりに

他にもtypescriptとの親和性とか関数型とか相性の良さとかあるけど一旦区切ります。

こうやって見ると基本的にreactとvueはどっちでもそんなに変わらないですね(この記事の意味)

実際vue書いてた時期も合計1年くらいあったけど普通に楽しかった。

react vs vue はすごいホットなテーマなのでもっといっぱい書きたいです。終わり。