なぜReactが好きなのか答えられない人へ

あるいは、なぜVue.jsが好きなのか答えられない人へ
あるいは、なぜAngularが好きなのか答えられない人へ

そんな初心者の方への記事です。

Reactが好き

僕はReactが好きでReactを使っています。
でも、Vue.jsが好きでVue.jsを使っている人もいますし、Angularが好きでAngularを使っている人もいます。
下記は僕が「Reactが好きな理由」を聞かれるときに、頭の中で思い浮かべているマトリックスです。

	ライブラリ	フレームワーク
HTMLベース	Vue.js	Angular
JavaScriptベース	React

僕の「Reactが好きな理由」はJavaScriptベースでUIが記述でき、アプリケーションにおけるライブラリ構成を独自にカスタムしていける点です。

HTMLベース or JavaScriptベース - UIをどう記述するか？

HTMLベースというと正確ではないため、Templateベースと言いかえたほうが良いかもしれません。
しかし、HTMLベースと言った方が伝わりやすいかなと思いました。

アプリケーションのコードはビルドすることでJavaScriptのバンドルファイルとしてまとめられます。まとめられた後はみんな大して変わりません。
しかし、まとめる前のソースコードをトランスパイラがどのように解釈するのか？という点において、Vue.js/AngularとReactの間に相違点があります。

Vue.js/Angularでは、アプリケーションのUIとなる部分のコード(HTML)をTemplateとして記述し、処理の部分(Script)と分けて記述します。
このTemplate(HTML)と処理(Script)はそれぞれ別世界のものであるため、トランスパイラがUIと処理を紐づけるために仕事をします。

• HTMLの世界では属性の命名で大文字と小文字が区別されないのでケバブケース(hoge-key)をつかう
• JavaScriptの世界では大文字と小文字が区別され、基本的にキャメルケース(hogeKey)をつかう

これをトランスパイラがガッチャンコします。

一方、ReactではUIのコードも処理のコードも同じJavaScriptに記述します。JSXがそれです。
JSX内にかかれたHTML的なコードは、見た目はHTMLのようなものですがJavaScriptなので、宣言した処理とUIが直接紐づきます。

TypeScriptが流行するのと同時にReactのユーザが増えたのは、UIのコードもTypeScriptでカバーできるので、TypeScriptの恩恵を受けやすいというのもあったでしょう。

しかし、Vue.jsやAngularもいいと思います。

個人的な見解ですが、TemplateとScriptに分けて実装する方法は、従来のSSRによるアプリケーションの実装方法とイメージが近いんです。Ruby on Railsに代表されるような。
JavaにおけるJSPにおいてもそうであったと認識しています。僕がやっていたときはXMLベースでしたが、実装におけるパターンは一緒だといってよいのではないでしょうか。(PHPやPerlはあまりやったことがなくて語れません)
なので、従来のSSRにおけるアプリケーション開発をがっつりやってた人とかはVue.jsやAngularの方が何かとやりやすいと思ってるんです。

だから僕は、Reactしか勝たんとは思ってません。
解は人によると思います。

ライブラリ or フレームワーク - アプリケーションの構成について

React/Vue.jsはUIライブラリです。一方、Angularはフレームワークです。
React/Vue.jsでは、ライブラリ本体がUIを実装するための最低限の内容で構成されています。なので、用途に合わせて姉妹ライブラリもインストールしていく必要があります。
Angularはフレームワークなので、はじめから色々なライブラリがいっぱい入っています。

好みの問題です。
node_modules配下は最小構成にしたい！ミニマリストだ！という人はReact/Vue.jsの方が合うかもしれません。
ライブラリ構成考えるのが手間！入れたらすぐ使いたい！という人はAngularの方が合うかもしれません。

僕はReactばっかり使ってますが、ライブラリのバージョンアップとかするときに対応関係がシビアになってくるのが少し手間だと感じるときもあります。Angularはその点、フレームワークとして吸収してくれるので楽なのかなって思ってたりします。

まあでも使わないモジュールがnode_modules配下にいたら、ちょっと気持ち悪く感じるのかな。コンテナ上でのインストール時間とかちょっと変わってくるのかもしれない。
まあでも、個人の趣味でいいのかもしれません。
僕はぶっちゃけ、この点についてはどっちでもいいかなと思ってます。

ちなみにですが、フレームワーク的ポジションとしてReactにはNext.jsがあり、Vue.jsにはNuxt.jsがあります。
両者ともそれぞれ本家ライブラリと別にAPIがありますので、ある程度のキャッチアップと慣れが必要な世界ではあります。

まとめ

簡単にまとめると……

好きな理由として言いやすいパターン

• JavaScriptベースでUIが書けるからReactが好き
• TypeScriptをより生かせるからReactが好き
• 最小構成で作れるからReactが好き

好きな理由としてちょっと微妙かもなパターン

• 宣言的UIだからReactが好き ... Vue.js/Angularも宣言的UI
• 仮想DOMだからReactが好き ... Vue.js/Angularも仮想DOM

チラ裏

React、Vue.js、Angularのどれがいいのかトークというのを何度も繰り返してきましたが、なんとなくよい気分にはならなかったのかもしれません。

つい３年程前まで僕はReactが一番格好良くて最高なんだ！と思い、他のライブラリはイケてない！と思い込んでました。時には他ライブラリを好んでいる方の前で得意気になったこともあります。この記事はそんな自分への罪滅ぼしでもあります。

すべてのエンジニアが自信をもって好きなものを語り合える、そんな未来に貢献できたらいいなと思って書きました。Thank you !!