山下 裕一朗 / Yuichiro Yamashita | Vue Fes Japan 2023

Speakers
スピーカー

メドピアトラック14:15 - 14:45

18営業日で350コンポーネント規模のVueアプリにデザインシステムを導入する方法

弊社 (株式会社フライル) では、18 営業日という超短期でデザインシステムを導入しました。このプロジェクトで得た知見を共有致します。

技術的工夫

  • AST を使用して事前にできる限り自動でマイグレーションした上で判別できない部分に全て TODO コメントを自動付与
  • ESLint のカスタムルールを実装してできる限りレビューは自動化
  • デザインシステムが壊れていないか確認するために VRT を実施
  • Autify による E2E テスト

プロジェクト管理上の工夫

  • 手作業は短期集中でタスクのスイッチングコストをゼロに
  • 進捗は数値で管理
  • マニュアルテストを複数回実施してバグに対処
  • 最後にデザイナーとペアプロで細かいデザインを修正

プロジェクトを通じた反省と学び

  • コンポーネントの依存関係を事前に詳細に把握しておくべきだった (コンフリクトが起きるケースが見られた)
  • マイグレーション自体の間違いについて

まず上記の共有をした後に、技術的工夫 1 点目の AST によるプログラム修正の方法の共有に時間を割こうと思っています。

山下 裕一朗 / Yuichiro Yamashitaの写真

株式会社フライル ソフトウェアエンジニア Svelteコアチームメンバー

山下 裕一朗

最近は Python (機械学習) に専念しています。 Flyle (フライル) は、ユーザー中心の製品・サービス開発を推進するためのプロダクトマネジメントプラットフォームです。