<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>こんにちは、株式会社マイベストでフロントエンドのテックリードをしている<a href="https://twitter.com/_teppeita" target="_blank" rel="nofollow noopener noreferrer">teppeita</a>です。</p>
<p>弊社が運営している <a href="https://my-best.com" target="_blank" rel="nofollow noopener noreferrer">mybest</a> の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0a126ca55e2cf" src="https://embed.zenn.studio/card#zenn-embedded__0a126ca55e2cf" data-content="https%3A%2F%2Fmy-best.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://my-best.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://my-best.com</a></p>
<h1 id="mybest%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E7%B4%B9%E4%BB%8B">
<a class="header-anchor-link" href="#mybest%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> mybestのフロントエンド紹介</h1>
<p>まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。</p>
<h2 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90" aria-hidden="true"></a> フロントエンドの技術構成</h2>
<div class="code-block-container"><pre><code>- TypeScript
- React
- ApolloClient（APIがGraphQLです）
- Storybook（VRTやinteraction testsを実行しています）
- Jest
- Cypress
</code></pre></div><p>↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。</p>
<h2 id="%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 画面構成</h2>
<p>mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。<br>
そのうち、Vueで表示されていたのは以下の画面です（それ以外はRailsのslimを使って表示しています）</p>
<ul>
<li>フロント画面：商品ランキングの表示や操作
<ul>
<li>商品ランキングは、表示切り替え機能が有ったり、絞り込みなどのAPIリクエストが走る操作があります<br>
<img src="https://storage.googleapis.com/zenn-user-upload/22492db79bcb-20220826.png" alt loading="lazy" class="md-img"><br>
<em>実際の画面です</em>
</li>
</ul>
</li>
<li>管理画面：コンテンツや商品情報の編集画面全般でした
<ul>
<li>コンテンツの編集画面はセクションごとにページ分けされた独自CMSとなっています<br>
<img src="https://storage.googleapis.com/zenn-user-upload/167f40bd3866-20220826.png" alt loading="lazy" class="md-img">
</li>
<li>商品情報は別で管理しており、カテゴリごとに違うデータを管理しつつ、正規化のために複数テーブルが組み合わさっていたりするので、一般的なメディアサイトよりもかなり複雑度が高いです<br>
<img src="https://storage.googleapis.com/zenn-user-upload/38ec2e314c4e-20220826.png" alt loading="lazy" class="md-img">
</li>
<li>画面数は25画面ほどで、ほぼ全ての画面で編集機能がありました（＝state管理やAPI通信が必要）</li>
</ul>
</li>
</ul>
<h2 id="%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E3%81%AB%E3%81%8B%E3%81%91%E3%81%9F%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E3%81%AB%E3%81%8B%E3%81%91%E3%81%9F%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9" aria-hidden="true"></a> リプレイスにかけたリソース</h2>
<ul>
<li>現在、フロントエンドエンジニアは正社員3名、業務委託（副業）4名です</li>
<li>エンジニアはビジネス課題7割、技術課題3割の配分で時間を使うことができます</li>
<li>技術課題3割の時間を使い、9ヶ月ほどかけて（ほぼ）全てのVueをReactへリプレイスしました 🎉</li>
</ul>
<h1 id="vue%E3%81%8B%E3%82%89react%E3%81%B8%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E3%81%97%E3%81%9F%E7%90%86%E7%94%B1">
<a class="header-anchor-link" href="#vue%E3%81%8B%E3%82%89react%E3%81%B8%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E3%81%97%E3%81%9F%E7%90%86%E7%94%B1" aria-hidden="true"></a> VueからReactへリプレイスした理由</h1>
<p>面接などでよく聞かれるのですが、VueからReactへリプレイスした理由や背景をまとめると以下のような感じです！</p>
<h2 id="%E5%91%A8%E8%BE%BA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A8%E3%81%AE%E7%9B%B8%E6%80%A7">
<a class="header-anchor-link" href="#%E5%91%A8%E8%BE%BA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A8%E3%81%AE%E7%9B%B8%E6%80%A7" aria-hidden="true"></a> 周辺ライブラリとの相性</h2>
<p>当時はVue2系を使っていたのですが、他のライブラリの実装で苦労することが多かったです。（TypeScript、Storybook、ApolloClientなど）<br>
多くのツールはReactを前提に作られている（pluginなどでVueに対応している）ケースが多く、Reactの方が恩恵を受けやすいのではと思っています。</p>
<h2 id="react%E3%82%84next.js%E3%81%AE%E9%80%B2%E5%8C%96">
<a class="header-anchor-link" href="#react%E3%82%84next.js%E3%81%AE%E9%80%B2%E5%8C%96" aria-hidden="true"></a> ReactやNext.jsの進化</h2>
<p>React HooksやNext.jsのISRが登場して話題になったり、Vercel社に著名なエンジニアが多く採用されていたりと、エコシステム全体としての将来性を感じました。<br>
フレームワークとしては数年前までNuxt.jsがリードしていた印象でしたが、近年はNext.jsと大差ないように思います。（用途によっては逆転？）</p>
<h2 id="easy%E3%81%A8simple">
<a class="header-anchor-link" href="#easy%E3%81%A8simple" aria-hidden="true"></a> EasyとSimple</h2>
<p>よく言われることに「VueはEasy、ReactはSimple」というものがあります。<br>
マイベストでVueが導入されていた背景として、当時はチームの人数構成としてバックエンドエンジニアが多かったので、バックエンドエンジニアでも扱いやすい<strong>EasyなVue</strong>を選択していました。</p>
<p>しかし選定当時から状況が変わり、一時期フロントエンドエンジニアが不在の時期が有ったりしました。<br>
そのため、Vueの設計・運用が難航し始め、将来的な設計・運用のしやすさも考えると<strong>Simpleに保ちやすいReact</strong>の方が良さそうに思えました。<br>
※今もバックエンドエンジニアが（任意で）フロントエンドの実装も行います</p>
<h2 id="vue3%E3%81%B8%E3%81%AE%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%B3%E3%82%B9%E3%83%88">
<a class="header-anchor-link" href="#vue3%E3%81%B8%E3%81%AE%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%B3%E3%82%B9%E3%83%88" aria-hidden="true"></a> Vue3への置き換えコスト</h2>
<p>当時Vue2系を使っていたのですが、Vue3が出てきて、「Composition APIは良いぞ」と話題でした。<br>
しかし、少し調べたところ、Vue2→３のバージョンアップはかなり修正コストがかかりそうでした。<br>
Reactに置き換えるのと大差ないのでは？ということになり、ゼロベースで比較検討しました。</p>
<hr>
<p>以上の理由により、メリットが大きくデメリットは小さそうだと判断し、Reactへのリプレイスを決定しました。<br>
※マイベストの技術的な意思決定は、おおよそエンジニア（ないし開発部またはCTO）に一任されています</p>
<hr>
<p>この辺りに参考文献などを置きたかったのですが、手ごろなのが見つけられなかったので、本記事の執筆中に公開された良さげな記事を貼っておきます🙏（？）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d266aa776c089" src="https://embed.zenn.studio/card#zenn-embedded__d266aa776c089" data-content="https%3A%2F%2Fzenn.dev%2Fpoteboy%2Farticles%2Fce47ec05498cfa" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/poteboy/articles/ce47ec05498cfa" style="display:none" target="_blank">https://zenn.dev/poteboy/articles/ce47ec05498cfa</a></p>
<h1 id="%E7%A7%BB%E8%A1%8C%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E3%82%84%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E3%82%84%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> 移行プロセスや工夫したポイント</h1>
<h2 id="%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> ディレクトリについて</h2>
<ul>
<li>src/react/というディレクトリを切りました。
<ul>
<li>Vueと区別し、linterの設定などを柔軟にできるようにしました</li>
<li>ディレクトリの切り方としてイケてないですが、移行期に限定すれば扱いやすかったので良かったかなと思っています</li>
</ul>
</li>
<li>今思えばmonorepoを検討しても良かったと思います</li>
<li>現在は区別の必要が無くなったのでディレクトリ再構成中です</li>
</ul>
<h2 id="apolloclient">
<a class="header-anchor-link" href="#apolloclient" aria-hidden="true"></a> ApolloClient</h2>
<ul>
<li>Vueでも使っていたのですが、Vue依存のライブラリ（vue-apollo）をやめて、API通信部分のロジックを大部分そのままReactでも使えるようにしました
<ul>
<li>（ApolloClientのhookを使うようにしたので、そこは追加実装必要でしたが）</li>
</ul>
</li>
<li>一部axiosを使ってREST APIを叩いていた箇所も全てApolloClient・GraphQLに置き換えました</li>
</ul>
<h2 id="%E7%94%BB%E9%9D%A2%E5%8D%98%E4%BD%8D%E3%81%A7%E3%81%AE%E7%A7%BB%E8%A1%8C">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E5%8D%98%E4%BD%8D%E3%81%A7%E3%81%AE%E7%A7%BB%E8%A1%8C" aria-hidden="true"></a> 画面単位での移行</h2>
<ul>
<li>まず、ビルド環境を整理してVueでもReactでも実装・ビルドできるようにしました</li>
<li>そして移行は画面単位で行うことにしました
<ul>
<li>もともとVueが画面単位で書かれていた（=SPAではなかった）ので、これは簡単でした</li>
</ul>
</li>
<li>これによって、ビックバンリリースを避けつつ、VueとReactが下手に交わらない形で進められました</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E3%83%AC%E3%83%99%E3%83%AB%E3%81%AE%E8%A8%AD%E8%A8%88%E3%81%AF%E3%80%81%E3%81%BE%E3%81%9A1%E3%83%9A%E3%83%BC%E3%82%B8%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E6%A4%9C%E8%A8%8E">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%83%AC%E3%83%99%E3%83%AB%E3%81%AE%E8%A8%AD%E8%A8%88%E3%81%AF%E3%80%81%E3%81%BE%E3%81%9A1%E3%83%9A%E3%83%BC%E3%82%B8%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E6%A4%9C%E8%A8%8E" aria-hidden="true"></a> 実装レベルの設計は、まず1ページ実装しながら検討</h2>
<ul>
<li>設計を考える時に、大まかな構想や一般論ベースの検討はできますが、ドメインに依存したような詳細な設計は簡単では無いと思います
<ul>
<li>そこで、まずは試験的に1ページ実装を始めてしまって、実装しながら細かい設計を行いました</li>
<li>すると、実装前は見えていなかった特殊な要因が見えてきて、それを確認しながら設計を進められるため効率良く進められました</li>
</ul>
</li>
<li>1ページの実装である程度設計を固め、多くの画面で使い回せるコンポーネントや関数を定義し、その後各画面に展開しました</li>
</ul>
<h1 id="%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%A9%E3%81%86%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%8B">
<a class="header-anchor-link" href="#%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%A9%E3%81%86%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%8B" aria-hidden="true"></a> 移行してみてどうだったか</h1>
<h2 id="%E8%A8%AD%E8%A8%88%E3%81%AF%E9%9B%A3%E3%81%97%E3%81%84%E3%81%8C%E3%80%81%E7%A7%BB%E8%A1%8C%E3%81%AF%E3%82%82%E3%81%A3%E3%81%A8%E9%9B%A3%E3%81%97%E3%81%84">
<a class="header-anchor-link" href="#%E8%A8%AD%E8%A8%88%E3%81%AF%E9%9B%A3%E3%81%97%E3%81%84%E3%81%8C%E3%80%81%E7%A7%BB%E8%A1%8C%E3%81%AF%E3%82%82%E3%81%A3%E3%81%A8%E9%9B%A3%E3%81%97%E3%81%84" aria-hidden="true"></a> 設計は難しいが、移行はもっと難しい</h2>
<ul>
<li>移行前提だと、ゼロベースで設計することよりも考慮が必要なポイントが多いです（特に移行途中の対応など）</li>
<li>それに伴い、例えばスケジュールを考える時に、移行期間のことも考慮してかなりの余裕を持たせる必要が有ります（した）</li>
</ul>
<h2 id="react%E7%A7%BB%E8%A1%8C%E5%BE%8C%E3%81%AF%E8%89%B2%E3%80%85%E3%81%A8simple%E3%81%AB%E8%80%83%E3%81%88%E3%82%84%E3%81%99%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F">
<a class="header-anchor-link" href="#react%E7%A7%BB%E8%A1%8C%E5%BE%8C%E3%81%AF%E8%89%B2%E3%80%85%E3%81%A8simple%E3%81%AB%E8%80%83%E3%81%88%E3%82%84%E3%81%99%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F" aria-hidden="true"></a> React移行後は色々とSimpleに考えやすくなりました</h2>
<ul>
<li>品質を上げやすくなった実感があります
<ul>
<li>一例を挙げると、、、
<ul>
<li>hooksを使って副作用を分離しやすく、やはり設計をシンプルに保ちやすい
<ul>
<li>また、custom hooksはコードに統一感が出るため可読性・保守性を高めやすいですね</li>
</ul>
</li>
<li>各種設計論が（公式・個人ともに）ネット上でも活発なので色々と参考にしやすい
<ul>
<li>useEffectのアンチパターンが <a href="https://beta.reactjs.org/learn/you-might-not-need-an-effect" target="_blank" rel="nofollow noopener noreferrer">公式ドキュメントにある</a> など、</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>周辺ツールも使いやすいため、色々と導入が捗っています
<ul>
<li>StorybookやApolloClientを使うときに、Vueプラグイン独自の何かを気にしなくて良くなりました。</li>
<li>ApolloClientのモックを使ってStorybookで画面単位の表示をしたりできています（Vueの時にやろうとしたらかなり時間がかかりそうで断念してました）</li>
</ul>
</li>
<li>何よりReactは楽しい！
<ul>
<li>（※個人の感想です）</li>
</ul>
</li>
</ul>
<h1 id="%E4%BB%8A%E5%BE%8C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 今後について</h1>
<ul>
<li>Next.jsを導入して全画面React化するプロジェクトが動いています（現在は約半分の画面がRailsのslimを使用）
<ul>
<li>i18n対応してグローバル化も見据えています</li>
</ul>
</li>
<li>また、Reactに移行して扱いやすくなったStorybookを使ってフロントエンドのテストを運用し始めています
<ul>
<li>JestやCypressも使っていますが、Storybookが中心になりそうです</li>
</ul>
</li>
</ul>
<p>この辺りはまたの機会にご紹介できればと思っていますが、もしご興味ある方はカジュアル面談も受け付けています！（テーマ設定してますが、別の話でも大丈夫です）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__959d5a9bd3e08" src="https://embed.zenn.studio/card#zenn-embedded__959d5a9bd3e08" data-content="https%3A%2F%2Fmeety.net%2Fmatches%2FfRBeNVvzLqaT" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://meety.net/matches/fRBeNVvzLqaT" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://meety.net/matches/fRBeNVvzLqaT</a></p>
<p>弊社の採用サイトもご興味あれば是非覗いてみてください！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f6ef41622924a" src="https://embed.zenn.studio/card#zenn-embedded__f6ef41622924a" data-content="https%3A%2F%2Fmy-best.com%2Fengineer-recruitment" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://my-best.com/engineer-recruitment" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://my-best.com/engineer-recruitment</a></p>
<p>最後までお読みいただき、ありがとうございました ✨</p>


VueをReactにリプレイスしてEasyからSimpleにした話

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

実装レベルの設計は、まず1ページ実装しながら検討

移行プロセスや工夫したポイント

設計は難しいが、移行はもっと難しい

React移行後は色々とSimpleに考えやすくなりました

Discussion