Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yuto Ono
February 07, 2024
93

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

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

Yuto Ono

February 07, 2024
Tweet

Transcript

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

    View full-size slide

  2. Copyright © ENECHANGE Ltd. All Rights Reserved. | 2
    自己紹介
    ● ENECHANGE株式会社
    ○ テックリード
    ○ フロントエンド領域の技術選定や開発のリード
    ● 趣味
    ○ ピアノ
    ○ ルービックキューブ

    View full-size slide

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

    View full-size slide

  4. Copyright © ENECHANGE Ltd. All Rights Reserved. | 4
    エネチェンジとは
    ● 電気とガスの料金シミュレーション・比較ができるサービス
    ● オトクな電力会社を見つけたら、そのままお申し込みもできます

    View full-size slide

  5. Copyright © ENECHANGE Ltd. All Rights Reserved. | 5
    リプレース前の技術スタック
    ● Ruby on Rails
    ● jQuery がメイン
    ● Vue 2.x を一部導入
    ○ 同一ページの中にjQueryで制御している部分とVueコンポーネントで記述されている部分が混在
    ● HTMLに直接scriptタグで記述されていることもあり、カオスな状態

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Copyright © ENECHANGE Ltd. All Rights Reserved. | 8
    ライブラリのダウンロード数では、 React , Next が圧倒的優勢
    npm trends より

    View full-size slide

  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?フレームワーク選びの7つの選定基準
    https://tech-blog.monotaro.com/entry/2021/11/02/090000

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Copyright © ENECHANGE Ltd. All Rights Reserved. | 14
    静的なページはNext.jsで (2)
    ● 技術スタック
    ○ Next.js
    ■ 表示速度やSEO面で有利かつ開発者体験も良いNext.jsのSSGを使用
    ○ TypeScript
    ○ Emotion
    ○ Jest
    ○ ESLint
    ○ Prettier
    ○ Storybook

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. さいごに

    View full-size slide

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

    View full-size slide