Vue.jsからReact.jsに移行した

公開しているChrome ExtensionをReactベースに移行してみました。これは「新しいタブ」を置き換えるもので、新しいタブを開いた時に軽くて見やすいブックマークページが表示されるようになります。

Chromeストアから入手できます。

chrome.google.com

これまでVue.jsで実装していたものをReact.jsに移行してみました。

Chrome Extensionではevalの利用が制限されているため、Vue.jsは通常のリリースではなくCSP対応のリリースを使う必要があります。後者はnpmやCDNにはリリースされておらず、GitHubから取得する必要があるため、この際にReact.jsに移行してみました。

移行して気づいたことを簡単にまとめます。

規模

移行前はCoffeeScriptで書いていました。移行後はJSXです。CoffeeScriptとJSXを比較するのはアンフェアなので、ここではCoffeeScriptをJavaScriptに書き換えたら2〜3倍になると仮定すると、下表のようになります。

移行前（Vue.js）：

言語	規模（SLOC）
CoffeeScript	27（JavaScript相当：54〜81）
HTML	42

移行後（React.js）：

言語	規模（SLOC）
JSX	157
HTML	12

このように、React.jsに移行するとコード行数は増えました。

凝集度

React.jsではビューと振る舞いを1つのクラスにまとめて書くため、コードが読みやすくなったと思います。もちろん、Vue.jsでもVueifyを使えばビューと振る舞いを1つのファイルにまとめることは可能ですが、React.jsはHTMLフラグメントからクラス内のプロパティにアクセスできるので、密に書けて分かりやすいです。

ただし、JSXにビューを書くのでデザイナーとの分業が難しくなると思います。class を className と書く必要があるとか、style の書き方がややこしいとか、最初にハマるところが多そうです。