実践レベルで比較する！React vs Vue.js
この記事の文字数は、4,408 文字です。
ReactとVue.jsの実装方法について比較してみましょう。 Vue.jsのVer3.0リリースによって、どのような注意が必要か。 ググラビリティの良さ。 初学者の理解しやすさ。 などなど、実践レベルでのそれぞれのポイントを比較していきましょう。
目次
こんにちは。ナオツです。
今日は改めて、現時点でのReactとVue.jsについて比較していきましょう。
実践レベルでどういう違いがあるのか。 仕事で使うということは、単純に学びやすさだけでは語れない側面があります。
ググラビリティの比較
プログラミングは わからないことがあったらすぐググる！ が鉄則です。
記事が多ければ多いほど、問題が起きたときに解決までの時間が短縮できます。
これを ググラビリティ（googleability） といいます。
Vue.js Ver3.0とNuxt.jsの注意点
2020/9月頃、Vue.jsのVer3.0がリリースされました。 新しい実装方法（Composition API）が開発されて、より勢いに乗っている最中です。 今後のニーズも高まっていくことでしょう。
Composition APIはVue.jsにTypeScriptの恩恵をもたらしてくれるものです。 以前の実装はやがて廃れていき、今後はComposition APIを用いた実装がデファクトスタンダードになっていくことが予想されます。
しかし、以下の注意点があります。
- リリースされたばかりで記事が少ない
- Nuxt.jsとの相性が悪い
- VS Codeの補完が微妙
これらの問題の本質は、「リリースして日が浅いので問題自体が露呈してない」というところです。
問題が起きると、エンジニア達が我先にと問題を解決した記事を書きます。 同じ問題に直面した別のエンジニアは、その記事を参考に問題を解決します。
つまり、リリースされたばかりで記事が少ないと、実装を進めて行く上でとても不利なんです。 そもそも調べられないとなれば、解決の難易度が高くなってしまいます。
また、VS Codeを使って実装する上でも注意が必要です。 以前の記事でも紹介しましたが、VS CodeにVeturというプラグインをインストールします。
このプラグインがVue.jsにおけるTypeScriptの補完機能を補助する役割を担っているのですが、ここの制約が難しく、補完機能を完璧にやってくれないのです。
Reactは最新verでもググラビリティが高い
2019年にReactは大幅な刷新がありました。 「Hook」機能のリリースです。 「Hook」を使った実装はReactでアプリケーションを作る上で、もはやデファクトスタンダードになっていると言っても過言ではないでしょう。
事実、現時点でHookに関する記事がかなりたくさん出ています。 ググラビリティについて問題を感じることはない印象です。
なんせReactは世界でもっとも人気のあるフレームワークですからね。
世界中のエンジニアが記事を書いてますから、情報量が違います。 英語の記事が多いですが、
英語読めないよ！
っていう方でも、Googleが翻訳してくれるので大体理解できます。（完全な翻訳ではありませんが…）
HookでReactの難易度が下がる
HookはReactを実装してきたエンジニアにとっては革命的で、
モダンフロントエンドはHookによって完成された
とツイートした海外のエンジニアもいらっしゃいます。
Reactで今後実装するには、Hookが欠かせません。
近年になってReactの日本語のドキュメントがめちゃくちゃわかりやすくなりました。 日本語のわかりやすさでいうと、Vue.jsとそれほど大差があるとは思えません。
「Hook」についても日本語ドキュメントが公式で発表されています。
ていうか「Hook」ってなんやねん？ と思われる方もいらっしゃいますが、今は、
Reactが簡単に書けるようになったもの
とだけ覚えていただければ結構です。 今後Hookについては実装レベルでご紹介していこうと考えてます。
Viewの実装で比較
React: JSXは慣れが必要
数年前Reactというフレームワークが世にリリースされたとき、それまでjQueryで頑張ってきたフロントエンドエンジニアは歓喜に震えました。
なんて画期的なシステムだろう。 これでどんな表現もできるじゃないか。
しかし昔のReactは、それはそれは複雑な代物でした。 Reactのエンジニア達は疲弊していました。 僕もその一人でした。 僕がはじめて仕事でReactを触ったのは比較的後半の2018年頃でしたが、それでも、、、
何このJSXって書き方！気持ちワルっ！ 何でこんなめんどい書き方すんの？？
などなど。 そんなイチャモンめいた感想ばかり吐いていました(笑)。
例を見てみましょう。 せっかくだからTypeScriptで書きますね。
const App: React.FC = () => {
const [buttonText, setButtonText] = useState<string>('click me!')
const clickButton = (): void => {
console.log('click!');
}
return (
<div>
<button onClick={clickButton()}>{buttonText}</button>
</div>
)
}
export default App
これ初見の方、なにやってるか謎じゃないですか？(笑)
returnでhtmlを返却するんですが、これが最終的な描画部分です（Viewといいます）。 ReactはJSXっていう記法なんですが、これが最初は本当に気持ち悪い！
これが Reactとっつきづらい！ って思わせてしまう1つの要因です。
JSの中にHTMLを書いていくんですね。 これまでHTML・CSS・JSを別々に実装してきた人にとっては、「ナニコレ！？」です。
ちなみに上記はなにをやってるかというと、
- 画面上に「click me!」というボタンが表示されている
- buttonTextはstate（状態）という変数として定義されており、"click me!"という初期値を持っている
- buttonをクリックするとonClickに紐づくclickButtonメソッドが発動
- console logに「click!」と表示される
という感じです。 constructorメソッドは、初期設定のような実装を書くのですが、冗長的でどうしても実装量が多くなってしまいます。（近年はHookを使うので違います！※後述）
Reactの処理をViewベースで追っていくときは、下から上に追ってく感覚があります。
ただね・・・
慣れます。
最初は気持ち悪いけど、2～3か月書いてると慣れてきます。 なので、「今難しそう」と思ってる方も安心してください。
第一印象は最悪ですが、徐々にReactの良さがわかっていきますので、今後のブログでその良さをご紹介できればと思います。
Vue.js: 普通のマークアップに近い実装
初学者がNuxt.jsやVue.jsからフロントエンドの学習を始めるのは悪い選択肢ではありません。
なぜならVue.jsは Reactと同じこと簡単に実装したい と考えた人たちが開発したものだからです。（たぶん）
上で書いたReactのコードと同じことをVue.jsで書くと、
<template>
<div>
<button @click="clickButton">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
data() {
return {
buttonText: "click me!",
}
},
methods: {
clickButton() {
console.log('click!');
}
}
}
</script>
こんな感じです。 普通にHTML,CSS,JS（特にjQuery）をやってきたかたにとっては、初見でも受け入れやすい実装になっています。
<template>内にHTML、<script>内にVue.jsのJSロジック。
ここには書いてませんが<style>を追記すればCSSも一緒に実装できます。
Vue.jsの売りは、この Easy（簡単さ） なんですね。
まとめ
いかがだったでしょうか？
今回は「仕事する上での注意点」や「実装のとっつきやすさ」で、ReactとVue.jsを比較検討しました。
当然、Vue.jsは今のバージョンが定着し、Nuxt.jsへの対応が完全になれば、もしかしたらReactよりも使いやすいものになるかもしれません。
フロントエンド業界はアップデートが激しい激戦区です。
いろいろな技術系のWebサイトをチェックして、常に技術のアップデートを監視していきましょう。
もしかしたら、ReactでもVue.jsでもAngularでもない別の選択肢が現れるかもしれません。