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
160
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
meijin
April 18, 2024
Tweet
Share
More Decks by meijin
See All by meijin
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
900
個人開発がおすすめな理由
texmeijin
3
850
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
310
初めてESLintプラグインにコントリビュートした話
texmeijin
0
84
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
14
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5k
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
1.3k
初めてエンジニアインターンの育成に取り組んで考えたこと
texmeijin
0
1k
Other Decks in Technology
See All in Technology
20240724_cm_odyssey_hibiyatech
hiashisan
0
120
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
430
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
170
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
1
150
エンジニア向け会社紹介資料
caddi_eng
14
230k
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.7k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Ruby is Unlike a Banana
tanoku
96
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Designing for Performance
lara
604
67k
Code Reviewing Like a Champion
maltzj
517
39k
We Have a Design System, Now What?
morganepeng
46
7k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
How GitHub (no longer) Works
holman
305
140k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
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
このあとの懇親会で喋りましょう! ご清聴ありがとうございました!