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
890
UXBridge_vol3_pipopotamasu
UXBridgeの3回目の発表資料です。
pipopotamasu
December 16, 2017
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
190
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
94
medpacker_introduction_20190523
pipopotamasu
0
500
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.8k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
240
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
570
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1.1k
Other Decks in Technology
See All in Technology
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
110
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
180
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
150
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
850
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
590
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
130
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building an army of robots
kneath
306
45k
Gamification - CAS2011
davidbonilla
81
5.3k
Bash Introduction
62gerente
614
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Balancing Empowerment & Direction
lara
1
380
Speed Design
sergeychernyshev
32
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
329
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Λ࣮ݱ͢ΔͨΊʹԿ͕ඞཁ͔?
ٕज़ͱҙཉ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
༨ஊ
৽͍͠(ະܦݧ)ٕज़ೖʹ
Կ͔͠Βͷཧ༝͕͋Δ
͕͔͔࣌ؒΔ
࿑ྗ͕͔͔Δ
ͦͷઌʹϢʔβʔ͕͍Δ
ͦͷνϟϨϯδΛԠԉ͍ͯͩ͘͠͞
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠