デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみここを意識してほしい！リファクタリング勉強会

Slide 1

Slide 1 text

デザインシステムを始めるために取り組んだこと梶川琢馬 @kajitack

Slide 2

Slide 2 text

梶川琢馬 (Takuma Kajikawa) 2023年に中途入社、バックエンドとフロントエンド半々ぐらい。趣味はトライスロンやランニング。  TechBowl社内でもランニングを報告するチャンネルがあります。株式会社 TechBowl プロダクトエンジニア @kajitack

Slide 3

Slide 3 text

TechTrainについて

Slide 4

Slide 4 text

業界最強のメンター陣が  ありとあらゆるお悩みにお答えします。大手上場企業やベンチャー企業の最前線で活躍している 60社140名以上のトップエンジニアが在籍。キャリアのことも、技術のことも、まとめて相談できます。あなたのロールモデルがきっと見つかります。

Slide 5

Slide 5 text

テクノロジーを支える、すべての人のターミナルに。

Slide 6

Slide 6 text

TechTrainについて Railway フロントエンドネイティブアプリデータサイエンスその他バックエンド実務レベルの経験が積める、プロ監修の超実践型課題。実際にIT最前線企業で使う技術に絞って、迷わずスキルアップできる！現場で活きる技術だけを集約した実践型課題。メガベンチャースタートアップに在籍中のトップエンジニアと共同開発しているので、実務に必要な技術に絞って効果的に学習できます。入門入門入門初級初級初級初級初級初級初級基礎基礎基礎基礎基礎基礎1-4 入門1-2 入門教材のレベル感入門初級基礎教材のレベル感入門初級基礎

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

TechTrainについて TechTrainが目指す未来テクノロジーを支える、すべての人のターミナルに。今、テクノロジーを支えている全ての方の生活に溶け込み、支えていることが常識となるような世界。学習、就職、交流、あらゆるフェーズで立ち寄っては成長し、また新たな世界へと乗り換えていく。そんなあなたの、人生のターミナル(始発終着駅)としてあり続ける。

Slide 9

Slide 9 text

DDDや開発体制などを発信中

Slide 10

Slide 10 text

今日話すこと

Slide 11

Slide 11 text

デザインシステム始めました公開準備中！

Slide 12

Slide 12 text

7@ 再利用性の高いUIライブラリの作% !@ Monorepoでライブラリ管理を一元É Ç@ アプリケーション側のデザインシステム適用デザインシステム導入の取り組み

Slide 13

Slide 13 text

再利用性の高いUIライブラリの作成

Slide 14

Slide 14 text

コンポーネントの種類で分離全プロダクトで一貫して使用する共通のスタイルガイド・コンポーネント特定のプロダクト間で共通して使用する固有のコンポーネント共通コンポーネントスタイルガイド固有コンポーネント

Slide 15

Slide 15 text

ルールを参照しながら開発ボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタンボタン PrimaryButton プライマリーセカンダリーターシャリー CautionButton default hover active focused desable SecondaryButton TertiaryButton デザインシステムレギュレーションも含めたコンポーネントアプリケーション独自のコンポーネント  レビュレーション守りつつある程度の自由度がある Rank2にRank UPしました！努力が結果につながりましたね。次のランクも目指していきましょう！閉じる

Slide 16

Slide 16 text

デザインチェックを開発フローに Snapshot Test Vitest を使ったスナップショットテスト Visual Regression Test デザインシステムチームのエンジニアによるレビュー UI Review Chromatic でデザインシステムチームのデザイナーによるレビュー Storybookのデプロイ Chromatic で Storybook をホスティングし、コンポーネントをエンジニア以外でも確認できる状態に

Slide 17

Slide 17 text

Monorepoでライブラリ管理を一元化

Slide 18

Slide 18 text

Multi Repoの運用コストが高かった V エンジニア社員5Q V フロントエンド専任は8 V メンテしているフロントエンドのRepositoryが4つ

Slide 19

Slide 19 text

Monorepoで集約

Slide 20

Slide 20 text

アプリケーション側の適用

Slide 21

Slide 21 text

移行戦略 g ページ単位で段階的に切り替F g デザインやコードベースだけでなく機能自体も見直すた! g 機能毎にデザインのばらつきがあるが、デリバリー速度を優 g ユーザーにとってより価値のある機能を優先度付け

Slide 22

Slide 22 text

UIコンポーネントの責務分離 X 既存のコンポーネントの責務が大きくなっていてい@ X デザインのみの修正・検証ができなS X Container／Presentation パターンでレイヤーを分離

Slide 23

Slide 23 text

レイヤーごとのドキュメント整備

Slide 24

Slide 24 text

I デザインシステムの運用ができる状態になっ5 I エンジニアとデザイナー間の連携が取りやすくなっ5 I 複数のプロダクト間で統一感のある開発体験ができ5 I もっとデザインシステムと実装の同期をスムーズにしたい振り返り

Slide 25

Slide 25 text

No content