Vue Fes Japan Online 2022
2022/10/16 合同登壇 STORES 株式会社 フロントエンドエンジニア 加藤 佑太 STORES 株式会社 フロントエンドエンジニア 渡邊 涼太
https://vuefes.jp/2022/
STORES 株式会社Vue Fes Online 2022プロダクト開発を止めずにComposition API と TypeScript に最速で移行するための戦い
View Slide
目次2自己紹介STORES についてはじめに課題戦い方まとめ010203040506
自己紹介
加藤 佑太（m0nch1）・官公庁系のWeb受託開発の中小企業に４年ほど在籍したのち、フロントエンドエンジニアとして2021年に STORES に入社・STORES 新規機能開発ラインでリーダーをしています・熊が好き・１歳の息子と妻の3人暮らし渡邊 涼太（wattanx）・新卒で受託開発系の会社に入社し、業務系Webアプリケーションの開発に従事。・フロントエンドエンジニアとして2022年1月に STORES に入社。・現在は STORES の開発に関わっている。・猫が好き。・大阪在住。自己紹介
STORES について
STORES の事業お店のデジタルをまるっとサポート。個人や中小事業の方々に向けて、お店のデジタル化をまるっと実現できる価値を提供しています。
はじめに
はじめにプロダクト開発を止めずにComposition API と TypeScript に最速で移行するための戦い
はじめに移行開始から１か月でどれくらい完了しているのか
はじめに● 移行は２人で実施している● プロダクト開発は止めていない
はじめに順調そうに見えるTypeScript と Composition API への移行いったいどんな課題があり、どんな戦い方を考えたのか
課題
課題 - 移行対象の機能ネットショップのデザインを編集する機能
課題 - 移行対象の機能「ストアデザイン機能」
課題 - 移行対象の機能自分でつくれる、本格的なネットショップむずかしい知識や技術いらずで自分だけのネットショップをかんたんに。
課題技術的な課題 運用的な課題
技術的な課題
技術的な課題TypeScriptへの移行のしづらさ
技術的な課題 - TypeScriptへの移行のしづらさOptions API で mixins を利用している場合、下記のように型アサーションを入れないと型エラーを解消できない。
技術的な課題 - TypeScriptへの移行のしづらさ● mixins のファイルは 18ファイル● mixinsを利用しているファイルは 36ファイル● どのファイルも200行くらいある
やってらんねぇ
Composition API とcomposables にすればええやん
技術的な課題 - TypeScriptへの移行のしづらさOptions API と mixins を 手動でComposition API と composablesに変換してみる
技術的な課題 - TypeScriptへの移行のしづらさ1ファイル 1時間くらいかかる
技術的な課題とどう戦ったか
そうだ、自動化しよう
https://github.com/wattanx/vue-mixins-converterhttps://vue-mixins-converter.vercel.app
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ● 入力値である mixins を TypeScript の Compiler API でASTにする。● export default の各options の値を読み取る● composables(合成関数)に変換して出力する。
最終成果物であるexport const useHoge = () => {…}というソースコードを作っている部分。
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ具体的な移行手順
1. mixins を composables に変換vue-mixins-converter を利用composablesmixins
2. mixins を使っているコンポーネントを Composition API に変換vue-composition-converter を利用Composition APIOptions API
3. Composition APIに変換したコンポーネントをComposition API + composables に手動で修正。(TS化もやる)composablesComposition APIcomposables Composition API
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ移行前
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ移行後
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ1ファイル 1時間くらいかかる↓1ファイル20秒で終わるようになった
技術的な敵とどう戦ったか - TypeScript への移行のしづらさ型アサーションをいれなくて済むので、TypeScript化もスムーズになった
運用時の課題
運用時の課題取り掛かる時間の確保しづらさ
運用時の課題 - 取り掛かる時間の確保しづらさプロダクト開発との並走
運用時の課題モチベーション維持
運用時の課題 - モチベーション維持次第に下がるモチベーション● 課題認識はできているものの優先度が下がる● 後どれくらいで終わるのかわからない
運用時の課題とどう戦ったか
運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさプロダクト開発との並走● PdM 、スクラムチームにも理解してもらう● 移行の準備と計画はしっかりと○ テスト基盤構築○ 自動化の準備
運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさとにかく issue に着手しやすい状態を作る● 機能を大枠で分割してスコープを分ける● 分けたスコープが保有する js , vue ファイルをそれぞれファイル単位で issue にする● 細かい issue で小さくリリースできる
運用時の課題とどう戦ったか - 取り掛かる時間の確保しづらさ1 day 1 Pull Request
運用時の課題とどう戦ったか - モチベーション維持Datadog で進捗を確認できる
まとめ
まとめ今回の戦い方で得た学び● 準備と計画が大事● 一気に移行するより小さく移行するほうがいい● 小さく移行することで不具合も発生しにくくなる● 進捗を見える化することでモチベーション向上につながる
wattanx
m3hiro3
iwamot
yayoi_dd
hayaosuzuki
hiroshinakagawa
moritama1515
nnstt1
hassaku63
shogo452
yoshikikomoriya
nyankotaro
hayaok3
bkeepers
tmm1
maltzj
lauravandoore
sachag
soudai
thekraken
malarkey
panda_program
mojombo
jmmastey
yeseniaperezcruz