Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

wattanx
October 17, 2022

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

Vue Fes Japan Online 2022

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

https://vuefes.jp/2022/

wattanx

October 17, 2022
Tweet

More Decks by wattanx

Other Decks in Technology

Transcript

  1. STORES 株式会社
    Vue Fes Online 2022
    プロダクト開発を止めずに
    Composition API と TypeScript に
    最速で移行するための戦い

    View Slide

  2. 目次
    2
    自己紹介
    STORES について
    はじめに
    課題
    戦い方
    まとめ
    01
    02
    03
    04
    05
    06

    View Slide

  3. 自己紹介

    View Slide

  4. 加藤 佑太(m0nch1)
    ・官公庁系のWeb受託開発の中小企業に4年ほど在籍したのち、フ
    ロントエンドエンジニアとして2021年に STORES に入社
    ・STORES 新規機能開発ラインでリーダーをしています
    ・熊が好き
    ・1歳の息子と妻の3人暮らし
    渡邊 涼太(wattanx)
    ・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの
    開発に従事。
    ・フロントエンドエンジニアとして2022年1月に STORES に入社。
    ・現在は STORES の開発に関わっている。
    ・猫が好き。
    ・大阪在住。
    自己紹介

    View Slide

  5. STORES について

    View Slide

  6. STORES の事業
    お店のデジタルを
    まるっとサポート。
    個人や中小事業の方々に向けて、
    お店のデジタル化をまるっと
    実現できる価値を提供しています。

    View Slide

  7. はじめに

    View Slide

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

    View Slide

  9. はじめに
    移行開始から1か月でどれくらい完了しているのか

    View Slide

  10. はじめに

    View Slide

  11. はじめに
    ● 移行は2人で実施している
    ● プロダクト開発は止めていない

    View Slide

  12. はじめに
    順調そうに見える
    TypeScript と Composition API への移行
    いったいどんな課題があり、どんな戦い方を考えたのか

    View Slide

  13. 課題

    View Slide

  14. 課題 - 移行対象の機能
    ネットショップのデザインを
    編集する機能

    View Slide

  15. 課題 - 移行対象の機能
    「ストアデザイン機能」

    View Slide

  16. 課題 - 移行対象の機能
    自分でつくれる、
    本格的なネットショップ
    むずかしい知識や技術いらずで
    自分だけのネットショップをかんたんに。

    View Slide

  17. View Slide

  18. 課題
    技術的な課題 運用的な課題

    View Slide

  19. 技術的な課題

    View Slide

  20. 技術的な課題
    TypeScriptへの移行のしづらさ

    View Slide

  21. 技術的な課題 - TypeScriptへの移行のしづらさ
    Options API で mixins を利用している場合、下記のように型アサーションを入れないと
    型エラーを解消できない。

    View Slide

  22. 技術的な課題 - TypeScriptへの移行のしづらさ
    ● mixins のファイルは 18ファイル
    ● mixinsを利用しているファイルは 36ファイル
    ● どのファイルも200行くらいある

    View Slide

  23. やってらんねぇ

    View Slide

  24. Composition API と
    composables にすればええやん

    View Slide

  25. 技術的な課題 - TypeScriptへの移行のしづらさ
    Options API と mixins を 手動で
    Composition API と composablesに変換してみる

    View Slide

  26. 技術的な課題 - TypeScriptへの移行のしづらさ
    1ファイル 1時間くらいかかる

    View Slide

  27. やってらんねぇ

    View Slide

  28. 技術的な課題とどう戦ったか

    View Slide

  29. そうだ、自動化しよう

    View Slide

  30. https://github.com/wattanx/vue-mixins-converter
    https://vue-mixins-converter.vercel.app

    View Slide

  31. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    ● 入力値である mixins を TypeScript の Compiler API でASTにす
    る。
    ● export default の各options の値を読み取る
    ● composables(合成関数)に変換して出力する。

    View Slide

  32. 最終成果物である
    export const useHoge = () => {

    }
    というソースコードを作っている部分。

    View Slide

  33. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    具体的な移行手順

    View Slide

  34. 1. mixins を composables に変換
    vue-mixins-converter を利用
    composables
    mixins

    View Slide

  35. 2. mixins を使っているコンポーネントを Composition API に変換
    vue-composition-converter を利用
    Composition API
    Options API

    View Slide

  36. 3. Composition APIに変換したコンポーネントを
    Composition API + composables に手動で修正。(TS化もやる)
    composables
    Composition API
    composables Composition API

    View Slide

  37. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    移行前

    View Slide

  38. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    移行後

    View Slide

  39. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    1ファイル 1時間くらいかかる

    1ファイル
    20秒で終わるようになった

    View Slide

  40. 技術的な敵とどう戦ったか - TypeScript への移行のしづらさ
    型アサーションをいれなくて済むので、
    TypeScript化もスムーズになった

    View Slide

  41. 運用時の課題

    View Slide

  42. 運用時の課題
    取り掛かる時間の確保しづらさ

    View Slide

  43. 運用時の課題 - 取り掛かる時間の確保しづらさ
    プロダクト開発との並走

    View Slide

  44. 運用時の課題
    モチベーション維持

    View Slide

  45. 運用時の課題 - モチベーション維持
    次第に下がるモチベーション
    ● 課題認識はできているものの優先度が下がる
    ● 後どれくらいで終わるのかわからない

    View Slide

  46. 運用時の課題とどう戦ったか

    View Slide

  47. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ
    プロダクト開発との並走
    ● PdM 、スクラムチームにも理解してもらう
    ● 移行の準備と計画はしっかりと
    ○ テスト基盤構築
    ○ 自動化の準備

    View Slide

  48. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ
    とにかく issue に着手しやすい状態を作る
    ● 機能を大枠で分割してスコープを分ける
    ● 分けたスコープが保有する js , vue ファイルをそれぞれファイル単位
    で issue にする
    ● 細かい issue で小さくリリースできる

    View Slide

  49. View Slide

  50. 運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ
    1 day 1 Pull Request

    View Slide

  51. 運用時の課題とどう戦ったか - モチベーション維持
    Datadog で進捗を確認できる

    View Slide

  52. まとめ

    View Slide

  53. まとめ
    今回の戦い方で得た学び
    ● 準備と計画が大事
    ● 一気に移行するより小さく移行するほうがいい
    ● 小さく移行することで不具合も発生しにくくなる
    ● 進捗を見える化することでモチベーション向上につながる

    View Slide

  54. まとめ

    View Slide