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

by Maki Goto

Slide 1

Slide 1 text

小さいチームでもコードのアップデートと新規開発を止めない！ 2023年10月17日「経験談から学ぶ　Webフロントエンドリプレイスの進め方LT」株式会社hokan　後藤麻希

Slide 2

Slide 2 text

・後藤麻希（Maki Goto）・保険代理店向けSaaSの開発担当・2022年3月に株式会社hokanにSWEとして入社（hokan歴約1.5年）・♡：ピクミンシリーズ（特に２）と坦々麺誰？

Slide 3

Slide 3 text

保険業界に特化したSaaS「hokan」をやってます株式会社hokanについて

Slide 4

Slide 4 text

伝えたいことリプレイスには「短期集中型」と「長期じわじわ型」の２種類がある

Slide 5

Slide 5 text

伝えたいことリプレイス時にどちらのタイプか考えるところから始めよう

Slide 6

Slide 6 text

✅　技術負債の解決をしたいが、　　タイミングが取れず踏み出せない人 ✅　小規模な開発チームこのLTが役に立ちそうな人 ※すみません！フレームワーク移行はしていないので、話に出てこないです！😔😭

Slide 7

Slide 7 text

本日の流れ 1. hokan CRM の直近１年のフロントエンドの歴史 2. リプレイス秘話（短期集中編） a. CRA→Vite移行プロジェクト b. サービスワーカーの移行 3. リプレイス秘話（長期じわじわ編） a. moment→date-fns への移行 b. material-ui → mui への移行（バージョン上げ） 4. 終わりに

Slide 8

Slide 8 text

開発チームについて（メンバー） SWEは６人在籍うち４名がCRM（hokan）担当

Slide 9

Slide 9 text

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移行プロジェクト

Slide 10

Slide 10 text

Slide 11

Slide 11 text

hokanのフロントエンドの歴史（直近1年）短期集中型 CRA→Vite移行プロジェクト ServiceWorker移行プロジェクト

Slide 12

Slide 12 text

Slide 13

Slide 13 text

hokanのフロントエンドの歴史（直近1年）長期じわじわ型 moment → date-fns material-ui → mui

Slide 14

Slide 14 text

CRA→Vite移行プロジェクト短期集中型 CRA→Vite移行プロジェクト

Slide 15

Slide 15 text

・開発体験を上げたい！モチベーション

Slide 16

Slide 16 text

● 全ファイルts化 ● 環境変数のprefix書き換え ● viteだと動かないライブラリにpatchを当てた（react-dropzone、redux-form） ● webpack v4→v5（キャッシュが効くので結構早くなる） ○ それまでwebpackを使うためにreact-rewiredを使用していたが、 v5に上げることに伴ってcracoにした置き換えるためにやったこと（技術的視点）

Slide 17

Slide 17 text

● ts-migrate にて一括置き換え ● 型怒られは後から直す置き換えるためにやったこと（全ファイルts化）

Slide 18

Slide 18 text

● そのままでは動かせなくなるライブラリがあった置き換えるためにやったこと（patch当て）

Slide 19

Slide 19 text

● 担当者1人をアサインして集中してもらう ● レビュー＆各ページの挙動確認はチーム全員で分担して行う置き換えるためにやったこと（進め方）

Slide 20

Slide 20 text

ServiceWorker移行プロジェクト短期集中型 ServiceWorker移行プロジェクト

Slide 21

Slide 21 text

● ServiceWorkerだとハンドリングがうまくいかないケースがあった ● バージョン更新を確実に管理したいモチベーション

Slide 22

Slide 22 text

● さよならServiceWorker👋 ● Firestoreにてバージョンを手動で設定する置き換えるためにやったこと（技術的視点）

Slide 23

Slide 23 text

● コード本体に埋められているバージョンと、Firestoreからリクエストして得た最新バージョンの数字を比較し、差がある場合は更新ダイアログを表示置き換えるためにやったこと（Firestoreによる手動管理） =

Slide 24

Slide 24 text

● Vite移行プロジェクトとほぼ同じ ● 担当者を１人アサインして集中 ● レビュー＆各ページの挙動確認はチーム全員で分担して行う置き換えるためにやったこと（進め方）

Slide 25

Slide 25 text

● 担当者がアサインされることによって、メンバーがそれぞれの開発・リプレイスに集中できる ● リリースタイミングなどビジネスサイドとのすり合わせも窓口がわかりやすい短期集中型リプレイスのメリット

Slide 26

Slide 26 text

● 担当者が限られるので知見が広がらない ● 対策 ○ 全員で動作確認＆レビューする ○ 共有会を開く・ドキュメントを書く短期集中型リプレイスのデメリット

Slide 27

Slide 27 text

長期じわじわ型リプレイスの話短期集中型長期じわじわ型

Slide 28

Slide 28 text

長期じわじわ型リプレイスの話 moment.js ↓ date-fns

Slide 29

Slide 29 text

● moment.jsは長らくメンテされていないので新しいものにしたかったモチベーション

Slide 30

Slide 30 text

置き換えるためにやったこと・計画と進捗の可視化・チーム戦でゆるくやる

Slide 31

Slide 31 text

・notionのプロジェクト管理機能を活用・moment.jsをimportしているページをとにかく列挙し、タスクとして起票計画と進捗の可視化

Slide 32

Slide 32 text

・担当者は割り振らず、手が空いた人が勝手にとっていくスタイルチーム戦でゆるくやる ↓ここでやる

Slide 33

Slide 33 text

長期じわじわ型リプレイスの話 material-ui ↓ mui

Slide 34

Slide 34 text

● 古い！モチベーション

Slide 35

Slide 35 text

置き換えるためにやったこと・開発ついで対応作戦・声かけ運動

Slide 36

Slide 36 text

・一気に機械的に置き換えは難しかった・それぞれの機能開発の中で通りかかったファイルを適宜リファクタ・リファクタ忘れてる時はPRにて声かけゆるく声かけ運動

Slide 37

Slide 37 text

● １つ１つのタスクを細かく独立させることにより、開発と並行して行える ● 全員で取り掛かるので知見が共有しやすい長期じわじわ型リプレイスのメリット

Slide 38

Slide 38 text

● 長期化するので何を持って終わりとするか見えにくい ● 対策 ○ 最初にゴールラインを決めておく ○ 機能開発優先なので、できなかった場合は割り切る長期じわじわ型リプレイスのデメリット

Slide 39

Slide 39 text

伝えたいことリプレイスには「短期集中型」と「長期じわじわ型」の２種類がある

Slide 40

Slide 40 text

伝えたいこと短期集中型のリプレイス →担当者をアサインして集中長期じわじわ型リプレイス →やることを洗い出して手が空いた人がやる

Slide 41

Slide 41 text

伝えたいことリプレイス時にどちらのタイプか考えるところがはじめの一歩

Slide 42

Slide 42 text

伝えたいこと ❤

Slide 43

Slide 43 text

hokanは一緒に働くエンジニアを探しています！！カジュアル面談も大歓迎です！ https://recruit-engineer.hkn.jp/

Slide 44

Slide 44 text

● テックブースト ○ 技術研鑽・開発効率向上を補助する12万円/年 ● リモートワーク可 ○ チームにより出社は週1〜2の場合もあり ● フルフレックス ○ コアタイム無し ● 書籍購入費用補助エンジニアに特別な福利厚生

Slide 45

Slide 45 text

カジュアル面談をしませんか？