私がReactと関わるきっかけになった、約2万行のjQueryで書かれたフロントエンドをReactに置き換えた開発の事を書きます。
このフロントエンドを含むアプリは社内教育システムでバックエンドはRuby on Railsで書かれフロントエンドはjQueryで書かれたSPA(Single Page Application)でした。最初に開発した会社がメンテナンスを行わなくなったのでメンテナンスを引き継ぎました。
お客様からのいくつかの機能追加・変更の要求が出ていたのですが、jQueryはイベントへの対応と画面再描画の両方が必用で、かつイベント対応の仕方が統一されてなくシンプルな変更もコード修正は大変でした。またこのフロントエンドはコピペの山で一つの機能要求でも変更個所が複数になりメンテナンスコストが高くなっていした。
そこで、Reactを使う事をお客様に提案したところ承認されReactへの置き換えを行う事になりました。
移行作業
Reactへの置き換えで新たなバグが発生しないようにするために以下のような手順で開発する事にしました。
- 現状のソフトにはE2E(End to Endテスト)が無かったので、現状のソフトの利用方法を元にE2Eテストを書く
- Reactに置き換える
- E2Eテストが通る事を確認
- SIerの方が最終確認
- リリース
フロントエンドは3つのアプリに分かれているので、1アプリ毎に2〜5を繰り返し置き換えて行きました。
またE2Eテストは慣れているRubyで書く事にしました、間にSIerが入っているのでSEの人にテスト内容が分かりやすい Cucumber系の Turnip を使いました(その他 RSpec + Capybara + Poltergeist + Phantom.js など)。
フロントエンドはJavaScriptで書かれていますが、E2Eテストはブラウザーを通してのテストなので必ずしも同じ言語を使う必用はありません。
React移行に付いて
- 対応ブラウザーはChrome最新版、 FireFox最新版、 IE11にしぼってもらいました
- Edgeはお客様では使われてないので対象外にしました、またスマフォブラウザーも対象がです
- ReactのコードはjQueryコードはほとんど参考にせず0から作り直し
- UIは現状と同じにする、CSSは基本的に現状のものを使う
- ES2016を使用、開発ツールは webpack + babel + eslinet
- Reduxに付いては必用になったら使おうと思ってしましたが、フロントエンドの構造がシンプルだったので使いませんでした
- 一部のjQueryコンポーネントはそのまま使いました
- ReactとjQueryとの共存は良くないと言われていますが、各コンポーネントの動作・コードを調べてラッピングすれば使えます
- HTMLエディタのような高機能なコンポーネントは置き換えるのはたいへんなので共存せざる負えません
- しかし、残したコンポーネントの一つは後々問題が発生したのでReactコンポーネントに置き換えましたが見かけを合わせるのに苦労しました
移行作業の感想など
- 置き換えたReactのコードはコンポーネント化され、Reactの流儀で統一的に書かれているので判りやすく、メンテしやすいコードになった
- E2Eテストを書くことで移行時のデグレードが防げ、かつ現状ソフトの理解にも大変に役立ちました
- 置き換え後のJSは約1万行と小さくなりましたが、しかしこれはReact化の成果ではなくコピペされたコードを共通コードに置き換えたからです
- 元のコードには酷く無駄な再描画処理がありUIの反応を遅くしていました、置き換えたものは再描画はReactに任せたので全リロードは無くなり表示速度が速くなりました。jQueryで最適な部分再描画はいろいろな場合を考慮すると極めて難しく、諦めて全リロードになってしまったのだと思います。
- 移行作業には約2ヶ月程度かかりましたが、後のメンテナンスが柔軟に行えるようになり、しかもUIの反応速度も上がり十分に効果がありました。
