Vue.jsからReact.js村に旅行する話

注意: これはポエムです

この記事はCPS Lab Advent Calendar 2017 2日目の記事です。

緑髪でB3のスポーンです。僕は家が茨城県にあって、大学まで通っているのでバイトで帰りが遅くなったときはラボの伝統を継承して残留しています。

「残留」と聞いてラボに入るまでは、夜中遅くまで研究を強いられているのかな？とビクビクしていましたが、実際は合宿のような感じで先輩や同期とワイワイたのしくやっています。

さて、今回は普段Vue.jsを使ってる僕がReact.js+TypeScriptを始めたのでVue.jsとの違いも含めてポエムを書いていこうと思います。 Vue.jsもReact.jsも初学者なので見当違いなところがあればコメント等でご指摘いただけると助かります。

CLI

昨今の複雑化したフロントエンド環境において、環境構築を一発でできるCLIツールはなくてはならない存在です。 Vue.jsのCLIはvue-cliを使っていました。vue init webpack アプリ名を叩くだけでモダンな開発環境が手に入るのはお手頃と言えます。

React.jsの場合はcreate-react-appを使いました。個人的に良いなと思ったのは、scaffoldの際にオプションの--scripts-version=react-scripts-tsを付けるだけでTypeScriptのプロジェクトになることです。Vue.jsの場合はTypeScriptのボイラープレートを見つけてくるのが結構めんどくさかったので、これは本質的な２つの違いではありませんが、感動しました。

コンポーネント

Vue.jsでは単一ファイルコンポーネントとして.vueファイルがあり、HTML, JS, CSSを一つに書いていくスタイルが一般的です。 React.jsでは基本的にJavaScriptで、render()メソッドの中にHTMLを書いていきます。最初は慣れなくて気持ち悪いと感じましたが、慣れてくるとコンポーネントは単純なメソッドの集合と考えられるので、ユニットテストする際はこっちのほうが恩恵を受けやすそうだなと思いました。

Vue.jsはVueインスタンス内に、methodsや状態であるdataを持ちオブジェクトの中にどんどん書いていくので個人的に見通しが悪いように感じます。

イベントハンドラと状態

これは自分のVueでの設計の悪さが問題かもしれませんが、React.jsではStateやEventを引数で取ってそれをハンドルして戻り値で渡してあげるのが一般的なようです。 Vue.jsよりも記述量が増えてやや複雑に感じる部分もありますが、疎結合になるのは、やはりテストのしやすさという面でも良いなと思いました。

ディレクティブ

Vue.jsにはv-forなどのディレクティブがありますが、React.jsではHTMLタグをfor文で回すような記述をするようです。やはりVue.jsのディレクティブに慣れているので、便利なv-forやv-ifを使えずにfor文や三項演算子で書いていくスタイルは少し泥臭く感じました。

まとめ

React.jsを書き始めて一週間くらいですが、色々とVue.jsとの違いに戸惑いながらも新鮮な気持ちで書いています。前述の通りコンポーネントが関数の集合なので、TypeScriptとの相性も良くPropsをinterfaceで定義できたり型のおかげで強力なサジェストが使えることで、歓喜しています。(これはTypeScriptの利点ですが...)

また、エコシステムもVue.js以上に大きいのでReactNative等色々触ってみようと思います。

P.S.

Weexはマジでクソなので絶対に触るな