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
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
Search
cawpea
February 14, 2018
Design
28
120k
複雑なアプリケーションにオブジェクト指向UIで立ち向かう
Goodpatch Engineer Meetup Vol.4で発表した資料です。
https://goodpatch.connpass.com/event/77080/
cawpea
February 14, 2018
Tweet
Share
More Decks by cawpea
See All by cawpea
不確実なソフトウェア開発におけるUXエンジニアの意義と役割
masakiohsumi
9
14k
デザインとエンジニアリングをつなぐコンポーネントの運用設計
masakiohsumi
6
9.4k
デザイナーとエンジニアの垣根を取り払う"デザインエンジニア"という考え方
masakiohsumi
7
4.4k
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
870
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
320
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
180
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
160
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
180
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
530
aya_murakami_portfolio
ayakaimi1101
0
1.5k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5.3k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
240
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
Side Projects
sachag
452
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Typedesign – Prime Four
hannesfritz
41
2.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Language of Interfaces
destraynor
157
24k
Transcript
ෳࡶͳΞϓϦέʔγϣϯʹ ΦϒδΣΫτࢦ6*Ͱཱ͔ͪ͏
େ֯কً.BTBLJ0ITVNJ 'SPOUFOE%FWFMPQFS !N@PITVNJ NBTBLJPITVNJ
None
ͱ͋ΔΞϓϦέʔγϣϯͰ๊͍͑ͯͨΈ
αΠτͷಋઢɺػೳ͕ෳࡶͰ ϚχϡΞϧΛݟͳ͍ͱ͍͜ͳͤͳ͍
ϚχϡΞϧ͕ແͯ͑͘Δͷ
Ҿ༻ݩɿIUUQCMVFTQFBLFSKQEPXOMPBETXBMMQBQFSXPPETIFMGIUNM
Ҿ༻ݩɿIUUQCMVFTQFBLFSKQEPXOMPBETXBMMQBQFSXPPETIFMGIUNM J1IPOFͷֶशޮ͕ߴ͍ͷͦͷ6*͕ΦϒδΣΫτϕʔεͰ ઃܭ͞Ε͍ͯΔ͔ΒͰ͢ɻͭ·ΓϞʔυϨεͰ͋Δ͜ͱ͕େ͖ ͳϑΝΫλʔʹͳ͍ͬͯ·͢ɻ༏Εͨ (6* ΞϓϦέʔγϣϯ ʹରͯ͠Ϣʔβʔ͕ʮϚχϡΞϧΛಡ·ͳͯ͑͘Δʯͱײ ͡Δͷͩͱ͢ΕɺͦΕखॱ͕͍͔֮͑͢ΒͰͳ͘ɺ ܾͦͦ·ͬͨखॱ͕ແ͍͔ΒͳͷͰ͢ɻ OOUX
– ΦϒδΣΫτϕʔεͷUIϞσϦϯά
6*ͷجຊ λεΫϕʔεͱΦϒδΣΫτϕʔε
$6* ಈࢺ໊ࢺͷߏจ (6* ໊ࢺಈࢺͷߏจ λεΫϕʔε ΦϒδΣΫτϕʔε ྫSNd%FTLUPQTBNQMFUYU ྫTBNQMFUYUΛબͯ͠ΰϛശʹҠಈ
ϢʔβʔΞΫγϣϯ͝ͱʹ࣮ߦॱংΛ֮͑Δඞཁ͕͋Δ λεΫϕʔεͰ࡞ΒΕͨΞϓϦέʔγϣϯͷྫ ࠶ੜ ࣸਅҰཡ ࣸਅৄࡉ ฤू ࣸਅҰཡ ࣸਅฤू ফڈ ࣸਅҰཡ
ࣸਅআ ΞΫγϣϯʢಈࢺʣΛબͨ͠ޙʹࣸਅʢ໊ࢺʣΛબ͢Δ ΦϦϯύεϛϡʔͷϝχϡʔ
ࣸਅҰཡ ࣸਅৄࡉ μϯϩʔυ ฤू ΦϒδΣΫτϕʔεͰ࡞ΒΕͨΞϓϦέʔγϣϯͷྫ Ϣʔβʔ࠷ॳʹରΛબͼɺͦΕʹରԠ͢ΔΞΫγϣϯΛࣗ༝ʹબͰ͖Δ ࣸਅʢ໊ࢺʣΛબͨ͠ޙʹΞΫγϣϯʢಈࢺʣΛબ͢Δ %SPQCPYͷ8FC্ͷࣸਅҰཡ আ
ΦϒδΣΫτϕʔεͷ6*ϢʔβʔΛϞʔυ͔Βղ์͠ɺ զʑ͕ಓ۩ͷ͍ํʹ͍ؔͯ࣋ͬͯ͠Δجຊతͳϝϯλϧ ϞσϧΛө͠·͢ɻఝΛଧͭ࣌ɺզʑ·ͣϋϯϚʔΛ ࣋ͪɺͦΕ͔ΒৼΓԼΖ͠·͢ɻৼΓԼΖ͔ͯ͠ΒϋϯϚʔ Λ࣋ͭਓ͍ͳ͍ͷͰ͢ɻ l z OOUX – ΦϒδΣΫτϕʔεͷUIϞσϦϯά
ΦϒδΣΫτϕʔεͰ6*Λઃܭ͢Δ
Ϣʔβʔͷؔ৺ͷରͰ͋ΔΦϒδΣΫτΛΫϥεͱͯ͠ ఆٛ͠ɺͦΕΛͦͷ··εΫϦʔϯʹొͤ͞ΔͷͰ͢ɻ $PVOUFSQBSUc.PEFMFTTBOE.PEBM l z
ΦϒδΣΫτͱlϢʔβʔͷؔ৺ࣄz
ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ ͨͱ͑ɺ5XJUUFSͷzϢʔβʔͷؔ৺ࣄzԿ͔ʁ
໊ࢺΦϒδΣΫτͱͯ͠நग़Ͱ͖Δ ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ lϢʔβʔz ΦϒδΣΫτ lϝοηʔδz ΦϒδΣΫτ
ࣗͷϝοηʔδΛߘ͍ͨ͠ ΈΜͳͷϝοηʔδΛӾཡ͍ͨ͠ ୭͔ͷϝοηʔδΛڞ༗͍ͨ͠ ಈࢺΞΫγϣϯͱͯ͠நग़Ͱ͖Δ lߘzɺzӾཡzɺzڞ༗z ΞΫγϣϯ
நग़͞ΕͨΦϒδΣΫτͱΞΫγϣϯ ΦϒδΣΫτ ΞΫγϣϯ ຊ࣭త ݱత Ϣʔβʔ ϝοηʔδ ߘ Ӿཡ ڞ༗
ΦϒδΣΫτมΘΓʹ͘͘ɺΞΫγϣϯมΘΓ͍͢
㲔 ΦϒδΣΫτΛϕʔεʹ6*ϞσϧΛઃܭ͢Δ ΦϒδΣΫτ Ϗϡʔ ϝοηʔδ Ϣʔβʔ ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ
ɾϝοηʔδͷ༰ ɾϦπΠʔτ ɾ͍͍Ͷ Ϣʔβʔৄࡉ ɾ໊લ ɾϓϩϑΟʔϧը૾ ɾߘͨ͠ϝοηʔδ ڞ༗ɺআ ฤू ৽نߘ
6*ϞσϧΛϕʔεʹϫΠϠʔϑϨʔϜΛߟ͑Δ 6TFSOBNF ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ w ϝοηʔδͷ༰ w ϦπΠʔτ
ʜ Ϣʔβʔৄࡉ w ໊લ w ϓϩϑΟʔϧը૾ ʜ
6*ϞσϧΛϕʔεʹϫΠϠʔϑϨʔϜΛߟ͑Δ 6TFSOBNF ϝοηʔδҰཡ ϝοηʔδͷ ίϨΫγϣϯ ϝοηʔδৄࡉ w ϝοηʔδͷ༰ w ϦπΠʔτ
ʜ Ϣʔβʔৄࡉ w ໊લ w ϓϩϑΟʔϧը૾ ʜ ΦϒδΣΫτΛϕʔεʹใઃܭ͢ΔࣄʹΑͬͯ ޮతͰແବͷͳ͍6*Λߟ͑͘͢ͳΔ
ΦϒδΣΫτࢦ6*͕ ΤϯδχΞϦϯάʹͨΒ͢ͷ
λεΫϕʔεͷ6* ϝοηʔδฤू ϝοηʔδҰཡ" σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ ϝοηʔδҰཡ# औಘ
\ NFTTBHFT< \JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ औಘ
ΦϒδΣΫτϕʔεͷ6* ϝοηʔδҰཡ ϝοηʔδฤू σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ औಘ \ NFTTBHFT<
\JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ ػೳՃ
ΦϒδΣΫτϕʔεͷ6* ϝοηʔδҰཡ ϝοηʔδฤू σʔλ ϢʔβʔΠϯλʔϑΣʔε ϝοηʔδআ औಘ \ NFTTBHFT<
\JE CPEZlGPPz^ \JE CPEZlCBSz^ \JE CPEZlCB[z^ > ^ ػೳՃ ΦϒδΣΫτϕʔεͷ6*σʔλͷө͕ త͔ͭن͕େ͖͘ͳͬͯෳࡶԽ͠ʹ͘͘ͳΔ
˓˓ը໘ͷ࣌ͷ˚˚ϘλϯͷσβΠϯΛมߋ ͍͍ͯ͠Ͱ͔͢ʁ ˚˚Ϙλϯผͷը໘Ͱͬͯ·͕͢ɺ ͦ͜มߋ͍͍ͯ͠Ͱ͔͢ʜʁ σβΠφʔ ΤϯδχΞ σβΠϯΛมߋ͢Δ࣌ʹ࣌ં͋Δޫܠ ͳΔ΄Ͳʜɻͪΐͬͱ֬ೝ͠·͢ɻ σβΠφʔ
σβΠϯ͕෦తʹ͔͠ߟ͑ΒΕ͓ͯΒͣɺ֬ೝʹख͕͔͔ؒΔ σβΠφʔͱೝ͕ࣝ߹Θͣɺ͕ͦͦల։͞ΕΔ ࣮ޙʹߟྀ࿙Ε͕ൃ֮͠ɺۓٸରԠ͕ൃੜ͢Δ 6*͕ෳࡶͳ࣌ʹى͜Γ͕ͪͳͨͪ ʁ
σβΠϯ͕෦తʹ͔͠ߟ͑ΒΕ͓ͯΒͣɺ֬ೝʹख͕͔͔ؒΔ σβΠφʔͱೝ͕ࣝ߹Θͣɺ͕ͦͦల։͞ΕΔ ࣮ޙʹߟྀ࿙Ε͕ൃ֮͠ɺۓٸରԠ͕ൃੜ͢Δ 6*͕ෳࡶͳ࣌ʹى͜Γ͕ͪͳͨͪ ʁ 6*ͷෳࡶੑΛഉআ͢ΔࣄͰ ΤϯδχΞͱσβΠφʔͷ ίϛϡχέʔγϣϯΛԁʹ͢Δ
·ͱΊ
w ΦϒδΣΫτΛ·ͣબͤ͞ΔࣄͰɺϞʔυϨεͰࣗવͳ6*ʹͳΔ w ΦϒδΣΫτͰཧ͢ΔࣄʹΑͬͯແବͷͳ͍6*Λߟ͑͘͢ͳΔ σβΠϯతଆ໘ ٕज़తଆ໘ w 6*ͱσʔλͷॲཧ͕తʹͳΓɺίʔυ͕ෳࡶԽ͠ʹ͍͘ w 6*ͷෳࡶੑΛഉআ͢ΔࣄͰσβΠφʔͱڠಇ͘͢͠ͳΔ
ΦϒδΣΫτࢦతʹઃܭͰ͖Δ͔ߟ͑Α͏
ΤϯδχΞσβΠϯʹؔ৺Λ࣋ͬͯɺ ྑ͍Ϟϊ࡞͍͖ͬͯ·͠ΐ͏ɻ
5IBOLTGPSZPVSBUUFOUJPO