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
860
UXBridge_vol3_pipopotamasu
UXBridgeの3回目の発表資料です。
pipopotamasu
December 16, 2017
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
170
vue-function-tester
pipopotamasu
2
1.1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
88
medpacker_introduction_20190523
pipopotamasu
0
480
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.7k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
210
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
490
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
0
1k
Other Decks in Technology
See All in Technology
消し忘れリソースゼロへ!私のResource Explorer活用法
cuorain
0
140
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
アーキテクチャわからん、の話
shirayanagiryuji
0
150
[SRE kaigi 2025] ガバメントクラウドに向けた開発と変化するSRE組織のあり方 / Development for Government Cloud and the Evolving Role of SRE Teams
kazeburo
4
1.9k
あなたはJVMの気持ちを理解できるか?
skrb
5
2k
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
4
760
インフラコストとセキュリティ課題解決のためのリアーキテクチャリング / srekaigi2025
hgsgtk
3
4.2k
Enhancing SRE Using AI
yoshiiryo1
1
260
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
220
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
160
Amazon Aurora バージョンアップについて、改めて理解する ~バージョンアップ手法と文字コードへの影響~
smt7174
1
240
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
1
410
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
It's Worth the Effort
3n
184
28k
Rails Girls Zürich Keynote
gr2m
94
13k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
4 Signs Your Business is Dying
shpigford
182
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
220
Gamification - CAS2011
davidbonilla
80
5.1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
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Λ࣮ݱ͢ΔͨΊʹԿ͕ඞཁ͔?
ٕज़ͱҙཉ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
༨ஊ
৽͍͠(ະܦݧ)ٕज़ೖʹ
Կ͔͠Βͷཧ༝͕͋Δ
͕͔͔࣌ؒΔ
࿑ྗ͕͔͔Δ
ͦͷઌʹϢʔβʔ͕͍Δ
ͦͷνϟϨϯδΛԠԉ͍ͯͩ͘͠͞
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠