iimon TECH BLOG

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

Nuxt2からReactに移行を決めた話

初めましてiimonエンジニアの山根です！ 私は改善チームとして運用チームの間に落ちるタスクや、主にフロントエンドのDX向上の為の業務を担当しています。

1. 背景

現在はEOLを6月末に迎えるNuxt2の移行（4プロジェクト）対応をしています。

Reactに移行する背景について共有するため書きました。

2.結論

以下の理由でReactに移行を踏み切りました。

  • Nuxt3への移行とReactへの移行を比較したがNuxt3への移行コストが思った以上に高い
  • 今後を考えた際の運用のし易さ（情報量の多さ、ライブラリ等）

3. Reactに移行を決めた経緯

3.1. NuxtBridgeを使う移行が険しかった

NuxtBridgeは名前の通りNuxt2からNuxt3への移行の架け橋となります。 https://nuxt.com/docs/bridge/overview

しかし、移行対象のNuxt2のプロジェクトにおいてはNuxtbridgeとの相性が悪いことが判明しました。

ライブラリ（element-ui等）でエラーが起きたりでbuildを成功させられませんでした。

以下に詳細を記述していますので良かったらご覧ください。

NuxtBridge以外の方法で安全に移行を検討する #Vue.js - Qiita

3.2. 一気に3に上げるのも険しかった

3.2.1. ライブラリの問題

  • Nuxt3で使えなくなるライブラリ（Element-UI）
  • Nuxt3でvuexが推奨されなくなった

Nuxt3に上げるとともにライブラリも新しいものに変える必要が出てきました。

3.2.2. Nuxt2の状態で進められる移行タスクを進める必要があった

Nuxt2で徐々にNuxt3への移行をまめに進める必要があり計画を立てるのに苦労しました。

3.3. Nuxtを今後数年使うのか考え直す

3.3.1. エコシステムの規模

npm trends

エコシステムの規模が圧倒的にReactに軍配が上がります。

まめに改良を重ねられていくでしょうし、弊社の採用活動にも良い影響をもたらすと思いました。

そのような中でNuxtを使う理由が思いつきませんでした。

3.3.2. Nuxtを創業当初採用していた背景（個人的推測）

  • Vue2はOptionsAPIで、記述する場所が決められていてエンジニアの経験が浅い場合は安全に実装ができます。
  • 当時はReactよりもVueの方が日本語のドキュメントが多かったです。
  • Nuxtはデフォルトでファイルシステムルーティングが使えるのも理由の一つなのかなと思っています。

事業が成長し、それに追従する為にライブラリをより良いものに変える時がある意味来たのではと思っています。

4. 移行の進め方（検討中）

4.1. 画面単位で書き換え

Reactへの移行戦略

サイトを2つ用意し、Reactでの画面が実装できたらそちらの画面へ切り替える

4.2. iFrameで部分的に書き換え

みゅーとん / mew-ton | Vue Fes Japan 2023

  • ヘッダー:React
  • 中身:現行のNuxt(iFrameを使用) のようにします。

中身がReactで出来上がるとそちらに書き換えます。

4.3. 一気に書き換え

なるべく避けたいですが、上の二つが難しかった場合はやらざるを得ないです。

4.4. 分散してリリース

例えばユーザの10%をリニューアル版、90%をレガシー版のようにしてしばらく様子を見ます。

4.5. テスト戦略

4.6. 運用チームのメンバーがReactでの開発にすぐ入れるようにする

リニューアル後はReactの記法を学びながらもビジネス側の要望に応える必要があります。

何かチートシートのようなすぐに開発に入れたり、理解が深まるような情報を共有したいです。

chatで#dev-reactのようなチャンネルを作ってそこに社内のReactに関するノウハウを蓄積する試みを最近始めました。

といいつつも私自身がまだReactのことを分かっていないので勉強中です。。

5. 最後に

  • 安全に移行を進めることと、技術的負債を作らないことを両立したいです。
  • 技術選定の経験をこれから少しづつ積んでいきたいです。

6. 参考

iimonではエンジニアを募集しています。カジュアルからでもお話させていただきたく、是非ご応募していただけると嬉しいです！

www.wantedly.com