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

Slide 1

Slide 1 text

レガシーなフロントエンドをリプレースするプラクティス。エネチェンジが挑む「React化」 ENECHANGE株式会社 2024年2月7日東証グロース証券コード：4169

Slide 2

Slide 2 text

Slide 3

Slide 3 text

リプレース前の技術スタック

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

リプレースに向けた技術選定

Slide 7

Slide 7 text

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も併せて検討）

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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対応が終わらないと手を出しづらかった

Slide 11

Slide 11 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 11 以上を踏まえ、 React , Vue の選定基準 ● 品質や開発者体験を優先するならReact、新人育成のしやすさを優先するならVue ● 当時の社内ではジュニアレベルのエンジニアを育成するということはあまりなく、品質や開発者体験を優先したいので、Reactを選択 ● Reactで開発したいエンジニアが増えており、採用にも良い影響を期待できるのも一因結論: React へのリプレースが決定しました！

Slide 12

Slide 12 text

どのようにリプレースしたか

Slide 13

Slide 13 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 13 静的なページはNext.jsで (1) ● まずはLPなどの静的なページから移行を始めることに ○ LPは以前から速度を改善したいという要望があり、リプレースするにはちょうどよかったため ● 最初に取り組んだLPは「電気ガスセットLP」 ○ https://enechange.jp/electricity_gas_set ○

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 15 静的なページはNext.jsで (3) ● 最初の1ページは、基盤づくりもかねて、ほぼ1人で開発 ● けっこう大変だった ○ ページ上のすべての要素をReactコンポーネントで実装し直し ○ 一部 Railsから電力プランのデータを引っ張ってくる必要あり ■ Rails側のAPIの実装も自分が担当 ○ インフラの構成案も自分で提案し、CTO室インフラチームに構築を依頼 ■ AWS CodeBuild でビルド ■ S3にアップロード ■ ビルド設定ファイルも自分が作成 ● CodeBuild初心者のため、苦戦しながら実装 ○ 最初の1ページを完成させるのに約4カ月かかった

Slide 16

Slide 16 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 16 静的なページはNext.jsで (4) ● その後は、他のフロントエンドエンジニア（2-3名程度）にも協力してもらいながら、さらに各ページのリプレースを進めた ● 半年ぐらいかけて、ページ数でいうと1000ページ以上のリプレースに成功 ○ ページの種類でいうと4種類ほど ● ページの表示速度・パフォーマンスの改善にも成功 Before After パフォーマンススコア 41点読み込み速度 3.64秒パフォーマンススコア 69点読み込み速度 2.0秒

Slide 17

Slide 17 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 17 「マイエネルギー」の開発でReactの導入が進んだ ● 2023年10月にスマートメーターのCルート開放が実施されることが決定し、我々もスマートメーターのデータにアクセスできるように ● そのデータを活用するサービス「マイエネルギー」を開発することに ● 新規開発ということで、当然フロントエンドはReactを使用

Slide 18

Slide 18 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 18 「マイエネルギー」スケジュールタイトすぎ問題 ● 「電力データを活用した機能を日本で一番早くリリースする」という方針を掲げていたので、2023年10月のリリースが決まっていた ● 諸事情により開発に入る前の工程（企画・デザインなど）が遅れため、2カ月ちょっとでリリースしないと ○ ページ全体をリプレースするという方法ではなく、新規要素のみをReactで実装し、共通パーツ（ヘッダーやサイドバーなど）はRails上の既存のものをそのまま使うこれ以上話すと時間が超過しそうなので、続きは記事をご覧ください！ https://whatweuse.dev/article/enechange_front-end

Slide 19

Slide 19 text

さいごに

Slide 20

Slide 20 text

Copyright © ENECHANGE Ltd. All Rights Reserved. | 20 あなたも一緒にエネルギーの未来をつくりませんか？ ENECHANGEでは、「エネルギーの未来をつくる」という壮大なミッションに取り組んでいただけるエンジニアを募集しています！ https://engineer-recruit.enechange.co.jp/ または「エネチェンジ　エンジニア」で検索