BASEのフロントエンド組織の人数が2.5倍になって起きた変化 / Changes that occurred as the number of people in the front-end organization increased

Vue Fes Japan Online 2022のBASE株式会社のスポンサーセッションで登壇した資料です。
https://vuefes.jp/2022/sponsor-sessions/base

2020年9月に公開されたテックブログ「BASEにおけるVue.jsのこれまでとこれから」（ https://devblog.thebase.in/entry/2020/09/17/110000 ）から2年経ち、当時から比べるとフロントエンド組織の人数が2.5倍に増加しました。
本セッションでは、記事公開から2年の間の組織の変遷と合わせて、人数増加に伴って拡大したBASEのVue.jsのコードベースのmonorepo化と、既存のVue資産の運用と今後の展望についてお話をします。

Transcript

1. © 2012-2022 BASE, Inc. 1 #vuefes_cloudsign @gatchan0807 BASEのフロントエンド組織の人数が 2.5倍になって起きた変化 VueFes Japan Online 2022 スポンサーセッション @gatchan0807 （がっちゃん）
2. © 2012-2022 BASE, Inc. 2 #vuefes_cloudsign @gatchan0807 自己紹介 がっちゃん（Yuki Koga） @gatchan0807 • BASE株式会社 2021年1月入社 • 所属: BASE / Product Dev / CRM3 ◦ 「共通コンポーネントのテスト実装方法にあえてVRTを 選択した話」のプログラミングをするパンダさんと同じチーム • 好き：フロントエンド、個人開発、アーニャ（SPY×FAMILY） ◦ 「#アニャじぇね」というWebアプリを作ったので、 よければ遊んでみてください〜！
3. © 2012-2022 BASE, Inc. 3 #vuefes_cloudsign @gatchan0807 感想や質問などの ツイート大歓迎！
4. © 2012-2022 BASE, Inc. 4 © 2012-2022 BASE, Inc. 4 今日お話すること
5. © 2012-2022 BASE, Inc. 5 #vuefes_cloudsign @gatchan0807 今日お話すること 1 2 BASEのフロントエンドは これからどこに進んでいくのか BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか
6. © 2012-2022 BASE, Inc. 6 #vuefes_cloudsign @gatchan0807 以下の記事から2年経った今 2020年12月2日公開 Vue.js 3 アップデート対応の現状報告 Vue.js 2.6からVue.js 3にアップデートしていく際にどのような作業を 行っていくのかの戦略と実施した具体的な作業の一部を 解説している記事 2020年9月17日公開 BASEにおけるVue.jsのこれまでとこれから 2018年時点のフロントエンド技術のリプレース時に、Vue.jsを 選択してから2020年末時点までの振り返りと BASEのフロントエンド技術に対する基本的な考え方が書かれた記事 https://devblog.thebase.in/entry/2020/12/02/160000 https://devblog.thebase.in/entry/2020/09/17/110000
7. © 2012-2022 BASE, Inc. 7 © 2012-2022 BASE, Inc. 7 BASEとは どんなプロダクトなのか
8. © 2012-2022 BASE, Inc. 8 #vuefes_cloudsign @gatchan0807 コンセプト： 誰でも簡単に使える ネットショップ作成サービス • 商品・注文管理 • ショップデザイン • 顧客情報管理 などを行うショップオーナー向け機能 + • 商品検索 • 決済・注文（カート） などを行う購入者（カスタマー）向け機能
9. © 2012-2022 BASE, Inc. 9 #vuefes_cloudsign @gatchan0807 ショップ運営に必須な機能とは別に、 ショップオーナーが 自身のショップに必要な機能だけを 選択して利用できるようにする仕組み 拡張機能「BASE Apps」 抽選販売 App クーポン App 広告効果測定 App メッセージ App HTML編集 App 配送日設定 App ブログ App 定期振込 App 他にも外部サービスとの 連携Appも多数…
10. © 2012-2022 BASE, Inc. 10 © 2012-2022 BASE, Inc. 10 技術構成は どうなってるのか
11. © 2012-2022 BASE, Inc. 11 #vuefes_cloudsign @gatchan0807 購入者向けページ
12. © 2012-2022 BASE, Inc. 12 #vuefes_cloudsign @gatchan0807 ショップオーナー向けページ
13. © 2012-2022 BASE, Inc. 13 #vuefes_cloudsign @gatchan0807 ショップオーナー向けページ ここのお話は パンダさんの発表にて
14. © 2012-2022 BASE, Inc. 14 © 2012-2022 BASE, Inc. 14 BASEというプロダクトと フロントエンド組織の繋がり
15. © 2012-2022 BASE, Inc. 15 #vuefes_cloudsign @gatchan0807 2020年〜2022年にかけて、コロナ禍によるEC需要が高まり、 プロダクトの利用者が急増した プロダクト利用者の急増
16. © 2012-2022 BASE, Inc. 16 #vuefes_cloudsign @gatchan0807 伴ってエンジニア組織の拡大 フロントエンド組織の人数 （業務委託メンバー含む） エンジニア組織全体の人数 （業務委託メンバー含む）
17. © 2012-2022 BASE, Inc. 17 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】 デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割（gatchan0807 + 3名がJOIN） （frontend1 / frontend2 チーム） 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに （CRMチーム、Sales Promotionチーム、 etc...） プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
18. © 2012-2022 BASE, Inc. 18 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】 デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割（gatchan0807 + 3名がJOIN） （frontend1 / frontend2 チーム） 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに （CRMチーム、Sales Promotionチーム、 etc...） プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
19. © 2012-2022 BASE, Inc. 19 #vuefes_cloudsign @gatchan0807 組織の変遷 2018年12月 【数名】 デザイナー組織からスピンオフしてフロントエンド組織誕生 (frontend チーム) 2021年1月 【10名弱】 フロントエンド組織が2チームに分割（gatchan0807 + 3名がJOIN） （frontend1 / frontend2 チーム） 2022年9月現在 【20名弱】 フロントエンド/バックエンド問わず所属する8チームに （CRMチーム、Sales Promotionチーム、 etc...） プロジェクトにメンバー数名をアサインする形 プロジェクトにチームごとにアサインする形
20. © 2012-2022 BASE, Inc. 20 © 2012-2022 BASE, Inc. 20 組織の変化に合わせて フロントエンドのコードを どう変化させてきたか
21. © 2012-2022 BASE, Inc. 21 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 〜2018年ごろ CakePHPのテンプレートエンジン機能 + jQueryやバニラJSによるデータフェッチ
22. © 2012-2022 BASE, Inc. 22 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング + Vue.jsで機能単位で分けた小さなSPAで画面を構築
23. © 2012-2022 BASE, Inc. 23 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング + Vue.jsで機能単位で分けた小さなSPAで画面を構築
24. © 2012-2022 BASE, Inc. 24 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング + Vue.jsで機能単位で分けた小さなSPAで画面を構築
25. © 2012-2022 BASE, Inc. 25 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング + Vue.jsで機能単位で分けた小さなSPAで画面を構築
26. © 2012-2022 BASE, Inc. 26 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2019年〜2020年ごろ CakePHPで大枠のルーティング + Vue.jsで機能単位で分けた小さなSPAで画面を構築 ローカル環境と デプロイ時のビルド時間の 肥大化が問題に！
27. © 2012-2022 BASE, Inc. 27 #vuefes_cloudsign @gatchan0807 フロントエンドのコードの変遷 2021年〜現在 CakePHPで大枠のルーティング + 巨大になったVue.jsアプリケーションを パッケージに分割
28. © 2012-2022 BASE, Inc. 28 #vuefes_cloudsign @gatchan0807 拡張機能「BASE Apps」という仕組みは フロントエンドパッケージの分割の単位としてピッタリで、 ディレクトリを機能単位で分けて管理・開発している どんな単位で分割してる？ app-delivery-date/ app-takeout/ items/
29. © 2012-2022 BASE, Inc. 29 #vuefes_cloudsign @gatchan0807 （2020年末時点の記事からの抜粋） • Deprecatedな機能の置き換え • 社内UIライブラリ（BBQ）のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000
30. © 2012-2022 BASE, Inc. 30 #vuefes_cloudsign @gatchan0807 （2020年末時点の記事からの抜粋） • Deprecatedな機能の置き換え • 社内UIライブラリ（BBQ）のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000
31. © 2012-2022 BASE, Inc. 31 © 2012-2022 BASE, Inc. 31 BASEのmonorepo化の 工夫と苦労
32. © 2012-2022 BASE, Inc. 32 #vuefes_cloudsign @gatchan0807 BASEのmonorepoの特徴 → 機能単位で分けるmonorepo
33. © 2012-2022 BASE, Inc. 33 #vuefes_cloudsign @gatchan0807 ディレクトリ構成（イメージ） - web - frontend - src - app - items - orders - apps/ - coupon - domain - infra - components - web - frontend - shopadmin - items - orders - app-coupon - packages - api-client - util Before After パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位 パッケージ単位
34. © 2012-2022 BASE, Inc. 34 #vuefes_cloudsign @gatchan0807 2022年8月 ついに約90個のパッケージの 🎉monorepo化完了！🎉
35. © 2012-2022 BASE, Inc. 35 #vuefes_cloudsign @gatchan0807 monorepo化のメリット • ビルド単位が細かくなる ◦ ビルドの並列化が可能になる ◦ ビルド成果物をキャッシュしておくことができるようになる • BASE Appsや機能（パッケージ）の独立性が保たれる ◦ 大人数での開発にも耐えやすくなる（スケールしやすくなる）
36. © 2012-2022 BASE, Inc. 36 #vuefes_cloudsign @gatchan0807 • ビルドのワークフロー / ビルド成果物の管理が煩雑になり、速度も低下 ◦ 細かく分けた事によってオーバーヘッドが生まれ、そのまま全てビルドする形だと フルビルドにかかる時間が長くなってしまった • ボイラープレートが増え、パッケージの新規作成が大変 ◦ package.json / webpack.config.jsなど、パッケージごとに用意する必要が あるものがたくさんあって、開発初期の手間が増えてしまった monorepo化しても残った課題
37. © 2012-2022 BASE, Inc. 37 #vuefes_cloudsign @gatchan0807 • ビルドのワークフロー / ビルド成果物の管理が煩雑になり、速度も低下 ◦ 細かく分けた事によってオーバーヘッドが生まれ、そのまま全てビルドする形だと フルビルドにかかる時間が長くなってしまった ⇒ Turborepoの導入 • ボイラープレートが増え、パッケージの新規作成が大変 ◦ package.json / webpack.config.jsなど、パッケージごとに用意する必要が あるものがたくさんあって、開発初期の手間が増えてしまった ⇒ scaffdogの導入 monorepo化しても残った課題
38. © 2012-2022 BASE, Inc. 38 #vuefes_cloudsign @gatchan0807 Turborepoの導入 〜ビルド並列化とキャッシュ利用〜
39. © 2012-2022 BASE, Inc. 39 #vuefes_cloudsign @gatchan0807 Next.js / SWR / Hyperなどを提供するVercelが 開発しているmonorepoに適したビルドシステム で、以下のような機能が予め用意されている • ビルド成果物のキャッシュ • 並列実行の最適化 • パッケージ間の依存関係を考慮した再ビルド ◦ ※パッケージごとに設定されたビルドコマンドを呼び出す形 Turborepoとは
40. © 2012-2022 BASE, Inc. 40 #vuefes_cloudsign @gatchan0807 Turborepoを導入したことによって ローカル環境・デプロイサーバー共に 高速化成功！🎉 336秒 → 292秒 44秒改善！ ※Turborepo導入時の記録
41. © 2012-2022 BASE, Inc. 41 #vuefes_cloudsign @gatchan0807 monorepo化が進んだ今は さらに恩恵を受けられている！ フルビルド時: 567秒 フルキャッシュ時: 12秒 一部パッケージにのみ 変更があった時: 85秒
42. © 2012-2022 BASE, Inc. 42 #vuefes_cloudsign @gatchan0807 scaffdogの導入 〜新しいパッケージを簡単に作る〜
43. © 2012-2022 BASE, Inc. 43 #vuefes_cloudsign @gatchan0807 scaffdogとは @wadackel さんが開発している Markdownベースのスキャフォールディングツール 以下のような特徴がある • 1つの.mdファイルの中に出力する複数ファイルの テンプレートを記述できる • h1とcodeブロック部分以外はメモとして 利用できるので、後から読みやすい
44. © 2012-2022 BASE, Inc. 44 #vuefes_cloudsign @gatchan0807 scaffdogを導入したことによって 新しいパッケージを対話式CLIで生成でき、 属人化せずに作成の手間が省けるように 🎉
45. © 2012-2022 BASE, Inc. 45 © 2012-2022 BASE, Inc. 45 BASEのフロントエンドの これから
46. © 2012-2022 BASE, Inc. 46 #vuefes_cloudsign @gatchan0807 monorepo化後の未来 monorepo化によって、BASE Appsや基本機能内の 影響範囲を（ライブラリ等込で）明確に区切ることができた
47. © 2012-2022 BASE, Inc. 47 #vuefes_cloudsign @gatchan0807 monorepo化後の未来 ⇒ BASE Appsや基本機能の新規開発・リニューアル時に、 Vueのバージョンやフレームワーク / ライブラリに縛られずに 個別に技術選定・アップデートをできるように monorepo化によって、BASE Appsや基本機能内の 影響範囲を（ライブラリ等込で）明確に区切ることができた
48. © 2012-2022 BASE, Inc. 48 #vuefes_cloudsign @gatchan0807 ⇒ BASE Appsや基本機能の新規開発・リニューアル時に、 Vueのバージョンやフレームワーク / ライブラリに縛られずに 個別に技術選定・アップデートをできるように monorepo化後の未来 monorepo化によって、BASE Appsや基本機能内の 影響範囲を（ライブラリ等込で）明確に区切ることができた これからここをやっていくぞ！！！
49. © 2012-2022 BASE, Inc. 49 © 2012-2022 BASE, Inc. 49 まとめ
50. © 2012-2022 BASE, Inc. 50 #vuefes_cloudsign @gatchan0807 今日お話すること（まとめ） 1 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか
51. © 2012-2022 BASE, Inc. 51 #vuefes_cloudsign @gatchan0807 今日お話すること（まとめ） BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています！ 1 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか
52. © 2012-2022 BASE, Inc. 52 #vuefes_cloudsign @gatchan0807 今日お話すること（まとめ） BASEのフロントエンドは これからどこに進んでいくのか 2 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか 1 BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています！
53. © 2012-2022 BASE, Inc. 53 #vuefes_cloudsign @gatchan0807 今日お話すること（まとめ） BASEのフロントエンドは これからどこに進んでいくのか 2 BASEでは中〜大規模になった Vue.jsアプリケーションをどのように運用しているのか 1 BASEではmonorepoを活用して、 既存のVueのアセットを運用・改善しています！ monorepoに分けたパッケージ内で細かくライブラリ アップデートや機能改善を行っていきます！
54. © 2012-2022 BASE, Inc. 54 #vuefes_cloudsign @gatchan0807 今日お話しできなかったこと
55. © 2012-2022 BASE, Inc. 55 #vuefes_cloudsign @gatchan0807 などなど、他にもお話したいト ピックはたくさん… 今日お話しできなかったこと BASEのノーコードエディタ （ショップデザイン編集機能）について カート機能の大規模リプレイス（Next.js）
56. © 2012-2022 BASE, Inc. 56 #vuefes_cloudsign @gatchan0807 などなど、他にもお話したいト ピックはたくさん… 今日お話しできなかったこと BASEのノーコードエディタ （ショップデザイン編集機能）について カート機能の大規模リプレイス（Next.js） 「BASE テックブログ」で検索！🔍 or カジュアル面談まで󰡇
57. © 2012-2022 BASE, Inc. 57 #vuefes_cloudsign @gatchan0807 （2020年末時点の記事からの抜粋） • Deprecatedな機能の置き換え • 社内UIライブラリ（BBQ）のVue3対応 • monorepo化と依存整理 • packageごとにバージョンを切り替えて徐々に移行 2020年末のブログ記事でも言及 https://devblog.thebase.in/entry/2020/12/02/160000 monorepo化以外の部分は 現在進行中！
58. © 2012-2022 BASE, Inc. 58 © 2012-2022 BASE, Inc. 58 We are hiring! https://herp.careers/v1/base