小さいチームでもコードのアップデートと新規開発を止めない！

2023年10月17日「経験談から学ぶ　Webフロントエンドリプレイスの進め方LT」登壇資料

Transcript

1. 小さいチームでも コードのアップデートと 新規開発を止めない！ 2023年10月17日 「経験談から学ぶ　Webフロントエンドリプレイスの進め方LT」 株式会社hokan　後藤麻希
2. ・後藤麻希（Maki Goto） ・保険代理店向けSaaSの開発担当 ・2022年3月に株式会社hokanにSWEとして入社（hokan歴約1.5年） ・♡：ピクミンシリーズ（特に２）と坦々麺 誰？
3. 保険業界に特化したSaaS「hokan」をやってます 株式会社hokanについて
4. 伝えたいこと リプレイスには 「短期集中型」と 「長期じわじわ型」の ２種類がある
5. 伝えたいこと リプレイス時にどちらのタイプか 考えるところから始めよう
6. ✅　技術負債の解決をしたいが、 　　タイミングが取れず踏み出せない人 ✅　小規模な開発チーム このLTが役に立ちそうな人 ※すみません！フレームワーク移行はしていないので、話に出てこないです！😔😭
7. 本日の流れ 1. hokan CRM の直近１年のフロントエンドの歴史 2. リプレイス秘話（短期集中編） a. CRA→Vite移行プロジェクト b. サービスワーカーの移行 3. リプレイス秘話（長期じわじわ編） a. moment→date-fns への移行 b. material-ui → mui への移行（バージョン上げ） 4. 終わりに
8. 開発チームについて（メンバー） SWEは６人在籍 うち４名がCRM（hokan）担当
9. 2022/04　モノレポへ移行 2022/05　CIを整えた 2022/06　webpackのバージョン上げるためreact-rewired -> cracoに移行 2022/08　web（react）とmobile（react native）でeslintとprettier のルール統一 全ファイルTS化 2022/09　開発環境のVite移行 done 2022/11　登録ずみのServiceWorkerを削除し、Firebaseで管理する変更をリリース 2023/01　本番環境のVite移行 done 終わり！ 　　　　　ServiceWorker完全削除 2023/02　moment → date-fns移行開始 material-ui → mui 移行開始 hokanのフロントエンドの歴史（直近1年） （⚫）CRA→Vite移行プロジェクト （⚫）ServiceWorker移行プロジェクト
10. 2022/04　モノレポへ移行 2022/05　CIを整えた 2022/06　webpackのバージョン上げるためreact-rewired -> cracoに移行 2022/08　web（react）とmobile（react native）でeslintとprettier のルール統一 全ファイルTS化 2022/09　開発環境のVite移行 done 2022/11　登録ずみのServiceWorkerを削除し、Firebaseで管理する変更をリリース 2023/01　本番環境のVite移行 done 終わり！ 　　　　　ServiceWorker完全削除 2023/02　moment → date-fns移行開始 material-ui → mui 移行開始 hokanのフロントエンドの歴史（直近1年） （⚫）CRA→Vite移行プロジェクト （⚫）ServiceWorker移行プロジェクト
11. hokanのフロントエンドの歴史（直近1年） 短期集中型 CRA→Vite移行プロジェクト ServiceWorker移行プロジェクト
12. 2022/04　モノレポへ移行 2022/05　CIを整えた 2022/06　webpackのバージョン上げるためreact-rewired -> cracoに移行 2022/08　web（react）とmobile（react native）でeslintとprettier のルール統一 全ファイルTS化 2022/09　開発環境のVite移行 done 2022/11　登録ずみのServiceWorkerを削除し、Firebaseで管理する変更をリリース 2023/01　本番環境のVite移行 done 終わり！ 　　　　　ServiceWorker完全削除 2023/02　moment → date-fns移行開始 material-ui → mui 移行開始 hokanのフロントエンドの歴史（直近1年）
13. hokanのフロントエンドの歴史（直近1年） 長期じわじわ型 moment → date-fns material-ui → mui
14. CRA→Vite移行プロジェクト 短期集中型 CRA→Vite移行プロジェクト
15. ・開発体験を上げたい！ モチベーション
16. • 全ファイルts化 • 環境変数のprefix書き換え • viteだと動かないライブラリにpatchを当てた（react-dropzone、redux-form） • webpack v4→v5（キャッシュが効くので結構早くなる） ◦ それまでwebpackを使うためにreact-rewiredを使用していたが、 v5に上げることに伴ってcracoにした 置き換えるためにやったこと（技術的視点）
17. • ts-migrate にて一括置き換え • 型怒られは後から直す 置き換えるためにやったこと（全ファイルts化）
18. • そのままでは動かせなくなるライブラリがあった 置き換えるためにやったこと（patch当て）
19. • 担当者1人をアサインして集中してもらう • レビュー＆各ページの挙動確認はチーム全員で分担して行う 置き換えるためにやったこと（進め方）
20. ServiceWorker移行プロジェクト 短期集中型 ServiceWorker移行プロジェクト
21. • ServiceWorkerだとハンドリングがうまくいかないケースがあった • バージョン更新を確実に管理したい モチベーション
22. • さよならServiceWorker👋 • Firestoreにてバージョンを手動で設定する 置き換えるためにやったこと（技術的視点）
23. • コード本体に埋められているバージョンと、Firestoreからリクエストして得た最新バー ジョンの数字を比較し、差がある場合は更新ダイアログを表示 置き換えるためにやったこと（Firestoreによる手動管理） =
24. • Vite移行プロジェクトとほぼ同じ • 担当者を１人アサインして集中 • レビュー＆各ページの挙動確認はチーム全員で分担して行う 置き換えるためにやったこと（進め方）
25. • 担当者がアサインされることによって、メンバーがそれぞれの開発・リプレイスに集中で きる • リリースタイミングなどビジネスサイドとのすり合わせも窓口がわかりやすい 短期集中型リプレイスのメリット
26. • 担当者が限られるので知見が広がらない • 対策 ◦ 全員で動作確認＆レビューする ◦ 共有会を開く・ドキュメントを書く 短期集中型リプレイスのデメリット
27. 長期じわじわ型リプレイスの話 短期集中型 長期じわじわ型
28. 長期じわじわ型リプレイスの話 moment.js ↓ date-fns
29. • moment.jsは長らくメンテされていないので新しいものにしたかった モチベーション
30. 置き換えるためにやったこと ・計画と進捗の可視化 ・チーム戦でゆるくやる
31. ・notionのプロジェクト管理機能を活用 ・moment.jsをimportしているページをとにかく列挙し、タスクとして起票 計画と進捗の可視化
32. ・担当者は割り振らず、手が空いた人が勝手にとっていくスタイル チーム戦でゆるくやる ↓ここでやる
33. 長期じわじわ型リプレイスの話 material-ui ↓ mui
34. • 古い！ モチベーション
35. 置き換えるためにやったこと ・開発ついで対応作戦 ・声かけ運動
36. ・一気に機械的に置き換えは難しかった ・それぞれの機能開発の中で通りかかったファイルを適宜リファクタ ・リファクタ忘れてる時はPRにて声かけ ゆるく声かけ運動
37. • １つ１つのタスクを細かく独立させることにより、開発と並行して行える • 全員で取り掛かるので知見が共有しやすい 長期じわじわ型リプレイスのメリット
38. • 長期化するので何を持って終わりとするか見えにくい • 対策 ◦ 最初にゴールラインを決めておく ◦ 機能開発優先なので、できなかった場合は割り切る 長期じわじわ型リプレイスのデメリット
39. 伝えたいこと リプレイスには 「短期集中型」と 「長期じわじわ型」の ２種類がある
40. 伝えたいこと 短期集中型のリプレイス →担当者をアサインして集中 長期じわじわ型リプレイス →やることを洗い出して手が空いた人がやる
41. 伝えたいこと リプレイス時にどちらのタイプか 考えるところがはじめの一歩
42. 伝えたいこと ❤
43. hokanは一緒に働くエンジニアを探しています！！ カジュアル面談も大歓迎です！ https://recruit-engineer.hkn.jp/
44. • テックブースト ◦ 技術研鑽・開発効率向上を補助する12万円/年 • リモートワーク可 ◦ チームにより出社は週1〜2の場合もあり • フルフレックス ◦ コアタイム無し • 書籍購入費用補助 エンジニアに特別な福利厚生
45. カジュアル面談をしませんか？