ホームページ - EY-Office

2024-03-08

私が最初に作ったReactアプリの思い出

Reactの教育やイベント等で話しをした事がありますが、私が最初に作ったReactアプリの事に付いて書こうと思います。
内容は、はてなブログに書いた記事の書き直しですが、その後も含めこちらに書いておきます。

たまには「いらすとら」もいいですね

jQueryで書かれたSPA(Single Page Application) ❗

2015年のある日、Ruby on Railsで作られたアプリのメンテナンスの仕事の相談がありました。詳細は書けませんが、このアプリはある会社の社内システムで、あるスタートアップ企業が副業で開発したアプリでした。しかし、そのスタートアップ企業の本業が忙しくなりメンテナンスを断られて困っているとの事でした。

そのアプリのコードを見てみたところ、驚きました！たしかにRuby on Railsで書かれているのですが、Railsはバックエンド・サーバーでフロントエンドはjQueryで書かれたSPA(Single Page Application)でした。❗

フロントエンドのJavaScriptコードは1万4千行、さらにテンプレートが4千行ありました
いわゆるクソコードで、コピペされて作られていますし、一部ロジックが破綻していました
バックエンドにはテストコードが有りましたが実行すると失敗していましたし、フロントエンドのテストは全くありませんでした
ただし、UIの見かけは当時としては最先端な感じでした
もちろんIE11, IE10がサポートプラットフォームでした

お客様からの最初の要望をいくつかのバグ修正と簡単な機能追加でした。かなり苦労しましたが、何とか要望を完成させました。
ただし、もうこのクソコードには付き合いたくないと思いました。😅

当時はAngularやReactなどが話題になっており、当時の私は良くわかってはいませんでしたが、これらのライブラリー/フレームワークに置き換えた方が良いのではと思い、ダメ元で提案書を書いたところ、ユーザー企業は採用してくれました❗

移行手順は以下のようにしました。

移行先ライブラリー/フレームワークの選定
- 検討の結果Reactを選択
現在のアプリにE2Eテストを書く
- E2Eテストはテスト内容がわかりやすいTrunipを採用、Trunipに付いてのブログ記事
- E2Eテスト内容はユーザー企業と間に入っているSIerで確認してもらいました
- React移行作業の完了はE2Eテストが通ることを条件に設定
Reactへの移行作業
SIerで検収

移行先ライブラリー/フレームワークの選定は、Reactを選んで本当に良かったです。 😃

選定理由は、

Reactの方がシンプルなコンセプトで出来ている
Reactは世界最大級のサービスであるFacebookで実際に使われている
- たいするAngularはGoogleのどのサービスで使われているのだろう？
- これは、ユーザー企業等には大きな説得力をもっていました
ただし当時、書籍やネットの情報は圧倒的にAngularが多かったです

Reactの置き換え後

当時のReactはクラスコンポーネントだったので、コードはやや長くなりましたがコードの構造が判りやすくなりメンテしやすくなりました
- 移行後のReactのコードは約1万1千行
- jQuery版でコピペで作られていた部分は、共通化できた
このアプリは複雑なステートを持っていなかったので、Reduxは使わなかった
- これも正解でした 😃
webpack(ESLint+Babel)の開発環境は、1万行のコードでは遅くなってきていたが我慢できる範囲だった
対応ブラウザーはChromeとIE11にしてもらった
リッチテキスト・エディターなど一部には非ReactのJSライブラリーは残しましたが、Reactの中で動くように工夫しました
CSSは大量あったので、そのままGloabl CSSで使いました
jQuery版に比べReact版の方がキビキビ動作した
- これはjQuery版のロジックが破綻していたのが原因