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
Design System Discussion
Search
Yosuke Furukawa
PRO
September 19, 2019
Programming
2
590
Design System Discussion
Yosuke Furukawa
PRO
September 19, 2019
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
3.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
190
Removing Corepack
yosuke_furukawa
PRO
9
1.5k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.6k
Strip Types と Storage
yosuke_furukawa
PRO
4
370
Module Harmony について
yosuke_furukawa
PRO
3
1.6k
LTのやり方
yosuke_furukawa
PRO
16
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
750
Node.js v22 で変わること
yosuke_furukawa
PRO
13
5.8k
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
200
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
120
PRレビューのお供にDanger
stoticdev
1
220
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
DROBEの生成AI活用事例 with AWS
ippey
0
140
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
280
Software Architecture
hschwentner
6
2.1k
Jakarta EE meets AI
ivargrimstad
0
110
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Writing Fast Ruby
sferik
628
61k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Visualization
eitanlees
146
15k
How to train your dragon (web standard)
notwaldorf
91
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Pragmatic Product Professional
lauravandoore
32
6.4k
KATA
mclloyd
29
14k
Transcript
Design System Discussion 2019/09/19 @ SmartHR ΦϑΟε
Panelist
ݹͷελϯε • σβΠϯγεςϜջٙ • σβΠϯγεςϜࣗମྑ͍ • අ༻ରޮՌ͕ٙ
͜ͷٞͷΰʔϧ • σβΠϯγεςϜͷٙʹ͍ͭͯҙݟΛͿͭ ͚ɺճΛಘΔ • σβΠϯγεςϜͷམͱ͠ॴΛ͠Δ
ͦͦ • ͏·͍ͬͯ͘Δʁ • य़͞Μ: ͻͱ·ͣೖΕͯΈ͚ͨͲɺࠓͷॴճͤͯΔɻ͜Ε͔Βɺ͏·͍ͬͯ͘Δ͔Ͳ͏͔ʑɺ࡞͍͖͍ͬͯͨͱ ͍͏৺ҙؾ͕͋Δɻ • ݱঢ়ࣾͷޮԽͷͨΊͷπʔϧͱ͔ͯ͠͠ݕ౼͍ͯ͠ͳ͍ •
ࣾͷޮԽ͕ϝΠϯͷ͜ͱ͕ଟ͍ => Ϗδωε·Ͱམͱ͢ॴ·Ͱ͍͚ͯͳ͍ • ੴڮ͞Μ: ಉ͘͡ɺࠓͷॴͬͯΔ͕ɺ͏·͘ݴͬͯΔ͔Ͳ͏͔ͷධՁ·ͩԼͤͳ͍ɻ • উखʹ࡞ۭͬͯதʹු͘ͷΊ͔ͨͬͨɻ • খ͘͞࡞ͬͯɺϓϩμΫγϣϯͰಈ͍ͯΔΑ͏ʹ͔ͨͬͨ͠ɻ • => ͜͜ୡɺελʔτ͔ͯ͠Β • ٶݪ͞Μ: ͓ۚʹͶͯͳ͍ɺ͏·͘ݴͬͯͳ͍ͱࢥͬͯΔɻ • ·ͩΓग़͠Ͱࢿظؒɺ։ൃੜ࢈ੑʹͪΌΜͱϑΟʔυόοΫ͍ͯ͘͠ͱΑ͍
ͦͦ • ಋೖ͔ͨ͠Γ? • ಋೖͯ͠ӡ༻ͯ͠Δ? • ӡ༻ख़ظ? • य़͞Μ: 1
• ੴڮ͞Μ • ٶݪ͞Μ 3ϲ݄ • य़͞Μ1ؒӡ༻ͯ͠Δ͕ɺ͕ͦͦσβΠϯ౷Ұ͞Εͯͳ͍ɺ։ൃͷUI͕ό ϥόϥͳͲͷঢ়گ͔Β࢝·ͬͨɻ
ͦͦ • σβΠϯγεςϜͷॳखͰΔ͜ͱ: • ٶݪ: ͓ߦّΑͬͯ͘ͳ͍ɺύλʔϯΛચ͍ग़͠ͱ͔ͬͯͳ͍ɺ࠷ॳʹτοϓμϯͷ͋Δ͖࢟ͷશମ ૾࡞ͬͯΔɺػೳతʹཧͯ͠ϘτϜΞοϓ࡞ΔɺτοϓμϯͱϘτϜΞοϓͷ྆ํ͔Β߈ΊΔ • લ৬ΞτϛοΫσβΠϯ͕ࣦഊ =>
ޙͰฉ͘ • ੴڮ͞Μ σβΠϯγεςϜͷγεςϚνοΫͳͱ͜ΖΛ͍Ε͍ͨɺͲ͏ͬͯΓ͚ͯೖΕ͍͔ͯ͘Λ૬ ஊ • Ұ୴ϖʔδΛεΫγϣͯ͠ɺϋαϛͰͬͯ·ͱΊ͍ͯͬͨ • ࠷ॳ͔Βᘳࢦ͞ͳ͔ͬͨ • ΧϥʔύϨοτ࠷ॳ͔ΒܾΊͯྑ͍ͷͰ => ૾ͱҧͬͯͨ͘͞Μ͋ͬͨɻ • य़͞Μ ελΠϧΨΠυΛ࡞͍ͬͯͬͯɺ͢Ͱʹ͋Δϖʔδ͔ΒίϯϙʔωϯτΛચ͍ग़͢ͷҰॹɺύʔ πύʔπͰ࡞͍ͬͯ͘ɻ
ͦͦ • σβΠϯγεςϜͬͯݴͬͨ࣌ʹͲ͜·ͰͬͯΔ? • UIKitͱ͔࡞ͬͯΔʁ • Styleguideͱ͔ʁ • ͦΕͱσβΠϯͷυΩϡϝϯτԽ =
ϧʔϧͱݪଇͷ໌จԽͷΈʁ • य़͞Μ: UIKit, StyleGuide, React Component ͷఏڙ • ੴڮ͞Μ: ΄΅ࣅ͍ͯΔɺUIιʔείʔυɺ։ൃऀ͚υΩϡϝϯτɺσβΠϯͷυΩϡϝϯτ Խ͕Ͱ͖ͯͳ͍ • ٶݪ͞Μ: sketch library, React Component, UIKit આ໌͢ΔΨΠυϥΠϯ • σβΠφʔ͕ࣗίʔσΟϯά͍ͯ͠Δ
৫ • σβΠφʔͱΤϯδχΞ͕Ͳ͏ͬͯڠۀͯ͠ Δͷ͔ •
৫ • σβΠφʔɺΤϯδχΞ͚ͩͰͳ͘ɺϓϥϯφʔ·Ͱ͍ࠞͥͯ͘ඞཁ͕͋ΔͷͰɺ ͦͷลΓͷԹײΛͲ͏ͬͯௐͯ͠Δͷ͔ • ੴڮ͞Μ: σβΠφʔ͕ϫΠϠʔΛߟ͑Δ͖ͩͱࢥͬͯΔɺσβΠϯγεςϜΛε ΫϥϜͷதͰಋೖ͢Δ͖ͩͱࢥͬͯΔ͕Ͱ͖͍ͯͳ͍ • य़͞Μ:
σβΠφʔ͚ͩͰͬͯΔɺΤϯδχΞͱڠۀ͜Ε͔ΒɻσβΠφʔ͕ ओମͰͬͯΔ͚ͩͰ͜Ε͔Βͷͱ͜Ζ͕ଟ͍ • ٶݪ͞Μ: SmartHRͰظશһἧͬͯΔ => લ৬ɺσβΠϯΛΩϨΠʹͯ͠ Ϗδωεʹܨ͕Βͳ͍ͷͰʁͱ͋ͬͨͷͰɺࣾϚʔέςΟϯάΩϟϥΫλʔ Λ͍ͯͬͨ͠ɻ • σβΠϯγεςϜνʔϜ ͷ໊લΛ vibes ʹ͍ͯͬͨ͠ɺόΠϒε͋͛͋͛ͬͯ͜ͱʁ
։ൃ • Storybook͕Γ͍͢Ͳ͏ͯ͠Δ? • ٶݪ͞Μ: ઈࢍͬͯΔʂͨͩSmartHRࢿʹ͍ͭͯΈΜͳagreeͳͷͰݴ͏͜ ͱແ͍ɻલ৬ΤϯδχΞͷOKRͷதʹೖΕ͍ͯͬͨɻ • ੴڮ͞Μ: ࡞ͬͨUIϥΠϒϥϦඞͣόʔδϣχϯάͯ͠ΔɺͦͷࠩΘ͔ΔΑ͏
ʹͯ͠Δɺࡉ͔͍ͷඞ͍͔ͣͯ͠ͳ͍ͱ͍͚ͳ͍ɻࣾͷͲΜͳਓͰίϛοτ ͯ͠ྑ͍͜ͱʹͨ͠ɻશʹࣾͰOSSʹ͢ΔͷແͩͬͨͷͰɺϝΠϯϝϯς φΛೖΕΔͳͲΛݕ౼ͨ͠ • य़͞Μ: ࢲ͕Storybookܯͩɻදࣔ֬ೝͱͯ͠࠷ॳ͍͕ͬͯͨɺ͍ͭ࠷ۙ Storybook v5.2͕ग़ͯɺΞϧϑΝ൛͔ΒͬͯΔaddon docs͕ग़ͯɺͦΕʹ߹Θͤ ͯstorybookࣗମΛϝϯςφϯε͍ͯ͠Δ
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
Q&A • σβΠϯγεςϜΛطଘͷϓϩδΣΫτʹஈ ֊తʹಋೖͨ͠ਓ or ಋೖ͍ͯ͠Δਓ͕ډΔ͔ ฉ͍ͯ΄͍͠Ͱ͢ʂ
Q&A • 1. ԿΛओతʹσβΠϯγεςϜͷඋΛ࢝Ί·͔ͨ͠ʁ • ex. ϒϥϯυΞΠσϯςΟςΟͷೝɺϢʔβೝෛՙͷ ܰݮɺσβΠϯίετݮɺ࣮ίετݮ • 2.
σβΠϯγεςϜͷӡ༻ΛͲͷׂɺ৬छͷਓ͕ओಋ͠ ͯ·͔͢ʁ
Q&A • σόΠεؒͷࠩΛͲ͏ѻ͏ͷ͔օͷݟฉ ͖͍ͨͰ͢ࢲɻ • ωΠςΟϒͷ iOS ͱ Android Ͱ
Platform ʹ ߹Θͤͨύʔπ (τάϧεΠονͱ͔) ͕͋ͬ ͨ߹ɺWeb ΛͲ͏͢Δ͔ɻ߹ʹΑͬͯ WebView Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ