サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方

Transcript

1. 株式会社NoSchool CTO / @meijin サービス黎明期に Nuxt.js v2からNext.js移行を 決めた理由と進め方
2. 自己紹介 事業紹介 リプレイスを始めた理由 進め方 その後 アジェンダ
3. 自己紹介・事業紹介
4. 名人 Twitter(X): 名人｜マナリンクCTO Zenn: https://zenn.dev/meijin 株式会社NoSchool CTO オンライン家庭教師マナリンク(https://manalink.jp/) 個人開発 テストメーカー(https://test-maker.app/) 好きな麻雀の役は一盃口 趣味 将棋☗、カメラ📸、ラム酒🥃、個人開発💻、筋トレ💪 自己紹介
5. 社会人の先生を自由に選べるオンライン家庭教師サービス「マナリンク」 株式会社NoSchoolの基幹事業「マナリンク」
6. オンライン×先生を指名できるが売りの家庭教師サービス 先生検索機能 授業予定管理機能 決済機能 指導用のスマホアプリ 単に先生を探せるだけでなく、オンライン家庭教師の仕事を全部デジタル化していくコンセプトなのも珍し い マナリンクってどんなサービス？
7. 弊社のNuxtが負債化するまで
8. 2018年〜2020年まで 前身の教育事業を運営。盛大に失敗 （ちなみに私は2019年3月入社） 2020年8月〜 会社の資金が尽きそうな中、気合でマナリンクをリリース コロナ禍の世相もあり、以降は着実に売り上げを伸ばしている 前身事業のコードを引き継がざるを得ず、負債がすごい勢いで溜まっていた 2022年4月〜 Nuxt.js2→Next.jsへのリプレイスを開始 株式会社NoSchoolの簡単な来歴
9. 1. 開発体験の悪化 2. 事業状況 3. 移行コスト（合計と、細分化の2軸） 4. 開発メンバーの技術力 5. 移行作業中のユーザー悪影響リスク 6. 組織文化 Nuxt→Next.jsリプレイスを始められた理由
10. 開発体験の悪化
11. 無意味なVuexの濫用 バックエンドエンジニアのために開発したオレオレFormライブラリ（react-jsonschema-formみたいな）が カオス 2020年後半、React Nativeアプリをリリース WebはVue、アプリはReactという脳内コンテキストスイッチ最悪状況 （正直、歴史的経緯でしょうがなくこうなっちゃった！としか説明できない技術選定は撲滅したい気持ちがあ った）（これは感情です） 自社のNuxt.jsの状況
12. 2019年〜2020年頃はけっこうNuxt is モダンみたいな世相 ISRの登場あたりからNext.jsが盛り上がる Vue3へのアプデはともかく、Vuetifyの2→3が地獄っぽい噂 世の中的なNuxt.jsの状況
13. 事業状況
14. 2020年後半、React Nativeアプリをリリース（再掲） 2021年、Next.js製メディアをリリース ISRによってHeadless CMSやSEOとの相性がよく、低コストでメディアをリリースできた 社内のReact導入事例が増える
15. VuetifyがCSSを大量に注入 Purgeも当時は効かずパフォーマンスが明らかに悪かった（一時Lighthouse5点） Vue自体が悪い訳では無いが、Vuetify2系が悪くて、Reactに移行すればついでに解消される説が濃厚だった SEOにLighthouseスコアが反映される噂が流れる
16. 合計コスト 細分化コスト 移行コスト
17. 全ページを移行すると楽観的に見ても3ヶ月はかかる まだ売上を伸ばしていく時期なので、3ヶ月すら新規開発を止めたくない ただしVue2→Vue3もいずれやらないといけない Vue3移行も足掛け数カ月は掛かりそう どうせ一定のコストはかかる 他の技術的負債と比較して、相対的にコストが小さく見える ↓ Issue：今すぐ移行を始めたいが、新規開発は止めたくない 合計コスト
18. リプレイスをやると嬉しい理由に立ち返ると、段階的にリプレイスでも👍 機能改善がReactに揃って楽になる →逆に言うと機能改善が多いページだけReactになればOK SEOが不安 →逆に言うとSEO的に重要なページだけでOK 段階的にリプレイスするなら、個々のページの移行コストだけを見ればいい 細分化コスト
19. 開発メンバーの技術力
20. 3名 スタートアップで少人数なので、調整や説得に苦労はしなかった むしろここでReactに統一しないと今後の採用大変だぞ、という感覚 当時の開発メンバー（CTO以外）
21. これまでReactはおろかVueも独学でやってきた 新卒入社の会社はjQuery Vueは個人開発で勉強してFlux is 何みたいなところからスタートした 発信を頑張って自信をつけた Next.js に Zero-runtime CSS in JS の linaria を導入する（LT登壇） Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件（1,900Like 超え） ViteのTemplateリポジトリを作り込んだらawesome-viteに掲載してもらった！（200Star 超え） Zennはすごい 登壇も楽しい CTOの技術力
22. 移行作業中のユーザー悪影響リスク
23. 段階的なNext.js移行のバグ懸念 Nuxt側のrouter.pushで移行後のページにアクセスしようとして404 ヘッダー等共通コンポーネントがNuxt/Nextで混在 こういった「小さい」バグは許容される事業フェーズ 移行作業中のユーザー悪影響リスク
24. 組織文化
25. 開発チーム リプレイスを学習機会として捉えてくれる雰囲気 SPAが隠蔽しているところに触れる機会でもあり、ポジティブな側面もあると思っている 全社的に （良い意味で）考えなしの提案はダメだが、考えられてさえいればチャレンジOKという感じの文化 SEOの潮流も踏まえて、ページ単位の移行コストを少しずつ支払う価値を説明できた 組織文化
26. 一番最初の移行はどうやったの？
27. そこそこ難易度が高くて、開発頻度が高くて、SEOも大事な画面を選ぶ マナリンクでは「先生一覧」 とりあえず「向こう3ヶ月、毎週金曜日ください」 これって12営業日だけど、実質3ヶ月ですよね？💣💥 エンジニアって寝かせると進捗したりするから 一番最初の移行
28. 詳しくは後続のこうたさんからLTしてもらうとして AWSではCloudFrontのパスベースのルーティングを設定し、ローカルではNginxコンテナで設定 これはガチの事業立ち上げ時に頑張っておいてよかった案件 Vercelだったりローカルがlocalhostだとこれできないからね CloudFrontの設定もCDK化して、Nginxコンテナ設定もソースRepoに置くことで、メンバー誰でも段階的 移行に関われるようにした 移行作業
29. あまり無理しない範囲で、バンドルサイズとかLighthouseスコアを重視 パフォーマンスは大事だけど開発体験とのバランスが大事。本当にパフォーマンスだけ見るならAstroと か選ぶからね 主な工夫 Tailwind CSS（安牌） バックエンド通信はPromise.allで並列化 優先度低いコンテンツはCSRする Bundle-AnalyzerをCIにいれる 技術選定
30. その後
31. マナリンク史上最大の機能となる「授業予定管理機能」を半年がかりで開発 Webフロント、アプリ両方Reactで統一できた！ 社内メンバーの学習コストをReact周辺に集中できた！ エコシステムが便利（別にVueにもあるけど） ESLint、Prettier SWR（管理画面系の開発で重宝） MSW×Vitest IDEの解析がよくなり、Renameやフォルダ移動、定義移動など利便性UP ※想定通り、今でもメンテがあまり多くないページはNuxtのままになっている その後
32. まとめ
33. 自分たちが置かれている状況と、解決策を様々な視点で洗い出す ことによって、ちょうどいい方法が見つかるかも！ まとめ1
34. Next.js移行で課題が解決したわけではなく、課題を解決できる 土壌が整った まとめ2
35. このあとの懇親会で喋りましょう！ ご清聴ありがとうございました！