Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識し...

Avatar for Takuma Kajikawa Takuma Kajikawa
January 22, 2025
Technology
3
740

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

「TechTrain x ゆめみ ここを意識してほしい！リファクタリング勉強会」のLT資料です
https://yumemi.connpass.com/event/341090/

Avatar for Takuma Kajikawa

Takuma Kajikawa

January 22, 2025
Tweet

More Decks by Takuma Kajikawa

See All by Takuma Kajikawa
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
170
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
Avatar for Takuma Kajikawa kajitack
3
700
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
5
1.4k
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
4
520
try-catchを使わないエラーハンドリング！？ PHPでResult型の考え方を取り入れてみよう
Avatar for Takuma Kajikawa kajitack
2
870
ドメインイベントを活用したPHPコードのリファクタリング
Avatar for Takuma Kajikawa kajitack
2
1.6k
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
Avatar for Takuma Kajikawa kajitack
17
5.8k
責務を分離するための例外設計 - PHPカンファレンス 2024
Avatar for Takuma Kajikawa kajitack
12
3k
Figmaで進化するデザイナーとエンジニアの連携 FoF Tokyo 2024
Avatar for Takuma Kajikawa kajitack
0
120

Other Decks in Technology

See All in Technology
FastAPIの魔法をgRPC/Connect RPCへ
Avatar for MonotaRO monotaro
PRO
1
660
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9k
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
0
160
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
Avatar for スパイダープラス株式会社 spiderplus_cb
0
410
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
Avatar for hypermkt hypermkt
0
2k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
Avatar for GMO Flatt Security flatt_security
0
320
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
Avatar for Ichiro Nishiuma nishiuma
2
120
AWSにおけるTrend Vision Oneの効果について
Avatar for shima shimak
0
110
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題！？
Avatar for Databricks Japan databricksjapan
0
120
インサイト情報からどこまで自動化できるか試してみた
Avatar for takas takas0522
0
130
＃普通の文系サラリーマンチャレンジ　 自分でアプリ開発と電子工作を続けたら人生が変わった
Avatar for tatsuya1970 tatsuya1970
0
910
Findy Team+のSOC2取得までの道のり
Avatar for adachi.ryo rvirus0817
0
290

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
19
1.2k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
40k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k

Transcript

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

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

    @kajitack

  3. TechTrainについて

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

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

  6. TechTrainについて Railway フロントエンド ネイティブアプリ データサイエンス その他 バックエンド 実務レベルの経験が積める、 プロ監修の超実践型課題。 実際にIT最前線企業で使う技術に絞って、迷わずスキルアップできる！

    現場で活きる技術だけを集約した実践型課題。 メガベンチャースタートアップに在籍中のトップエンジニアと共同開発している ので、実務に必要な技術に絞って効果的に学習できます。 入門 入門 入門 初級 初級 初級 初級 初級 初級 初級 基礎 基礎 基礎 基礎 基礎 基礎1-4 入門1-2 入門 教材のレベル感 入門 初級 基礎 教材のレベル感 入門 初級 基礎
  7. None

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

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

  10. 今日話すこと

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

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

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

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

  15. ルールを参照しながら開発 ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン

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

  16. デザインチェックを開発フローに Snapshot Test Vitest を使ったスナップショットテスト Visual Regression Test デザインシステムチームのエンジニアによるレビュー UI

    Review Chromatic でデザインシステムチームのデザイナーによるレビュー Storybookのデプロイ Chromatic で Storybook をホスティングし、コンポーネントをエンジニア以外でも確認できる状態に

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

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

  19. Monorepoで集約

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

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

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

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

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

  25. None