いちエンジニアVueからReactへの乗り換えを提案し成し遂げた話

Transcript

1. © 2023 Techtouch. いちエンジニアがVueからReactへの 乗り換えを提案し成し遂げた話 2023/10/18
2. 2 © 2023 Techtouch. 自己紹介 Taka @takakobejp • 前職：Sonyグループ ◦ React Nativeを使ったアプリケーション開発 ◦ スクラムマスター • 現職：テックタッチ ◦ フロントエンドエンジニア ◦ 今年度からフロントエンドチームのテックリード ◦ 4年前にVueからReactへの乗り換えをリード • ReactとTypescriptが大好き
3. 3 © 2023 Techtouch. 今回お話すること • 当時いちエンジニアだった自分がどうやってVueからReactへの置き換えを成し遂げたか • 成し遂げることができた要因は何だったのか 　※技術的な話ではなくプロセスの話がメインです
4. テックタッチ（プロダクト）のご紹介
5. 5 © 2023 Techtouch. テックタッチとは 操作
 ガイド
 作成
 システム画面上でかんたんにできる
 操 作 ガ イ ド の 作 成 も 表 示 も 問い合わせが多く
 分かりにくいシステム 
 誰もが使える
 システムへ！
 利用者の体感を最重視したリアルタイムの操作ガイドで、 システムの使い方が分からないを払拭。 
 操作ガイドはプログラミング不要で、システムの画面上 でかんたんに作成可能。 
 入力チェックや条件分岐にも対応。 
 システム利用者
 システム管理者
 システム改修不要

6. どうVueからReactへの乗り換えを実現したか
7. 7 © 2023 Techtouch. どう実現したか 課題感をもとに改善案をイメージ 7 => いろいろ考えた末、今後のことを考えるとReactでゼロベースから作り直すのが良さそう デグレ頻度が高いな テストコードが 不十分だな 利用しているライブラ リの拡張性が低いな コードが型安全に なってないな 課 題 感 など など など • デグレを減らすためにはテストが必要だ • デグレの原因は設計にありそうだ • テストを充実させるためにテスタビリティが高い設計にしなければ • 設計を変えるとなるとほぼ書き直さないといけないな • Reactだとより型安全に作れそうだし、拡張性が高いライブラリがあるのでそれが使えそう • Reactだと細かいカスタマイズができるそうだな、などなど 改 善 案
8. 8 © 2023 Techtouch. どう実現したか 最低限動くものを作ってみた 8 みんなの反応 • ←実際にReactで作ったもの • ソリューションにより確信が持てるよ うになった • 考慮不足な箇所も明確に • 一部の人にも見せた
9. 9 © 2023 Techtouch. どう実現したか いけそうな感じがしたので積極的に布教活動をした 9 みんなの反応 • 資料を作成しプレゼン • Slackや対面で継続的に情報共有 • VueとReactの違い • React版で改善される点、など
10. 10 © 2023 Techtouch. どう実現したか React化検討のSlackチャンネルも作り、気合を入れた提案資料も作った 10 みんなの反応 • ユーザーにとって何が嬉しいか • 開発者にとって何が嬉しいか • より詳細な設計 • 開発方針、など
11. 11 © 2023 Techtouch. どう実現したか CTOと合意し移行を実施 11 • 既存プロダクトと並行して開発 • みんなの協力を得ながら約１年かけて完成 2018 2019 2020 2021 2022 Vue版開発チーム React版開発チーム 正規リリース
 追加機能や機能変更を適宜反映 

12. 12 © 2023 Techtouch. どう実現したか 時系列まとめ 12 2019年5月 6月 7月 8月 9月 10月 11月 12月 1月 2月 2021年3月 React版を作る React化の資料 第1弾を作成する 布教活動する CTOと合意 React化の資料 第2弾を作成する 本格始動 React版 リリース
13. 成功要因の分析
14. 14 © 2023 Techtouch. 成功要因の分析 1. 効果や工数を見積もる前に行動した • 最初にそこまで考えきれない（というより見積もるための知識も時間もない） • 直感を信じて行動することも大事 2. 誰に言われたわけでもなく自ら行動した • コンセンサスも取らずに行動した • ただやってみたい、試してみたいという思いで始めた • 自ら行動することで最後まで高いモチベーションで取り組むことができた 3. 実際に動くものを作った • 実際に動くものを作ることで自分の中にあったソリューションのイメージがより鮮明になった • 動くものがある方が説得力も増す • ある程度形にするまでであればそこまで工数はかからない ◦ 実際作るのにかかったのは30時間ほど（数人で１年かけるのに比べたら誤差） ◦ 細かい部分の作り込みや自動テストの作成、レビュー、QAなどのが方が時間がかかる事が多い
15. 15 © 2023 Techtouch. 成功要因の分析 4. 布教活動を継続的に行なった • プレゼンしたり、Slackや対面での会話で話題に出したり • バグが起きたり開発時に課題を感じたりする度にみんなの脳裏によぎるようになる • みんなのモチベーション向上に繋がる ◦ チーム開発なのでみんなのモチベーションを上げることが大事 ◦ 一人だけやる気になってもダメ ◦ みんなが良いと思って作ることが大切 • 建設的な意見をもらうことができる • 大きな決断はなかなかすぐにはできない ◦ 実際に開発を本格的に始めたのは活動を開始してから半年後
16. 16 © 2023 Techtouch. 成功要因の分析 5. いちエンジニアが行動に移した • いちエンジニアとCTOでは視点も視野も違う • アーキテクチャの部分はどちらも見ているが手薄になりがちだった ◦ テックリードがいれば話は違っていたかもしれないが当時はいなかった • 実際に形にできるのはエンジニアなのでエンジニアが 率先して行動するのが望ましい
17. さいごに
18. • いちエンジニアでも大きな技術的負債の解消は実現できる • 負債が解消できるかどうかはエンジニアの行動次第！
19. すべてのユーザーが システムを使いこなせる世界に システム導入だけで終わらせない、利活用のためのDXプラットフォーム