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
プロセス改善による品質向上事例
tomasagi
1
1.6k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Building Products in the LLM Era
ymatsuwitter
10
4.4k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
データの品質が低いと何が困るのか
kzykmyzw
6
1k
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
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Λ࣮ݱ͢ΔͨΊʹԿ͕ඞཁ͔?
ٕज़ͱҙཉ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
༨ஊ
৽͍͠(ະܦݧ)ٕज़ೖʹ
Կ͔͠Βͷཧ༝͕͋Δ
͕͔͔࣌ؒΔ
࿑ྗ͕͔͔Δ
ͦͷઌʹϢʔβʔ͕͍Δ
ͦͷνϟϨϯδΛԠԉ͍ͯͩ͘͠͞
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠