2020/05/29

【JS】日本でVueがReactより人気な理由を考える

※超長い。

こんにちは！Reactが好きなのではなくJSXが好きなんだと最近気づきました。Mizutani(@sirycity)です。

今回は長いです。国内でVueがReactより人気な理由について考えてみました。真剣に。

Vue「デザイナーもマークアップエンジニアもバックエンドエンジニアも簡単に始められるよ！使いやすいよ！」React「フロントエンド領域なんだからフロントエンドエンジニアが来い俺が最高のパフォーマンス出したる」適当に分けるとこんな感じ #javascript #reactjs #vuejs #フロントエンドエンジニア
— Mizutani@フロントエンドエンジニア (@sirycity) May 29, 2020

結論

本当の所は分からない。ごめん。以下仮説。

おそらくvueがeasy寄りなのが最大の理由(reactはsimple寄り)。なぜeasyかと言うと
vueの方がバックエンドエンジニア目線でテンプレート言語に似てて使いやすい
vueの方がマークアップエンジニア目線で分業しやすいから。つまり、
チーム構成が従来型のままフロントエンドだけモダンにするとvueが選ばれる。なぜチーム構成が変わらないのかと言うと、
BtoBの企業が多いためUXの要件が指定されず、UXを向上できるSPAに適した形態に開発チームを移行する動機が薄いから。

そもそも本当に国内だとVueの方が人気？

国内ではVueがReactより人気…と言われています。

これに関してはほぼ間違いないかと思うのでこの記事では国内ではVueの方がReactより人気、国外ではその逆と考えます。

主な理由↓

日本語のアウトプットが多い

Qiitaやtwitter(日本語)でのアウトプットが体感できるレベルでvueの方が多いです。明らかに。~~react派の僕が言うんだから~~

reactはvueより硬いため「reactを好む人やチームはディスクロージャーに消極的でSNSに書き込みたがらない傾向がある」と考えられなくもないけど…それを含めてもvueの方が情報量が多いと思う。

Nuxt.jsがNext.jsより多いのが日本だけ

google trendsでnuxtとnextを比較すると全世界で日本だけnuxtが勝ちます。統計の類ではこれが一番信頼できるんじゃないかなーと。

trends.google.co.jp/trends/explore?q=next.js,nuxt.js

npm trendsやgithubのスター数を用いている考察も多くありましたが、サンプル数ではgoogle trendsとは大きな開きがあると考えます。~~npmやgithubに携わっている日本人エンジニアが何人いるんでしょうか~~

他にもGatsby.jsとGridsomeを比較してみたりしたけど特に意味なし。静的サイトジェネレーターはreact-staticやvuepressもあるしな。

得てしてreactとvueの比較はむずいです。reactが普通に英単語だし。

関係なさそうな理由

Vueが中華圏出身ってのはよく言われてるけど「日本で流行る理由」としては関係ないかと思います。「中国でこれから流行っていく理由」としては適切かな！？

中国産が日本広まるってんだったらYiiとかもっと流行ってても良さそう(唐突なPHP)

vueの方が人気になった理由

vueがeasy寄り(reactはシンプル寄り)

vueが簡単にできることを売りにしているのが一番の要因だと考えます。というか、大抵これが一番の要因に挙げられてるね。

…決して「日本のフロントエンドエンジニアには簡単な技術しか使えない程度のやつしかいない」というわけではないです。というよりは 「フロントエンドエンジニア以外の優秀な人がフロントエンド領域も片手間でやってる」 っていう状況が多いと考えられます。本職でない技術を扱う際にsimpleよりeasyを選択するのはごく自然な指向性だと考えます。私もいきなりトマト育てろとか言われたら「自然の力だけで育てた…」とかより「3分でできる！」を選ぶ。多分。

vueの方がテンプレート言語に似てる

例えばまだreactもvueもなく、SPAでなくMPAが世界を覆っていた時代…デザイナーの書いたデザインカンプをマークアップエンジニアがHTML,CSS,JS に変換し、バックエンドエンジニアがそこにロジックを埋め込んで…ってやってたころです。

フロントエンドの領域はバックエンドフレームワークがテンプレート言語を用いて1つのページを一枚岩で返してました。ファイルはerb、cshtml、JHTML、phtmlみたいなやつでしたね。

ここからは仮説ですが、このようなチーム構成のままフロントエンドだけがモダン化すると、従来バックエンドフレームワークのテンプレート言語を使っていた開発者(バックエンドエンジニアもしくはマークアップエンジニア)がフロントエンド領域を掛け持ちすることになるのではないでしょうか？

この仮説が当たっていた場合、Vueを選択するのは至って妥当です。だってもう、vueの方が明らかにテンプレート言語に見た目が似てますからね！ifとかforとかまんまそうです。reactはifもforも基本使わないです。

vueの方が分業しやすい

「vueはreactに比べてHTML CSS JSが分かれているからデザイナーと分業しやすい」は結構言われてます。ただこれ、上の例でいくと一番分業しやすい(というか分業したがっている)のはマークアップエンジニアなんじゃないかと思います。特にHTMLとCSSにのみ造詣が深くJSはそうでもなかったりjQueryを使うタイプのマークアップエンジニアはJSが全てを支配するReactとの相性が非常に悪いです。

フロントエンド領域の中でもHTML,CSS+一部のJSのみを担当し、残りのJSはバックエンドエンジニアが担当する…といった構成のチームが採用するなら確実にvueです。少なくともreactは、フロントエンド領域の担当がフロントエンドエンジニアになっていることを前提としています。

チーム構成が変わらない理由

vueの方が人気な理由を簡単にまとめると、従来のチーム構成を保ったままフロントエンドを新しくするようなケースに向いているからということになります。

SPAのメリットを重要視していない？

ただ、この仮説が正しいなら日本の開発チームはフロントエンドに重きを置くような構成にシフトしない傾向にあることになり、穿った見方をするとMPAをSPAに移行することで享受できるメリットを重視していないことになります。

SPAのメリットは多くありますが最も挙げられるのが「ページ遷移時の読み込みがなくなる」ことです。でも「日本のWebアプリ、Webサイトだけ諸外国と比べてページ遷移が少ない」とは考えづらいですね… :(

UXを重要視していない？

UX(ユーザー経験)を重要視していない…のでしょうか。ただ、これもやはり「日本企業だけユーザーの使い心地を考えていない」なんてことはない~~と信じたい~~ のでそのままは合致しなさそうです。

少しマーケティング的な観点になってしまいますが、UXを重視する理由として「UXを重視しないとUXを重視している競合企業へユーザーが流れるから」といった視点は一考の余地がありそうです。

ということは「日本のITユーザーは他のサービスに流れにくい、もしくは日本のIT企業では競合が少ない」んでしょうか。後者は当てはまりそう…でもこれ別にUXに限ったことじゃないですね！そりゃ性能が良ければ良い方のやつ使うのは当たり前です。

UXは言葉で表しにくい？

「日本はUXに対する不満を諸外国より表しにくい状態にある」… だんだん真理に近づいてきたようです。なぜでしょう。日本人が我慢強いんでしょうか。それもあるかもしれんな。

でもここで一つ、日本のIT企業は諸外国に比べBtoBが多いといった統計があります。これは本当の話。作ったソフトを納入するみたいな形式が多く、自社開発が少ないってことですね。

つまり、ソフトを作る人と使う人が異なるのでこの間のコミュニケーションコストが増大するわけです。隣の席に座ってる人に話すのは簡単だけど、違う会社まで行くのは大変だしな。となると、言語化の難易度とソフトウェアにおける重要度がある程度比例するってのが考えられます。少ない回数の交渉の場では、言葉で伝えやすいことが重視される…みたいな感じでしょうか。「●●ができる」みたいなしっかりした用件は伝えやすいんですね。

一方でユーザー体験は言語化しにくい。ここでもし自社開発なら、やっぱりこうするかーみたいな軽い雑談感覚でUXがちまちま修正されていくところが、受託開発だと限定されたコミュニケーションの機会によりこういったフィードバックを逃す。長くなりましたが、これが真理じゃないでしょうか。UXは要件に含めにくい、受託開発と相性が悪いんです。