https://zenn.dev/mybest/articles/90c62b850268e4

はじめに

こんにちは、株式会社マイベストでフロントエンドのテックリードをしているteppeitaです。

弊社が運営している mybest の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪

mybestのフロントエンド紹介

まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。

フロントエンドの技術構成

- TypeScript
- React
- ApolloClient（APIがGraphQLです）
- Storybook（VRTやinteraction testsを実行しています）
- Jest
- Cypress

↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。

画面構成

mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。 そのうち、Vueで表示されていたのは以下の画面です（それ以外はRailsのslimを使って表示しています）

• フロント画面：商品ランキングの表示や操作

  • 商品ランキングは、表示切り替え機能が有ったり、絞り込みなどのAPIリクエストが走る操作があります

    

    実際の画面です

• 管理画面：コンテンツや商品情報の編集画面全般でした

  • コンテンツの編集画面はセクションごとにページ分けされた独自CMSとなっています

    

  • 商品情報は別で管理しており、カテゴリごとに違うデータを管理しつつ、正規化のために複数テーブルが組み合わさっていたりするので、一般的なメディアサイトよりもかなり複雑度が高いです

    

  • 画面数は25画面ほどで、ほぼ全ての画面で編集機能がありました（＝state管理やAPI通信が必要）

リプレイスにかけたリソース

• 現在、フロントエンドエンジニアは正社員3名、業務委託（副業）4名です
• エンジニアはビジネス課題7割、技術課題3割の配分で時間を使うことができます
• 技術課題3割の時間を使い、9ヶ月ほどかけて（ほぼ）全てのVueをReactへリプレイスしました 🎉

VueからReactへリプレイスした理由

面接などでよく聞かれるのですが、VueからReactへリプレイスした理由や背景をまとめると以下のような感じです！