レガシーなフロントエンドを React / Next.js に リプレースした結果 ENECHANGE株式会社 2024年2月28日

Copyright © ENECHANGE Ltd. All Rights Reserved. | 2 小野 優人 の自己紹介 ● ENECHANGE株式会社 ○ テックリード（フロントエンドが得意） ○ 3月からEM（楽しみだけど少し不安） ● 趣味 ○ ピアノ ○ ルービックキューブ

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

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

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

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

Copyright © ENECHANGE Ltd. All Rights Reserved. | 7 React vs Vue ( Next vs Nuxt ) Vue2 Vue3 React

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

Copyright © ENECHANGE Ltd. All Rights Reserved. | 9 他社の技術選定の記事を参考にさせていただきました 食べログフロントエンドのリプレース戦略 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

Copyright © ENECHANGE Ltd. All Rights Reserved. | 10 React , Vue それぞれの特徴をまとめると 数多くの技術記事を読み込み、また、自分自身が両方触った経験も踏まえ、 それぞれの特徴をまとめてみた React + Next の特徴 ● TypeScriptとの相性が良い ● Vueに比べ、品質の担保や開発者体験に優れている Vue + Nuxt の特徴 ● マークアップを直感的に書ける。ReactのJSX記法に比べてとっつきやすい ● コンポーネント単位のCSSがデフォルトでサポートされている

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

Copyright © ENECHANGE Ltd. All Rights Reserved. | 12 どのようにリプレースしたか 時間の関係で詳しいことは省略します。詳細はこちらの記事をご参照ください。 https://whatweuse.dev/article/enechange_front-end ● LPなどの静的なページは Next.js を使用 ● 新規開発では Vite + React の構成

リプレース後、どうなった？

Copyright © ENECHANGE Ltd. All Rights Reserved. | 14 大満足 😊 ● あきらかにメンバーの士気が向上した ○ コードの見通しが良くなり、保守性が向上した ■ メンバーからも「新しいコードは読みやすい」と言ってもらえるように ○ React で開発できること自体がモチベーションUPに ● LPのパフォーマンスが向上した（表示が速くなった） ○ Next.js 、 S3 の組み合わせが効果を発揮した Before After パフォーマンススコア 41点 読み込み速度 3.64秒 パフォーマンススコア 69点 読み込み速度 2.0秒

Copyright © ENECHANGE Ltd. All Rights Reserved. | 15 失敗したこと　そして今後の対策 ● フロントエンド担当者とバックエンド担当者の認識ズレ ○ 特に時間がないとき、 OpenAPI (Swagger) のファイルを雑に書いて済ませがち ■ 説明をなるべく丁寧に書く ■ 必要に応じてすりあわせのMTGを実施する ● （失敗したことではないけど）リプレース前の部分を触るのがつらい ○ 現在の進捗は約5%　まだ95%はレガシーなコードで動いている ■ ※この進捗率には明確な基準があるわけではなく、感覚値です ○ 残りの箇所もReact化を進めていきたい

まとめ

Copyright © ENECHANGE Ltd. All Rights Reserved. | 17 まとめ ● 技術選定の際は準備が大事 ○ 関係者を納得させられる根拠を提示できるように ● しっかり準備してリプレースに取り組めば、いいこといっぱい ○ メンバーの士気が向上する ○ 採用に良い影響がある ○ 自分自身のスキルアップにつながる

さいごに

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