![](https://res.cloudinary.com/zenn/image/upload/s--HZLtST06--/co_rgb:222%2Cg_south_west%2Cl_text:notosansjp-medium.otf_37_bold:mybest%2Cx_203%2Cy_98/c_fit%2Cco_rgb:222%2Cg_north_west%2Cl_text:notosansjp-medium.otf_70_bold:Vue%25E3%2582%2592React%25E3%2581%25AB%25E3%2583%25AA%25E3%2583%2597%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25B9%25E3%2581%2597%25E3%2581%25A6Easy%25E3%2581%258B%25E3%2582%2589Simple%25E3%2581%25AB%25E3%2581%2597%25E3%2581%259F%25E8%25A9%25B1%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vemVubi9pbWFnZS9mZXRjaC9zLS1wTFdWZVFoVS0tL2NfbGltaXQlMkNmX2F1dG8lMkNmbF9wcm9ncmVzc2l2ZSUyQ3FfYXV0byUyQ3dfNzAvaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzVjYmM2ODgzNGIuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_72/v1627274783/default/og-base_z4sxah.png)
VueをReactにリプレイスしてEasyからSimpleにした話
ARANK
はじめにこんにちは、株式会社マイベストでフロントエンドのテックリードをしている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となってい…