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