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
開発メンバーから見たマナリンクFEリプレース
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kota Ogawa
April 18, 2024
Programming
160
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
開発メンバーから見たマナリンクFEリプレース
Kota Ogawa
April 18, 2024
Other Decks in Programming
See All in Programming
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
260
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
ming_ayami
0
130
ふつうのFeature Flag実践入門
irof
8
4k
Agentic UI
manfredsteyer
PRO
0
180
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
niftycorp
PRO
0
210
フロントエンドとバックエンドで「1文字」を揃えよう
youkidearitai
PRO
0
710
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
geekplus_tech
0
400
Contextとはなにか
chiroruxx
1
330
TAKTでAI駆動開発の品質を設計する
j5ik2o
7
1.4k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
4.3k
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
170
Go1.27で導入されるジェネリクスメソッドでできること
mackee
0
140
Featured
See All Featured
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Building Adaptive Systems
keathley
44
3.1k
How to train your dragon (web standard)
notwaldorf
97
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
Building the Perfect Custom Keyboard
takai
2
800
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
Discover your Explorer Soul
emna__ayadi
2
1.1k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.7k
The Curious Case for Waylosing
cassininazir
1
390
Color Theory Basics | Prateek | Gurzu
gurzu
0
370
How to build a perfect <img>
jonoalderson
1
5.7k
Transcript
開発メンバーから⾒たマナリンクFEリプレース 株式会社NoSchool / kou
• ⾃⼰紹介 • Nuxt2からNext.jsへの移⾏⼿順 • Nextリプレースについて⼊社当時に思っていたこと • 今改めて振り返る、Nextリプレースしていて良かったこと • Nextリプレースの⼤変なところとか苦労
• まとめ ⽬次
⾃⼰紹介
• kou(X:@ogakuzuko) ◦ NoSchoolに⼊社して1年9ヶ⽉ぐらい(2022年8⽉⼊社) • NoSchoolでの開発 ◦ オンライン家庭教師マナリンクの開発を担当 ◦ フロントエンド(Nuxt,
Next) / アプリ(RN) / バックエンド(Laravel) • その他 ◦ ⼈⽣初のLT登壇です…! ◦ aikoが好き(今公開しているコナンの映画の主題歌歌ってます😻) ⾃⼰紹介
Nuxt2からNext.jsへの移⾏⼿順
• NuxtからNextへのリプレース作業は、⼀度に全ての画⾯/機能をNext移⾏するのではな く、画⾯のパス単位で段階的に移⾏する⽅針で進めていった ◦ このあたりの詳細な意思決定の判断はCTOの発表の通り • NuxtとNextの画⾯の振り分けは、ローカルの開発環境ではNginxコンテナが、ステージン グ環境以降ではAmazon CloudFrontがその振り分けを担っている ◦
詳細は次のスライド以降 Nuxt2からNext.jsへの段階的なリプレース
• ローカルの開発環境では、 Docker上のNginxコンテナ をリバースプロキシとして ⽤いることで、 Nuxtの画⾯とNextの画⾯の 振り分けを実現している 段階的リプレースの作業⼿順(Local)
• ステージング環境以降では、 Amazon CloudFrontのビヘイビア 設定を⽤いて、Nuxtの画⾯と Nextの画⾯の振り分けを実現 • また、このCloudFrontの設定は、 AWS CDKで管理されているため、
インフラに詳しくなくとも Nextへの移⾏作業を進めることが 可能 段階的リプレースの作業⼿順(Staging/Production)
• 以下のことやそれ以外で気になることがある⽅は、ぜひ懇親会等でお話しましょう! より詳細な話は社内勉強会などでできるかも🤭 ◦ ローカル開発環境ではNginxコンテナでNuxtとNextの振り分けを⾏なっているって 具体的にどういうこと? ◦ Nuxt.jsとNext.jsはそれぞれどこにデプロイしているの? ◦ パス単位で移⾏ってより具体的にはどういうこと?
◦ 実際のNext移⾏作業の際にあったミスの話とかあれば聞きたい! ◦ などなど とはいえここで全て説明するには余⽩が狭すぎるので…
Nextリプレースについて⼊社当時に思っていたこと
(正直)とくになにも思ってませんでした…☺ (というかそこまで意識が回ってなかった…)
• というのも…、Nextリプレースの時系列は以下のような感じだった Nextリプレースの時系列
• 😹 マナリンクのドメイン知識を覚える⽅がまずは⼤事〜〜〜 • 😹 ⼊社1ヶ⽉で⽇々の技術キャッチアップでいっぱいいっぱい〜〜〜 • 😹 Vue2はまだわかるけどNuxt2とVue3(Composition API)の書き⽅ワカラン〜〜
• 😻 React/Next関係は個⼈で触っていたのでこのあたりのキャッチアップは⼀旦省けるの 嬉しい〜〜〜 • 😻 Reactの⽅がまだ慣れているのでReact書けるの嬉しい〜〜〜 • 😻 ⽣CSS書くの苦しいマンなのでTailwindありがたい〜〜〜〜 • 😻 NginxとかCDKとかよくわからないけどNextに移⾏したいパスを追加指定するとNext に向くのすごい〜〜〜〜〜〜 • 😹 それよりもサーバーサイドがやばい〜〜〜〜〜〜 当時の気持ち(⼊社1ヶ⽉とか)
今改めて振り返る、Nextリプレースしていて良かったこと
• 新規に作る機能はNext(React)で初めから開発することができる! ◦ このおかげで、⽐較的⼤規模な新機能開発の際にもNext(React)を使⽤して開発することができた ◦ また、Webとアプリで同じ機能を実装する際の開発効率が爆上がりした • 社内勉強会の際にReactの話題を話すことができる ◦ Reactだと⾃分でも技術記事を書いたこともあるので、話題に出しやすいので嬉しい。笑
• 移⾏を積み重ねながら少しずつ改善をしていくことができる(いきなりベストプラクティ スを求めなくていい) • 移⾏に際しての⼼理的な⾯での負担がフルリプレースよりも軽い 段階的なリプレースであったからこその良かったこと
Nextリプレースの⼤変なところとか苦労
• 普段の機能開発の際にNuxt2(Vue2)とNext(React)両⽅のキャッチアップが必要になる ◦ Vue2系とReactでは書き⽅以前に考え⽅にも違いがあり、コードを読む際の認知負荷も⾼い ◦ ただ、基本的には改修頻度の⾼い箇所からNextへリプレースが進められているので、リプレースが進む につれてNuxt(Vue)を触る頻度は減っていく傾向にはある • 移⾏し終わったからとすぐにNuxtの画⾯を削除できるわけではない ◦
nuxt-routerなどでの遷移が残っている場合などに404になってしまう(実際に漏れる) • Nuxt(Vue)とNext(React)の双⽅を修正しないと変更が漏れる場合がある(ヘッダーとか) • ESLintなどの設定や、aspidaの型など、NuxtとNextで2重管理になるファイルが出てしまう 段階的リプレースであることによる⼤変なところ
まとめ
VueとReactをどっちもさわれるの、個⼈的にはとても楽しい🤤
ご清聴ありがとうございました☺