Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HRTech SaaSで開発している共通UIライブラリについて
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
shippokun
April 06, 2023
How-to & DIY
1
210
HRTech SaaSで開発している共通UIライブラリについて
https://anotherworks.connpass.com/event/276673/
shippokun
April 06, 2023
Tweet
Share
Other Decks in How-to & DIY
See All in How-to & DIY
AIお菓子ロッカー
keicafeblack
0
240
Raspberry Pi Connectを使って #Manus => Node-RED操作チャレンジ #iotlt vol121
n0bisuke2
0
180
自分がご機嫌になれる 素敵な場所を守るために
kenichirokimura
3
660
JAWS-UG Fukuoka - AWS re:Invent 2024 re:Cap AWS Community Perspective
awsjcpm
2
230
HCIのデモに役立つ映像活用アイデア集 #WISS2024 ナイトセッション #HCIVideoCulture
bonsaistudiojp
2
1.1k
【ふりかえりワークショップ】Tryを決めるだけじゃない!感情にフォーカスした、ふりかえりを体験しよう!
scrummasudar
0
1k
ボードゲーム × 専用収納 〜3Dプリントで埋めるニッチな隙間〜 / Board Games × Custom Storage
handlename
0
190
ネガティブをねじ伏せ、n=1のキャリアに変える技術
subroh0508
1
1.1k
あなたは何故コミュニティに参加するのか?
awsjcpm
2
280
登壇資料を素早く作るための順番
kotomin_m
7
1.3k
JAWS-UG 福岡 in 北九州 | JAWS-UG/AWSコミュニティ プログラムのご紹介
awsjcpm
1
190
ラズパイカメラ向け ケーブル延長基板・ハウジングの開発
koheimasaki
PRO
2
440
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
Exploring anti-patterns in Rails
aemeredith
2
250
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
Making the Leap to Tech Lead
cromwellryan
135
9.7k
sira's awesome portfolio website redesign presentation
elsirapls
0
150
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
50k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
First, design no harm
axbom
PRO
2
1.1k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
A Soul's Torment
seathinner
5
2.3k
Transcript
HRTech SaaSで開発している共 通UIライブラリについて Front-end Meetup 2023
株式会社HRBrain SubTL 岩本 佳吾 3年弱ほど新卒入社した家具ECサイトを経 営する会社で社内システムの開発を主にし ていました。 弊社ではUIライブラリの刷新、タレントマネジ メント開発に従事しています。 あだ名は「しっぽくん」
Abstract 今回は弊社で開発・運用しているUIライブラリの1年間の運用方法と課題感に ついてお話します。 技術選定やコンポーネント作成については今回は深堀りはしません。 主に専任チームはないが社内でUIライブラリを運用している・しようとしている 人に対してなにかしら役に立つことが話せたらと思います。
今回お話するトピック ・HRBrainでのUIライブラリの立ち位置 ・運用体制・これまでの開発 ・採用技術 ・一部コンポーネント紹介 ・運用していく中での課題感と対策 ・UIライブラリを開発していく中で難しい部分としくじり ・まとめと今後
HRBrainでのUIライブラリの立ち位置 ・複数のプロダクトと今後も増える ・プロダクトとは別にドメイン知識を持っ たWeb Components ・様々なFormに対応するため カスタマイズ性が求められる ・優秀なデザイナー陣による監修
UIライブラリの運用体制 ・専任チームはおらずOwner1名のベストエフォートで対応 ・プロダクト開発しているメンバーがコントリビュートする状態 ・デザインはプロダクトデザイナーチーム全員で取りまとめ
これまでの開発 ・プロダクト間で共通のUIでデザインが作成されていることも多く、 3年ほど前からUIライブラリの作成を始めた ・3年間でプライベート、パブリック、モノレポと管理方法が変化 → 現在はプライベート ・ここ1年でデザインリニューアルが始まり、UIライブラリも刷新へ
採用技術 ・React.js x TypeScript ・webpack ・styled-components ・開発する際に利用 ・Chromatic(Storybook公開・デザインレビュー) ・Hygen(テンプレート)、Ship.js(リリース自動化) ・ライブラリ公開:GitHub
Packages
一部紹介 ・カラーコードの集約
一部紹介 ・基本的なButtonコンポーネントを始め、PulldownやDatePickerなどのデータ 入力のために必要不可欠なコンポーネントも提供
運用のスタンス ・いわゆる社内OSSのような管理 ・そのために人によって差が出にくい施策を用意 右図はデザイナーが コントリビュートチャンスを 狙っている図
運用施策 ・コンポーネントなど追加を簡単にするためにテンプレートを用意 ・export記述やラベル作成などを1コマンドで生成可能 https://www.hygen.io/ を採用
運用施策 ・Ship.jsによる自動リリース(2回クリックでリリースできる状態に!)
運用していく中での課題感 ・専任メンバーがいないため継続的な開発が困難 ・リリースした内容の認知度が低い
運用していく中での課題感 ・専任メンバーがいないため継続的な開発が困難 ・要望をIssue化・ラベリングしコンポーネントが抱えている課題を リストアップ → 開発ポイント明確化 ・新規開発メンバーにGoodFirstIssueをアサインし改善と認知度向上 ・リリースした内容の認知度が低い
運用していく中での課題感 ・専任メンバーがいないため継続的な開発が困難 ・リリースした内容の認知度が低い ・リリース内容をSlackへ自動転送 ・詳細とChromaticの該当リンクを添付
UIライブラリを開発していく中で難しい部分 ・どこまでUIライブラリが責務を持つのか? ・例えばバリデーション ・標準のInput要素にあるmin,maxを自作UIライブラリでも実装? ・他にもエラーメッセージなど ・一定のルールを定めたり、柔軟に対応できる機能提供をする ・バリデーションは利用側で複数定義しUIライブラリ側で順次適応
UIライブラリを開発していく中で起こったしくじり ・根本的にコンポーネントを作り変えた ・古いコンポーネントを非推奨へ ・メジャーバージョン4つほど経て削除することに ・古いコンポーネントからデグレしていた機能があり、 バージョンアップできないと問題に! ・インテグレーションテストなどで動作担保をするべきだった ・この反省を踏まえて徐々にStorybookのインテグレーションを導入中
まとめと今後 ・貢献しやすい状態を作り出すことで継続的な改善をする ・UIライブラリとプロダクトの責務を定義することで迷わない開発に ・自分でUIライブラリを開発・活用してみたいという人は是非!! ・今回お話出来なかったコンポーネント実装などは交流会で👏