レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」

ENECHANGEでは、電気とガスの料金シミュレーションサービス「エネチェンジ」を開発しています。リプレース前の「エネチェンジ」のフロントエンドは、jQueryがメインで、ところどころVue2が使われていました。今回は、長年の開発によって積み重なったフロントエンドの技術負債をどのように解消しているのかについてご紹介します。

Transcript

1. レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」 ENECHANGE株式会社 2024年2月7日 東証グロース 証券コード：4169
2. Copyright © ENECHANGE Ltd. All Rights Reserved. | 2 自己紹介 • ENECHANGE株式会社 ◦ テックリード ◦ フロントエンド領域の技術選定や開発のリード • 趣味 ◦ ピアノ ◦ ルービックキューブ
3. リプレース前の技術スタック
4. Copyright © ENECHANGE Ltd. All Rights Reserved. | 4 エネチェンジとは • 電気とガスの料金シミュレーション・比較ができるサービス • オトクな電力会社を見つけたら、そのままお申し込みもできます
5. Copyright © ENECHANGE Ltd. All Rights Reserved. | 5 リプレース前の技術スタック • Ruby on Rails • jQuery がメイン • Vue 2.x を一部導入 ◦ 同一ページの中にjQueryで制御している部分とVueコンポーネントで記述されている部分が混在 • HTMLに直接scriptタグで記述されていることもあり、カオスな状態
6. リプレースに向けた技術選定
7. Copyright © ENECHANGE Ltd. All Rights Reserved. | 7 React vs Vue ( Next vs Nuxt ) 入社前（2022年4月以前）に聞いた話では、 Vue 2 を使っていると聞いていたので メンバーもVueに慣れているだろうし、 Vue 3 への移行が良さそうと思っていました 入社後 そもそもVue2が使われているのはごく一部であり、Vueの資産を活かすことはほとんど考える必要がない と判明 それで、フラットな視点で、今導入するならReactとVue3どちらが良いかを検討することに （ Next.jsやNuxtも併せて検討）
8. Copyright © ENECHANGE Ltd. All Rights Reserved. | 8 ライブラリのダウンロード数では、 React , Next が圧倒的優勢 npm trends より
9. Copyright © ENECHANGE Ltd. All Rights Reserved. | 9 他社の事例でも、 Vue → React へのリプレースがトレンドに 当時（2022年）は Vue → React への移行事例が多かった（今も） 逆に React → Vue への移行事例は1つも見つからなかった 食べログフロントエンドのリプレース戦略 https://note.com/tabelog_frontend/n/n18a799ec0784 Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 https://techblog.yahoo.co.jp/entry/20191203785540/ レガシーなフロントエンドを捨ててReact.jsでリプレイスした話 (PR TIMES) https://developers.prtimes.jp/2021/11/10/replace-react/ 愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話（ログラス） https://www.wantedly.com/companies/loglass/post_articles/331280 kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること https://blog.cybozu.io/entry/2022/02/04/171154 キカガク Vue.js & Nuxt.js から React & Next.js へ移行した理由 https://fwywd.com/tech/nuxt-to-next モノタロウ Vue.js？React？フレームワーク選びの７つの選定基準 https://tech-blog.monotaro.com/entry/2021/11/02/090000
10. Copyright © ENECHANGE Ltd. All Rights Reserved. | 10 React , Vue それぞれの特徴をまとめると 数多くの技術記事を読み込み、また、自分自身が両方触った経験も踏まえ、 それぞれの特徴をまとめてみた React + Next.js の特徴 • TypeScriptとの相性が良い • Vueに比べ、品質の担保や開発者体験に優れている • Nuxtは覚えることが多いのに対し、Next.jsはシンプルで覚えることが少ない Vue + Nuxt の特徴 • マークアップを直感的に書ける。ReactのJSX記法に比べてとっつきやすい • コンポーネント単位のCSSがデフォルトでサポートされている • Vue3 + Nuxt3の登場によりTypeScriptのサポートが手厚くなった ◦ 逆に言えば当時は過渡期で、主要ライブラリのVue3対応が終わらないと手を出しづらかった
11. Copyright © ENECHANGE Ltd. All Rights Reserved. | 11 以上を踏まえ、 React , Vue の選定基準 • 品質や開発者体験を優先するならReact、新人育成のしやすさを優先するならVue • 当時の社内ではジュニアレベルのエンジニアを育成するということはあまりなく、品質や開発者体験 を優先したいので、Reactを選択 • Reactで開発したいエンジニアが増えており、採用にも良い影響を期待できるのも一因 結論: React へのリプレースが決定しました！
12. どのようにリプレースしたか
13. Copyright © ENECHANGE Ltd. All Rights Reserved. | 13 静的なページはNext.jsで (1) • まずはLPなどの静的なページから移行を始めることに ◦ LPは以前から速度を改善したいという要望があり、リプレースするにはちょうどよかったため • 最初に取り組んだLPは「電気ガスセットLP」 ◦ https://enechange.jp/electricity_gas_set ◦
14. Copyright © ENECHANGE Ltd. All Rights Reserved. | 14 静的なページはNext.jsで (2) • 技術スタック ◦ Next.js ▪ 表示速度やSEO面で有利かつ開発者体験も良いNext.jsのSSGを使用 ◦ TypeScript ◦ Emotion ◦ Jest ◦ ESLint ◦ Prettier ◦ Storybook
15. Copyright © ENECHANGE Ltd. All Rights Reserved. | 15 静的なページはNext.jsで (3) • 最初の1ページは、基盤づくりもかねて、ほぼ1人で開発 • けっこう大変だった ◦ ページ上のすべての要素をReactコンポーネントで実装し直し ◦ 一部 Railsから電力プランのデータを引っ張ってくる必要あり ▪ Rails側のAPIの実装も自分が担当 ◦ インフラの構成案も自分で提案し、CTO室インフラチームに構築を依頼 ▪ AWS CodeBuild でビルド ▪ S3にアップロード ▪ ビルド設定ファイルも自分が作成 • CodeBuild初心者のため、苦戦しながら実装 ◦ 最初の1ページを完成させるのに約4カ月かかった
16. Copyright © ENECHANGE Ltd. All Rights Reserved. | 16 静的なページはNext.jsで (4) • その後は、他のフロントエンドエンジニア（2-3名程度）にも協力してもらいながら、さらに各ページ のリプレースを進めた • 半年ぐらいかけて、ページ数でいうと1000ページ以上のリプレースに成功 ◦ ページの種類でいうと4種類ほど • ページの表示速度・パフォーマンスの改善にも成功 Before After パフォーマンススコア 41点 読み込み速度 3.64秒 パフォーマンススコア 69点 読み込み速度 2.0秒
17. Copyright © ENECHANGE Ltd. All Rights Reserved. | 17 「マイエネルギー」の開発でReactの導入が進んだ • 2023年10月にスマートメーターのCルート開放が実施されることが決定し、我々もスマートメーターのデータにアク セスできるように • そのデータを活用するサービス「マイエネルギー」を開発することに • 新規開発ということで、当然フロントエンドはReactを使用
18. Copyright © ENECHANGE Ltd. All Rights Reserved. | 18 「マイエネルギー」スケジュールタイトすぎ問題 • 「電力データを活用した機能を日本で一番早くリリースする」という方針を掲げていたので、2023年10月のリリース が決まっていた • 諸事情により開発に入る前の工程（企画・デザインなど）が遅れため、2カ月ちょっとでリリースしないと ◦ ページ全体をリプレースするという方法ではなく、新規要素のみをReactで実装し、共通パーツ（ヘッダーやサ イドバーなど）はRails上の既存のものをそのまま使う これ以上話すと時間が超過しそうなので、続きは記事をご覧ください！ https://whatweuse.dev/article/enechange_front-end
19. さいごに
20. Copyright © ENECHANGE Ltd. All Rights Reserved. | 20 あなたも一緒にエネルギーの未来をつくりませんか？ ENECHANGEでは、「エネルギーの未来をつくる」という壮大なミッションに取り組んでいただけるエンジニアを募集し ています！ https://engineer-recruit.enechange.co.jp/ または「エネチェンジ　エンジニア」で検索