Tweet
Tweet

Slide 1

Slide 1 text

株式会社NoSchool CTO / @meijin サービス黎明期に Nuxt.js v2からNext.js移行を 決めた理由と進め方

Slide 2

Slide 2 text

自己紹介 事業紹介 リプレイスを始めた理由 進め方 その後 アジェンダ

Slide 3

Slide 3 text

自己紹介・事業紹介

Slide 4

Slide 4 text

名人 Twitter(X): 名人｜マナリンクCTO Zenn: https://zenn.dev/meijin 株式会社NoSchool CTO オンライン家庭教師マナリンク(https://manalink.jp/) 個人開発 テストメーカー(https://test-maker.app/) 好きな麻雀の役は一盃口 趣味 将棋☗、カメラ📸、ラム酒🥃、個人開発💻、筋トレ💪 自己紹介

Slide 5

Slide 5 text

社会人の先生を自由に選べるオンライン家庭教師サービス「マナリンク」 株式会社NoSchoolの基幹事業「マナリンク」

Slide 6

Slide 6 text

オンライン×先生を指名できるが売りの家庭教師サービス 先生検索機能 授業予定管理機能 決済機能 指導用のスマホアプリ 単に先生を探せるだけでなく、オンライン家庭教師の仕事を全部デジタル化していくコンセプトなのも珍し い マナリンクってどんなサービス？

Slide 7

Slide 7 text

弊社のNuxtが負債化するまで

Slide 8

Slide 8 text

2018年〜2020年まで 前身の教育事業を運営。盛大に失敗 （ちなみに私は2019年3月入社） 2020年8月〜 会社の資金が尽きそうな中、気合でマナリンクをリリース コロナ禍の世相もあり、以降は着実に売り上げを伸ばしている 前身事業のコードを引き継がざるを得ず、負債がすごい勢いで溜まっていた 2022年4月〜 Nuxt.js2→Next.jsへのリプレイスを開始 株式会社NoSchoolの簡単な来歴

Slide 9

Slide 9 text

1. 開発体験の悪化 2. 事業状況 3. 移行コスト（合計と、細分化の2軸） 4. 開発メンバーの技術力 5. 移行作業中のユーザー悪影響リスク 6. 組織文化 Nuxt→Next.jsリプレイスを始められた理由

Slide 10

Slide 10 text

開発体験の悪化

Slide 11

Slide 11 text

無意味なVuexの濫用 バックエンドエンジニアのために開発したオレオレFormライブラリ（react-jsonschema-formみたいな）が カオス 2020年後半、React Nativeアプリをリリース WebはVue、アプリはReactという脳内コンテキストスイッチ最悪状況 （正直、歴史的経緯でしょうがなくこうなっちゃった！としか説明できない技術選定は撲滅したい気持ちがあ った）（これは感情です） 自社のNuxt.jsの状況

Slide 12

Slide 12 text

2019年〜2020年頃はけっこうNuxt is モダンみたいな世相 ISRの登場あたりからNext.jsが盛り上がる Vue3へのアプデはともかく、Vuetifyの2→3が地獄っぽい噂 世の中的なNuxt.jsの状況

Slide 13

Slide 13 text

事業状況

Slide 14

Slide 14 text

2020年後半、React Nativeアプリをリリース（再掲） 2021年、Next.js製メディアをリリース ISRによってHeadless CMSやSEOとの相性がよく、低コストでメディアをリリースできた 社内のReact導入事例が増える

Slide 15

Slide 15 text

VuetifyがCSSを大量に注入 Purgeも当時は効かずパフォーマンスが明らかに悪かった（一時Lighthouse5点） Vue自体が悪い訳では無いが、Vuetify2系が悪くて、Reactに移行すればついでに解消される説が濃厚だった SEOにLighthouseスコアが反映される噂が流れる

Slide 16

Slide 16 text

合計コスト 細分化コスト 移行コスト

Slide 17

Slide 17 text

全ページを移行すると楽観的に見ても3ヶ月はかかる まだ売上を伸ばしていく時期なので、3ヶ月すら新規開発を止めたくない ただしVue2→Vue3もいずれやらないといけない Vue3移行も足掛け数カ月は掛かりそう どうせ一定のコストはかかる 他の技術的負債と比較して、相対的にコストが小さく見える ↓ Issue：今すぐ移行を始めたいが、新規開発は止めたくない 合計コスト

Slide 18

Slide 18 text

リプレイスをやると嬉しい理由に立ち返ると、段階的にリプレイスでも👍 機能改善がReactに揃って楽になる →逆に言うと機能改善が多いページだけReactになればOK SEOが不安 →逆に言うとSEO的に重要なページだけでOK 段階的にリプレイスするなら、個々のページの移行コストだけを見ればいい 細分化コスト

Slide 19

Slide 19 text

開発メンバーの技術力

Slide 20

Slide 20 text

3名 スタートアップで少人数なので、調整や説得に苦労はしなかった むしろここでReactに統一しないと今後の採用大変だぞ、という感覚 当時の開発メンバー（CTO以外）

Slide 21

Slide 21 text

これまで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の技術力

Slide 22

Slide 22 text

移行作業中のユーザー悪影響リスク

Slide 23

Slide 23 text

段階的なNext.js移行のバグ懸念 Nuxt側のrouter.pushで移行後のページにアクセスしようとして404 ヘッダー等共通コンポーネントがNuxt/Nextで混在 こういった「小さい」バグは許容される事業フェーズ 移行作業中のユーザー悪影響リスク

Slide 24

Slide 24 text

組織文化

Slide 25

Slide 25 text

開発チーム リプレイスを学習機会として捉えてくれる雰囲気 SPAが隠蔽しているところに触れる機会でもあり、ポジティブな側面もあると思っている 全社的に （良い意味で）考えなしの提案はダメだが、考えられてさえいればチャレンジOKという感じの文化 SEOの潮流も踏まえて、ページ単位の移行コストを少しずつ支払う価値を説明できた 組織文化

Slide 26

Slide 26 text

一番最初の移行はどうやったの？

Slide 27

Slide 27 text

そこそこ難易度が高くて、開発頻度が高くて、SEOも大事な画面を選ぶ マナリンクでは「先生一覧」 とりあえず「向こう3ヶ月、毎週金曜日ください」 これって12営業日だけど、実質3ヶ月ですよね？💣💥 エンジニアって寝かせると進捗したりするから 一番最初の移行

Slide 28

Slide 28 text

詳しくは後続のこうたさんからLTしてもらうとして AWSではCloudFrontのパスベースのルーティングを設定し、ローカルではNginxコンテナで設定 これはガチの事業立ち上げ時に頑張っておいてよかった案件 Vercelだったりローカルがlocalhostだとこれできないからね CloudFrontの設定もCDK化して、Nginxコンテナ設定もソースRepoに置くことで、メンバー誰でも段階的 移行に関われるようにした 移行作業

Slide 29

Slide 29 text

あまり無理しない範囲で、バンドルサイズとかLighthouseスコアを重視 パフォーマンスは大事だけど開発体験とのバランスが大事。本当にパフォーマンスだけ見るならAstroと か選ぶからね 主な工夫 Tailwind CSS（安牌） バックエンド通信はPromise.allで並列化 優先度低いコンテンツはCSRする Bundle-AnalyzerをCIにいれる 技術選定

Slide 30

Slide 30 text

その後

Slide 31

Slide 31 text

マナリンク史上最大の機能となる「授業予定管理機能」を半年がかりで開発 Webフロント、アプリ両方Reactで統一できた！ 社内メンバーの学習コストをReact周辺に集中できた！ エコシステムが便利（別にVueにもあるけど） ESLint、Prettier SWR（管理画面系の開発で重宝） MSW×Vitest IDEの解析がよくなり、Renameやフォルダ移動、定義移動など利便性UP ※想定通り、今でもメンテがあまり多くないページはNuxtのままになっている その後

Slide 32

Slide 32 text

まとめ

Slide 33

Slide 33 text

自分たちが置かれている状況と、解決策を様々な視点で洗い出す ことによって、ちょうどいい方法が見つかるかも！ まとめ1

Slide 34

Slide 34 text

Next.js移行で課題が解決したわけではなく、課題を解決できる 土壌が整った まとめ2

Slide 35

Slide 35 text

このあとの懇親会で喋りましょう！ ご清聴ありがとうございました！