Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
Search
meijin
April 18, 2024
Technology
0
390
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
meijin
April 18, 2024
Tweet
Share
More Decks by meijin
See All by meijin
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
texmeijin
1
32
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
25k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
4
2.1k
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.1k
個人開発がおすすめな理由
texmeijin
3
960
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
400
初めてESLintプラグインにコントリビュートした話
texmeijin
0
180
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
83
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.6k
Other Decks in Technology
See All in Technology
Dapr For Java Developers SouJava 25
salaboy
1
130
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
300
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
130
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
Symfony in 2025: Scaling to 0
fabpot
2
210
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
150
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
170
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
110
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
290
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
75
9.3k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Documentation Writing (for coders)
carmenintech
69
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Git: the NoSQL Database
bkeepers
PRO
429
65k
Practical Orchestrator
shlominoach
187
10k
Designing for Performance
lara
606
69k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Review Best Practice
trishagee
67
18k
Transcript
株式会社NoSchool CTO / @meijin サービス黎明期に Nuxt.js v2からNext.js移行を 決めた理由と進め方
自己紹介 事業紹介 リプレイスを始めた理由 進め方 その後 アジェンダ
自己紹介・事業紹介
名人 Twitter(X): 名人|マナリンクCTO Zenn: https://zenn.dev/meijin 株式会社NoSchool CTO オンライン家庭教師マナリンク(https://manalink.jp/) 個人開発 テストメーカー(https://test-maker.app/)
好きな麻雀の役は一盃口 趣味 将棋☗、カメラ📸、ラム酒🥃、個人開発💻、筋トレ💪 自己紹介
社会人の先生を自由に選べるオンライン家庭教師サービス「マナリンク」 株式会社NoSchoolの基幹事業「マナリンク」
オンライン×先生を指名できるが売りの家庭教師サービス 先生検索機能 授業予定管理機能 決済機能 指導用のスマホアプリ 単に先生を探せるだけでなく、オンライン家庭教師の仕事を全部デジタル化していくコンセプトなのも珍し い マナリンクってどんなサービス?
弊社のNuxtが負債化するまで
2018年〜2020年まで 前身の教育事業を運営。盛大に失敗 (ちなみに私は2019年3月入社) 2020年8月〜 会社の資金が尽きそうな中、気合でマナリンクをリリース コロナ禍の世相もあり、以降は着実に売り上げを伸ばしている 前身事業のコードを引き継がざるを得ず、負債がすごい勢いで溜まっていた 2022年4月〜 Nuxt.js2→Next.jsへのリプレイスを開始 株式会社NoSchoolの簡単な来歴
1. 開発体験の悪化 2. 事業状況 3. 移行コスト(合計と、細分化の2軸) 4. 開発メンバーの技術力 5. 移行作業中のユーザー悪影響リスク
6. 組織文化 Nuxt→Next.jsリプレイスを始められた理由
開発体験の悪化
無意味なVuexの濫用 バックエンドエンジニアのために開発したオレオレFormライブラリ(react-jsonschema-formみたいな)が カオス 2020年後半、React Nativeアプリをリリース WebはVue、アプリはReactという脳内コンテキストスイッチ最悪状況 (正直、歴史的経緯でしょうがなくこうなっちゃった!としか説明できない技術選定は撲滅したい気持ちがあ った)(これは感情です) 自社のNuxt.jsの状況
2019年〜2020年頃はけっこうNuxt is モダンみたいな世相 ISRの登場あたりからNext.jsが盛り上がる Vue3へのアプデはともかく、Vuetifyの2→3が地獄っぽい噂 世の中的なNuxt.jsの状況
事業状況
2020年後半、React Nativeアプリをリリース(再掲) 2021年、Next.js製メディアをリリース ISRによってHeadless CMSやSEOとの相性がよく、低コストでメディアをリリースできた 社内のReact導入事例が増える
VuetifyがCSSを大量に注入 Purgeも当時は効かずパフォーマンスが明らかに悪かった(一時Lighthouse5点) Vue自体が悪い訳では無いが、Vuetify2系が悪くて、Reactに移行すればついでに解消される説が濃厚だった SEOにLighthouseスコアが反映される噂が流れる
合計コスト 細分化コスト 移行コスト
全ページを移行すると楽観的に見ても3ヶ月はかかる まだ売上を伸ばしていく時期なので、3ヶ月すら新規開発を止めたくない ただしVue2→Vue3もいずれやらないといけない Vue3移行も足掛け数カ月は掛かりそう どうせ一定のコストはかかる 他の技術的負債と比較して、相対的にコストが小さく見える ↓ Issue:今すぐ移行を始めたいが、新規開発は止めたくない 合計コスト
リプレイスをやると嬉しい理由に立ち返ると、段階的にリプレイスでも👍 機能改善がReactに揃って楽になる →逆に言うと機能改善が多いページだけReactになればOK SEOが不安 →逆に言うとSEO的に重要なページだけでOK 段階的にリプレイスするなら、個々のページの移行コストだけを見ればいい 細分化コスト
開発メンバーの技術力
3名 スタートアップで少人数なので、調整や説得に苦労はしなかった むしろここでReactに統一しないと今後の採用大変だぞ、という感覚 当時の開発メンバー(CTO以外)
これまで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の技術力
移行作業中のユーザー悪影響リスク
段階的なNext.js移行のバグ懸念 Nuxt側のrouter.pushで移行後のページにアクセスしようとして404 ヘッダー等共通コンポーネントがNuxt/Nextで混在 こういった「小さい」バグは許容される事業フェーズ 移行作業中のユーザー悪影響リスク
組織文化
開発チーム リプレイスを学習機会として捉えてくれる雰囲気 SPAが隠蔽しているところに触れる機会でもあり、ポジティブな側面もあると思っている 全社的に (良い意味で)考えなしの提案はダメだが、考えられてさえいればチャレンジOKという感じの文化 SEOの潮流も踏まえて、ページ単位の移行コストを少しずつ支払う価値を説明できた 組織文化
一番最初の移行はどうやったの?
そこそこ難易度が高くて、開発頻度が高くて、SEOも大事な画面を選ぶ マナリンクでは「先生一覧」 とりあえず「向こう3ヶ月、毎週金曜日ください」 これって12営業日だけど、実質3ヶ月ですよね?💣💥 エンジニアって寝かせると進捗したりするから 一番最初の移行
詳しくは後続のこうたさんからLTしてもらうとして AWSではCloudFrontのパスベースのルーティングを設定し、ローカルではNginxコンテナで設定 これはガチの事業立ち上げ時に頑張っておいてよかった案件 Vercelだったりローカルがlocalhostだとこれできないからね CloudFrontの設定もCDK化して、Nginxコンテナ設定もソースRepoに置くことで、メンバー誰でも段階的 移行に関われるようにした 移行作業
あまり無理しない範囲で、バンドルサイズとかLighthouseスコアを重視 パフォーマンスは大事だけど開発体験とのバランスが大事。本当にパフォーマンスだけ見るならAstroと か選ぶからね 主な工夫 Tailwind CSS(安牌) バックエンド通信はPromise.allで並列化 優先度低いコンテンツはCSRする Bundle-AnalyzerをCIにいれる 技術選定
その後
マナリンク史上最大の機能となる「授業予定管理機能」を半年がかりで開発 Webフロント、アプリ両方Reactで統一できた! 社内メンバーの学習コストをReact周辺に集中できた! エコシステムが便利(別にVueにもあるけど) ESLint、Prettier SWR(管理画面系の開発で重宝) MSW×Vitest IDEの解析がよくなり、Renameやフォルダ移動、定義移動など利便性UP ※想定通り、今でもメンテがあまり多くないページはNuxtのままになっている その後
まとめ
自分たちが置かれている状況と、解決策を様々な視点で洗い出す ことによって、ちょうどいい方法が見つかるかも! まとめ1
Next.js移行で課題が解決したわけではなく、課題を解決できる 土壌が整った まとめ2
このあとの懇親会で喋りましょう! ご清聴ありがとうございました!