読者です 読者をやめる 読者になる 読者になる

GeekFactory

int128.hatenablog.com

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

javascript react

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

https://lh5.googleusercontent.com/ptgtLVFUnsrELlNKIQeM7YyoUqqKcRWWYX2EKcAN386BDU_kHpZfzY1D6gedReVfl5x_TFMKYg=s640-h400-e365-rw

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

chrome.google.com

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

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

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

規模

移行前はCoffeeScriptで書いていました。移行後はJSXです。CoffeeScriptとJSXを比較するのはアンフェアなので、ここではCoffeeScriptJavaScriptに書き換えたら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にビューを書くのでデザイナーとの分業が難しくなると思います。classclassName と書く必要があるとか、style の書き方がややこしいとか、最初にハマるところが多そうです。

これから知りたいこと

今回のアプリは(まだ)単純なことしかやっていないので、ビューが複雑な状態を持つことはありません。このため、React.jsの特徴であるVirtual DOMの恩恵を受けるまでには至っていません。

大規模かつ複雑なアプリを設計する場合にうれしいことや課題になることはまだ分かっていません。

簡単ですが以上です。