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
UXBridge_vol3_pipopotamasu
Search
pipopotamasu
December 16, 2017
Technology
2
840
UXBridge_vol3_pipopotamasu
UXBridgeの3回目の発表資料です。
pipopotamasu
December 16, 2017
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
160
vue-function-tester
pipopotamasu
2
1.1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
87
medpacker_introduction_20190523
pipopotamasu
0
460
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.6k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
200
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
440
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1k
Other Decks in Technology
See All in Technology
Road to Single Activity Uncovered
yurihondo
0
110
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
2
120
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
bengo4com
8
3.9k
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
460
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
130
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
480
0x5F3759DF
ykozw
0
330
v-modelの歩みを振り返る
bengo4com
5
1.9k
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
1.4k
Deep dive into Nuxt Server Components
wattanx
1
870
サーバレスで挑む IoT プロジェクトの現実解 / Real solutions for the IoT project using serverless service
genkiogasawara
1
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building an army of robots
kneath
302
42k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Designing the Hi-DPI Web
ddemaree
280
34k
Teambox: Starting and Learning
jrom
132
8.7k
A better future with KSS
kneath
237
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
4 Signs Your Business is Dying
shpigford
180
21k
Transcript
UXΛ࣮ݱ͢ΔͨΊʹԿ͕ඞཁ͔? ~ ࣮ฤ ~ UX Bridge vol.3 2017/12/14 ϝυϐΞגࣜձࣾ ΤϯδχΞ
pipopotamasu
self_introduce.json { “github”: “pipopotamasu”, “age”: 25, “company”: “ϝυϐΞגࣜձࣾ”, “tech”: [“Ruby”,
“PHP”, “Vue.js”, “React”], “hobby”: [“ٿ”, “өը”], }
ϝυϐΞͬͯ?
ҩࢣઐ༻ͷϝσΟΞαΠτ
ࠓͷ͓
UXΛ࣮ݱ͢ΔͨΊʹ Կ͕ඞཁ͔?
ࣗͷମݧஊ
લ৬ͷ͓
αΫηεετʔϦʔ
Ͱͳ͍
ࣦഊஊ
ͭ·Γɻɻɻ
~ UXฤ ~
UXΛ࣮ݱͰ͖ͳ͔ࣦͬͨഊஊ
※ൃදऀUXʹৄ͋͘͠Γ·ͤΜ
None
None
ຊʹೖΓ·͢
Ή͔͠ɺΉ͔͠ɺ ͋Δͱ͜Ζʹ WebۀγεςϜ ΛϦϓϨΠε͢Δ ϓϩδΣΫτʹଐ͞Εͨ ৽ถΤϯδχΞ͕͍·ͨ͠ɻ
৽ถΤϯδχΞϚωʔδϟʔ ʹਘͶ·ͨ͠ ͳͥγεςϜΛϦϓϨΠε͢Δඞ ཁ͕͋ΔΜͰ͔͢
ͦΕͶɺݱߦͷγεςϜΑΓޮ తʹ࡞ۀͰ͖ΔγεςϜΛಋೖ͠ɺ ΛݮΒͨ͢ΊͩΑ
ʙɺ͡Ό͋ͳͥݱߦͷγεςϜͰ ޮྑ͘࡞ۀͰ͖ͳ͍ͷ
࣮ͶɺݱߦͷγεςϜʹ ͜Μͳ՝͕͋ΔΜͩɻ
ݱߦͷۀγεςϜͷ՝ • ϖʔδΓସ͕͑ଟ͍ • ॾൠͷࣄʹΑΓলུ
ݱߦͷϦαʔνγεςϜͷ՝ • ϖʔδΓସ͕͑ଟ͍ • ॾൠͷࣄʹΑΓলུ ϢʔβʔωοτϫʔΫ͕ ͍ ௨৴Πϯϑϥ͕͍ͬͯͳ͍ ࠃͷਓʑɻ
ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕͍
ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕͍ || ۀ͕ਐ·ͳ͍
ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕͍ || ΠϥΠϥʂ
ʘ(^o^)ʗ
ͳΔ΄Ͳʙɺ͡Ό͋͜ͷ՝Λղܾ͢Δ ͜ͱ͕Ͱ͖Ε͍͍ΜͩͶʂ
ͭ·Γɺ͜ͷϓϩδΣΫτͰୡ͖͢69 ʮΠϥΠϥͤ͞ͳ͍ʯ ͜ͱͳΜͩͶʂ
ඪͱ͢Δ69Θ͔ͬͨ ͧʂ ͰɺͲ͏͢Ε͜ͷ69Λ࣮ݱͰ͖ΔΜ ͩΖ͏
ͦ͜Ͱ͜ͷϓϩδΣΫτͰ ʮ41"ʯʹ͢Δ͜ͱͰɺۃྗϖʔδભҠΛ ىͣ͜͞ʹϢʔβʔ͕ૢ࡞Ͱ͖ΔΑ͏ʹ͠Α ͏ͱࢥ͏Μͩɻ
SPA(Single Page Application) • ৄ͍͠આ໌ׂѪ(σϞ)
SPA(Single Page Application) ग़య: https://msdn.microsoft.com
SPA(Single Page Application) ɾ)5.- ɾ$44 ɾ+BWB4DSJQU ɾը૾ ɾ+40/
ͳΔ΄Ͳʂ ͜͏͢Ε௨৴͢Δσʔλྔ͕࠷খݶʹࡁΉͶʂ ૣͲ͏͍͏෩ʹ͜ͷ41"Λ։ൃ͍ͯ͠Δͷ͔ɺطʹ+PJO ͍ͯ͠ΔઌഐΤϯδχΞʹฉ͍ͯΈΑ͏ʂ
͢Έ·ͤʙΜɺ41"ͬͯͲ͏͍͏෩ʹ࣮ ͍ͯ͠ΔΜͰ͔͢
K2VFSZͱK2VFSZ6*Λͬͯ࡞ͬͯΔΑɻ ࣌ؒͳ͍͠ૣҰॹʹ։ൃ͍ͯ͜͠͏͔ɻ
͜ͷͱ͖ɺ͜ͷԿؾͳ͍Ұݴ͕ ൵ܶΛੜΉͱߟ͑͠ͳ͔ͬ ͨɻɻɻ
ϲ݄ޙɺ ͜ͷγεςϜຊ൪ӡ༻͞ΕΔ͜ ͱͱͳͬͨɻɻɻ
݁Ռ
ੵΈॏͳΔόάϨϙʔτ
मਖ਼ΛڋΈଓ͚Δ εύήοςΟίʔυ
ऴΘΒͳ͍ແݶϧʔϓ όά मਖ਼
ͦͯ͠…
Δɺۀ
ཧͱݱ࣮
ཧ
ϖʔδભҠͳ͠Ͱ͘͘͞͞ ૢ࡞Ͱ͖Δ
ݱ࣮
όάͰૢ࡞Ͱ͖ͳ͍
ཧ
ۀޮUP↑
ݱ࣮
όάͰۀ͕ΕΔ
ͳͥ͜Μͳ͜ͱʹͳͬͨͷ͔?
ݪҼ͍Ζ͍Ζ͋Δ͕ɺ ٕज़తͳ؍͔Βɻɻɻ
ٕज़બఆΛؒҧ͑ͨ
ϓϩδΣΫτͷ·ͱΊ • UXͷఆٛ → ΠϥΠϥͤ͞ͳ͍ • UXΛ࣮ݱ͢Δํ๏ → SPA •
SPAͷ࣮ํ๏ → jQuery, jQueryUI
ϓϩδΣΫτͷ·ͱΊ • UXͷఆٛ → ΠϥΠϥͤ͞ͳ͍ • UXΛ࣮ݱ͢Δํ๏ → SPA •
SPAͷ࣮ํ๏ → jQuery, jQueryUI 41"ͷ࣮ͷෆຯ͕͞ଟ͘ ͷόάΛੜΈɺۀʹࢧোΛ͖ͨ͠ ͯ͠·ͬͨɻ
ͦͦ… • SPAΛ࣮͢ΔͷʹjQueryద͍ͯ͠ͳ͍ • ͬͱదٕͨ͠ज़͕͋ͬͨ (React, Vue.js, AngularJS) • ։ൃஈ֊ͰjQueryͰ࣮Λଓ͚Δͱ͍ͱ
͍͏ڞ௨ೝ͕ࣝϝϯόʔؒͰ͋ͬͨ
SPAΛ࣮͢ΔͷʹjQueryద͍ͯ͠ͳ͍ • UI(DOM)Λૢ࡞ ʴ UIʹσʔλΛຒΊࠐΉ • ૢ࡞͗͢͠ΔͱUIͷݱࡏͷঢ়ଶ͕Θ͔Βͳ͘ ͳΔ → ঢ়ଶཧ͕͍͠
• ݱࡏͷUIͷঢ়ଶ͕Θ͔Βͳ͍ͷʹ͞ΒʹUIΛ ૢ࡞ or σʔλऔಘ͢Δ → όά͕ൃੜ͢Δ
ͬͱదٕͨ͠ज़͕͋ͬͨ • React, Vue.js, AngularJS • σʔλͱUIΛ • ্هʹΑΓɺঢ়ଶཧ͕͘͢͠ͳΔ ߏ(ύλʔϯ)Λఏڙ
։ൃஈ֊ͰjQueryͰ࣮Λଓ͚Δͱ͍ͱ ͍͏ڞ௨ೝ͕ࣝϝϯόʔؒͰ͋ͬͨ • ৽ถΤϯδχΞ͕։ൃʹࢀՃͨ͠ॳ͔Β • jQueryΑΓదٕͨ͠ज़ͷଘࡏϝϯόʔͬ ͍ͯͨ • ϝϯόʔʹͦͷٕज़Λѻ͑Δਓ͕͍ͳ͔ͬͨɺ ࣗൃతʹษڧ͠Α͏ͱ͢Δਓ͕͍ͳ͔ͬͨ
(ؚࣗΊ)
݁
ٕज़ྗ͕ͳ͔͔ͬͨΒ UX͕࣮ݱͰ͖ͳ͔ͬͨ
Γͳ͍ٕज़Λ ษڧ͠Α͏ͱ͠ͳ͔ͬͨ UX͕࣮ݱͰ͖ͳ͔ͬͨ
࣌ྲྀΕ…
؆୯ͳܦྺ • 2014/04~ SIer • 2015/10~ Webܥاۀ • 2017/04~ ϝυϐΞגࣜձࣾ
ࠓޙಉ͡Α͏ͳࣦഊΛ ܁Γฦͨ͘͠ͳ͍
ษڧͩʂʂ
None
UXΛ࣮ݱ͢ΔͨΊͷ ٕज़ΛೖͰ͖Δ ڥͮ͘Γ
None
ੲɺࣦഊͨ͜͠ͱΛ ܁Γฦ͞ͳ͍Α͏ʹ
ऴΘΓʹ
UXΛ࣮ݱ͢ΔͨΊʹԿ͕ඞཁ͔?
ٕज़ͱҙཉ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
༨ஊ
৽͍͠(ະܦݧ)ٕज़ೖʹ
Կ͔͠Βͷཧ༝͕͋Δ
͕͔͔࣌ؒΔ
࿑ྗ͕͔͔Δ
ͦͷઌʹϢʔβʔ͕͍Δ
ͦͷνϟϨϯδΛԠԉ͍ͯͩ͘͠͞
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠