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