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
220
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
meijin
April 18, 2024
Tweet
Share
More Decks by meijin
See All by meijin
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.2k
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
960
個人開発がおすすめな理由
texmeijin
3
880
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
330
初めてESLintプラグインにコントリビュートした話
texmeijin
0
100
先生と一緒に プロダクトを良くする アナリティクス機能の開発
texmeijin
0
21
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.1k
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
1.4k
初めてエンジニアインターンの育成に取り組んで考えたこと
texmeijin
0
1k
Other Decks in Technology
See All in Technology
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
240
自作Cコンパイラ 8時間の奮闘
soukouki
0
770
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
400
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
300
DevRelの始め方
moongift
PRO
1
310
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
190
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
150
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.5k
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
190
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
180
Mocking in Rust Applications
taiki45
1
390
効果的なオンコール対応と障害対応
ryuichi1208
5
2.8k
Featured
See All Featured
KATA
mclloyd
27
13k
Atom: Resistance is Futile
akmur
261
25k
Making Projects Easy
brettharned
113
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Optimizing for Happiness
mojombo
375
69k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
It's Worth the Effort
3n
182
27k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Embracing the Ebb and Flow
colly
83
4.4k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
A Tale of Four Properties
chriscoyier
155
22k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
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
このあとの懇親会で喋りましょう! ご清聴ありがとうございました!