プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い

Vue Fes Japan Online 2022

2022/10/16 合同登壇
STORES 株式会社 フロントエンドエンジニア 加藤 佑太
STORES 株式会社 フロントエンドエンジニア 渡邊 涼太

https://vuefes.jp/2022/

1. STORES 株式会社 Vue Fes Online 2022 プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
2. 目次 2 自己紹介 STORES について はじめに 課題 戦い方 まとめ 01 02 03 04 05 06
3. 自己紹介
4. 加藤 佑太（m0nch1） ・官公庁系のWeb受託開発の中小企業に４年ほど在籍したのち、フ ロントエンドエンジニアとして2021年に STORES に入社 ・STORES 新規機能開発ラインでリーダーをしています ・熊が好き ・１歳の息子と妻の3人暮らし 渡邊 涼太（wattanx） ・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの 開発に従事。 ・フロントエンドエンジニアとして2022年1月に STORES に入社。 ・現在は STORES の開発に関わっている。 ・猫が好き。 ・大阪在住。 自己紹介
5. STORES について
6. STORES の事業 お店のデジタルを まるっとサポート。 個人や中小事業の方々に向けて、 お店のデジタル化をまるっと 実現できる価値を提供しています。
7. はじめに
8. はじめに プロダクト開発を止めずに Composition API と TypeScript に 最速で移行するための戦い
9. はじめに 移行開始から１か月でどれくらい完了しているのか
10. はじめに
11. はじめに • 移行は２人で実施している • プロダクト開発は止めていない
12. はじめに 順調そうに見える TypeScript と Composition API への移行 いったいどんな課題があり、どんな戦い方を考えたのか
13. 課題
14. 課題 - 移行対象の機能 ネットショップのデザインを 編集する機能
15. 課題 - 移行対象の機能 「ストアデザイン機能」
16. 課題 - 移行対象の機能 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
18. 課題 技術的な課題 運用的な課題
19. 技術的な課題
20. 技術的な課題 TypeScriptへの移行のしづらさ
21. 技術的な課題 - TypeScriptへの移行のしづらさ Options API で mixins を利用している場合、下記のように型アサーションを入れないと 型エラーを解消できない。
22. 技術的な課題 - TypeScriptへの移行のしづらさ • mixins のファイルは 18ファイル • mixinsを利用しているファイルは 36ファイル • どのファイルも200行くらいある
23. やってらんねぇ
24. Composition API と composables にすればええやん
25. 技術的な課題 - TypeScriptへの移行のしづらさ Options API と mixins を 手動で Composition API と composablesに変換してみる
26. 技術的な課題 - TypeScriptへの移行のしづらさ 1ファイル 1時間くらいかかる
27. やってらんねぇ
28. 技術的な課題とどう戦ったか
29. そうだ、自動化しよう
30. https://github.com/wattanx/vue-mixins-converter https://vue-mixins-converter.vercel.app
31. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ • 入力値である mixins を TypeScript の Compiler API でASTにす る。 • export default の各options の値を読み取る • composables(合成関数)に変換して出力する。
32. 最終成果物である export const useHoge = () => { … } というソースコードを作っている部分。
33. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ 具体的な移行手順
34. 1. mixins を composables に変換 vue-mixins-converter を利用 composables mixins
35. 2. mixins を使っているコンポーネントを Composition API に変換 vue-composition-converter を利用 Composition API Options API
36. 3. Composition APIに変換したコンポーネントを Composition API + composables に手動で修正。(TS化もやる) composables Composition API composables Composition API
37. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ 移行前
38. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ 移行後
39. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ 1ファイル 1時間くらいかかる ↓ 1ファイル 20秒で終わるようになった
40. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ 型アサーションをいれなくて済むので、 TypeScript化もスムーズになった
41. 運用時の課題
42. 運用時の課題 取り掛かる時間の確保しづらさ
43. 運用時の課題 - 取り掛かる時間の確保しづらさ プロダクト開発との並走
44. 運用時の課題 モチベーション維持
45. 運用時の課題 - モチベーション維持 次第に下がるモチベーション • 課題認識はできているものの優先度が下がる • 後どれくらいで終わるのかわからない
46. 運用時の課題とどう戦ったか
47. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ プロダクト開発との並走 • PdM 、スクラムチームにも理解してもらう • 移行の準備と計画はしっかりと ◦ テスト基盤構築 ◦ 自動化の準備
48. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ とにかく issue に着手しやすい状態を作る • 機能を大枠で分割してスコープを分ける • 分けたスコープが保有する js , vue ファイルをそれぞれファイル単位 で issue にする • 細かい issue で小さくリリースできる
50. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ 1 day 1 Pull Request
51. 運用時の課題とどう戦ったか - モチベーション維持 Datadog で進捗を確認できる
52. まとめ
53. まとめ 今回の戦い方で得た学び • 準備と計画が大事 • 一気に移行するより小さく移行するほうがいい • 小さく移行することで不具合も発生しにくくなる • 進捗を見える化することでモチベーション向上につながる
54. まとめ