開発メンバーから見たマナリンクFEリプレース

Transcript

1. 開発メンバーから⾒たマナリンクFEリプレース 株式会社NoSchool / kou
2. • ⾃⼰紹介 • Nuxt2からNext.jsへの移⾏⼿順 • Nextリプレースについて⼊社当時に思っていたこと • 今改めて振り返る、Nextリプレースしていて良かったこと • Nextリプレースの⼤変なところとか苦労 • まとめ ⽬次
3. ⾃⼰紹介
4. • kou（X：@ogakuzuko） ◦ NoSchoolに⼊社して1年9ヶ⽉ぐらい（2022年8⽉⼊社） • NoSchoolでの開発 ◦ オンライン家庭教師マナリンクの開発を担当 ◦ フロントエンド(Nuxt, Next) / アプリ(RN) / バックエンド(Laravel) • その他 ◦ ⼈⽣初のLT登壇です…! ◦ aikoが好き（今公開しているコナンの映画の主題歌歌ってます😻） ⾃⼰紹介
5. Nuxt2からNext.jsへの移⾏⼿順
6. • NuxtからNextへのリプレース作業は、⼀度に全ての画⾯/機能をNext移⾏するのではな く、画⾯のパス単位で段階的に移⾏する⽅針で進めていった ◦ このあたりの詳細な意思決定の判断はCTOの発表の通り • NuxtとNextの画⾯の振り分けは、ローカルの開発環境ではNginxコンテナが、ステージン グ環境以降ではAmazon CloudFrontがその振り分けを担っている ◦ 詳細は次のスライド以降 Nuxt2からNext.jsへの段階的なリプレース
7. • ローカルの開発環境では、 Docker上のNginxコンテナ をリバースプロキシとして ⽤いることで、 Nuxtの画⾯とNextの画⾯の 振り分けを実現している 段階的リプレースの作業⼿順（Local）
8. • ステージング環境以降では、 Amazon CloudFrontのビヘイビア 設定を⽤いて、Nuxtの画⾯と Nextの画⾯の振り分けを実現 • また、このCloudFrontの設定は、 AWS CDKで管理されているため、 インフラに詳しくなくとも Nextへの移⾏作業を進めることが 可能 段階的リプレースの作業⼿順（Staging/Production）
9. • 以下のことやそれ以外で気になることがある⽅は、ぜひ懇親会等でお話しましょう！ より詳細な話は社内勉強会などでできるかも🤭 ◦ ローカル開発環境ではNginxコンテナでNuxtとNextの振り分けを⾏なっているって 具体的にどういうこと？ ◦ Nuxt.jsとNext.jsはそれぞれどこにデプロイしているの？ ◦ パス単位で移⾏ってより具体的にはどういうこと？ ◦ 実際のNext移⾏作業の際にあったミスの話とかあれば聞きたい！ ◦ などなど とはいえここで全て説明するには余⽩が狭すぎるので…
10. Nextリプレースについて⼊社当時に思っていたこと
11. (正直)とくになにも思ってませんでした…☺ (というかそこまで意識が回ってなかった…)
12. • というのも…、Nextリプレースの時系列は以下のような感じだった Nextリプレースの時系列
13. • 😹 マナリンクのドメイン知識を覚える⽅がまずは⼤事〜〜〜 • 😹 ⼊社1ヶ⽉で⽇々の技術キャッチアップでいっぱいいっぱい〜〜〜 • 😹 Vue2はまだわかるけどNuxt2とVue3(Composition API)の書き⽅ワカラン〜〜 • 😻 React/Next関係は個⼈で触っていたのでこのあたりのキャッチアップは⼀旦省けるの 嬉しい〜〜〜 • 😻 Reactの⽅がまだ慣れているのでReact書けるの嬉しい〜〜〜 • 😻 ⽣CSS書くの苦しいマンなのでTailwindありがたい〜〜〜〜 • 😻 NginxとかCDKとかよくわからないけどNextに移⾏したいパスを追加指定するとNext に向くのすごい〜〜〜〜〜〜 • 😹 それよりもサーバーサイドがやばい〜〜〜〜〜〜 当時の気持ち(⼊社1ヶ⽉とか)
14. 今改めて振り返る、Nextリプレースしていて良かったこと
15. • 新規に作る機能はNext(React)で初めから開発することができる！ ◦ このおかげで、⽐較的⼤規模な新機能開発の際にもNext(React)を使⽤して開発することができた ◦ また、Webとアプリで同じ機能を実装する際の開発効率が爆上がりした • 社内勉強会の際にReactの話題を話すことができる ◦ Reactだと⾃分でも技術記事を書いたこともあるので、話題に出しやすいので嬉しい。笑 • 移⾏を積み重ねながら少しずつ改善をしていくことができる（いきなりベストプラクティ スを求めなくていい） • 移⾏に際しての⼼理的な⾯での負担がフルリプレースよりも軽い 段階的なリプレースであったからこその良かったこと
16. Nextリプレースの⼤変なところとか苦労
17. • 普段の機能開発の際にNuxt2(Vue2)とNext(React)両⽅のキャッチアップが必要になる ◦ Vue2系とReactでは書き⽅以前に考え⽅にも違いがあり、コードを読む際の認知負荷も⾼い ◦ ただ、基本的には改修頻度の⾼い箇所からNextへリプレースが進められているので、リプレースが進む につれてNuxt(Vue)を触る頻度は減っていく傾向にはある • 移⾏し終わったからとすぐにNuxtの画⾯を削除できるわけではない ◦ nuxt-routerなどでの遷移が残っている場合などに404になってしまう（実際に漏れる） • Nuxt(Vue)とNext(React)の双⽅を修正しないと変更が漏れる場合がある（ヘッダーとか） • ESLintなどの設定や、aspidaの型など、NuxtとNextで2重管理になるファイルが出てしまう 段階的リプレースであることによる⼤変なところ
18. まとめ
19. VueとReactをどっちもさわれるの、個⼈的にはとても楽しい🤤
20. ご清聴ありがとうございました☺