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/UXをないがしろにしない「きもちのいい」Webサービスの作り方
Search
Tsubasa SEKIGUCHI
December 07, 2022
Programming
0
130
UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方
Gunma.web #42
Tsubasa SEKIGUCHI
December 07, 2022
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
0
91
AWS/GCPで始める 生成AI入門
tinykitten
0
110
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
0
14
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
0
260
Rustとtonicで始める gRPC再入門
tinykitten
0
790
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
240
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
170
はじめての GitHub Actionsアクション開発
tinykitten
0
130
React Nativeではじめる ハイパフォーマンス スマホアプリ開発
tinykitten
0
91
Other Decks in Programming
See All in Programming
sappoRo.R #12 初心者セッション
kosugitti
0
280
color-scheme: light dark; を完全に理解する
uhyo
7
490
Domain-Driven Design (Tutorial)
hschwentner
13
22k
GoとPHPのインターフェイスの違い
shimabox
2
210
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Formの複雑さに立ち向かう
bmthd
1
940
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
PEPCは何を変えようとしていたのか
ken7253
3
270
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Language of Interfaces
destraynor
156
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Docker and Python
trallard
44
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How to Ace a Technical Interview
jacobian
276
23k
Building Adaptive Systems
keathley
40
2.4k
Building an army of robots
kneath
303
45k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Transcript
UI/UXΛͳ͍͕͠Ζʹ͠ͳ͍ ʮ͖ͪͷ͍͍ʯWebαʔϏεͷ࡞Γํ Head fi rst UX- fi rst web development
Photo by cottonbro on Pexels Gunma.web #42 ϓϩδΣΫτཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI
TinyKitten Freelance frontend engineer I 💖 Open source & Cat🐈
Born in Gunma🐴 Live in Tokyo🗼
Tsubasa SEKIGUCHI ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞɻࣾͰͳ͍Ͱ͢ɻ ͖ͬͨΜͱݺΕ͍ͯ·͢ɻ ϓϩμΫτཧπʔϧZenHub͕͖Ͱ͢
TrainLCD ຊશࠃͷమಓ࿏ઢͰ͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
͜ͷεϥΠυɺ3FBDUKTͰϓϩμΫτΛ ։ൃ͍ͯ͠Δ͜ͱΛલఏͱ͍ͯ͠·͢ɻ ͓͜ͱΘΓ
ΤϯδχΞࢹͰ 6*69σβΠϯɺॱௐͰ͔͢ʁ
࣮ɺ͜Μͳ๊͑ͯ·ͤΜ͔ʁ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕ ͍ͮΒ͍ʜ
͜ΕΒͷɺ ਓྗͰͳ͘πʔϧͰղܾ͠·͠ΐ͏ʂ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕
͍ͮΒ͍ʜ
ͨͱ͑ʜ
Case 1 σβΠφʔͱিಥ͕ى͖Δʜ
σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ͜ͷ࣮ͯ͠ΒͬͨσβΠϯɺ QYӈʹͣΕͯΔΜͰ͚͢Ͳɺमਖ਼ͯ͠Β͑·͔͢ʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
σβΠφʔͱিಥ͕ى͖Δʜ QYͷζϨͰ࠷ॳʹσβΠφʔʹ ݕͯ͠Β͏ʹͲ͏͢Ε͍͍ΜͩΖ͏ʁ
σβΠφʔͱিಥ͕ى͖Δʜ StorybookΛ͏ͱɺ 6*ίϯϙʔωϯτ୯ҐͰσβΠϯΛ֬ೝͰ͖·͢ʂ
িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ͓͏ Storybookͷಛ: - UIίϯϙʔωϯτΛ ϒϥβͰ֬ೝͰ͖Δ - PropsΛͯ͠ಈ࡞ΛݟͨΓ ΫϦοΫޙͷڍಈΛ֬ೝͰ͖Δ - ReactҎ֎ʹ͍Ζ͍Ζͳ
ϑϨʔϜϫʔΫʹରԠ
σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ4UPSZCPPLݟͨΜ͚ͩͲɺ ɹɹɹɹɹɹ͍͍ײ͡ʹ࣮Ͱ͖ͯͯخ͍͠Αʂʯ ΤϯδχΞʮΑ͔ͬͨͰ͢ʂʯ
িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ͓͏ Pro Tips: - ࣮ɺσβΠϯσβΠφʔ͚ͩͷࣄͰͳ͍͔͠Ε·ͤΜɻ ΑΓྑ͍ϓϩμΫτ։ൃͷͨΊʹɺࣗ͝σβΠϯΛษڧͯ͠ΈΔͱɺ ͬͱੈք͕͕Δ͔͠Ε·ͤΜ😲
Case 2 ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ 1E.ʮͳΜ͔͜ͷΞϓϦॏ͘ͳ͍ʁͳΜͱ͔Ͱ͖ͳ͍Ͱ͔͢ʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ Ͱͳͯ͘ɺ ύϑΥʔϚϯεͷσάϨΛͲ͏ͬͯݕͰ͖Δ͔ʁ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ ύϑΥʔϚϯενϡʔχϯάͷେݪଇͱͯ͠ʜ ܭଌͰ͖ͳ͍ͳΒ҆қʹ͞ͳ͍΄͏͕͍͍ʂ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ ύϑΥʔϚϯεͷܭଌʹ৭ʑͱํ๏͕͋Γ·͕͢ʜ $ISPNF%FW5PPMT͕ޮՌతʂ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ DevToolsͷϊϋ: - εϩοτϦϯάΛ͠Α͏ ΤϯυϢʔβʔʹ͍ۙܭଌΛߦ͏ͨΊʹɺ CPUɺωοτϫʔΫͳͲͷ εϩοτϦϯάΛ͠·͠ΐ͏ʂ -ܭଌ͠Α͏ ChromeʹϓϩϑΝΠϦϯάͷͨΊͷ πʔϧ͕ࡌ͞Ε͍ͯ·͢ɻ
Ͳͷॲཧ͕ॏ͍͔Λಛఆ͠·͠ΐ͏ɻ - User Timing APIΛ͏ Ͳͷൣғ͕ύϑΥʔϚϯε͕ ѱ͍͔͍ͬͯΔ߹ɺࢦఆൣғͷ ύϑΥʔϚϯεΛܭଌͰ͖·͢ɻ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ 1E.ʮΤϯδχΞ͞Μ͕ ύϑΥʔϚϯενϡʔχϯάΛͬͯ͘Ε͓͔ͨ͛Ͱ ɹɹɹϢʔβʔ͞Μ͔Βͷධ্ʑͩΑʂʯ ΤϯδχΞʮେมͰ͕ͨ͠ɺύϑΥʔϚϯε͕վળͯ͠Α͔ͬͨʂʯ
ͳ͔ͥΞϓϦ͕͍ͮΒ͍ʜ Pro Tips: - ࠒ͔ΒύϑΥʔϚϯεʹΛޫΒͤ·͠ΐ͏🐈 ࠒ͔ΒύϑΥʔϚϯεͷࢹΛߦ͑ ͍ͭͷؒʹ͔ϓϩμΫτ͕ॏ͘ͳͬͯ͠·͏͜ͱΛճආͰ͖·͢😋 ύϑΥʔϚϯεΛࢹ͢Δ༗໊Ͳ͜ΖͷπʔϧͰɺ New RelicͳͲ͕͋Γ·͢Α😲
Case 3 σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮͬͺΓ͜͜σβΠϯͱҧ͍·͢Αʁʯ ΤϯδχΞʮʁͦΜͳͣͳ͍ʜʯ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ ϐΫηϧύʔϑΣΫτͱݴΘͣͱɺ σβΠϯΛ࣮ʹ࠶ݱ͢Δํ๏ͳ͍͔ʁ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠϯͷڞ௨ҙࣝΛ͢Γ߹ΘͤΔπʔϧʜ 'JHNB͕Ξπ͍ʂ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ FigmaͷԿ͕Ξπ͍ͷʁ - σβΠϯ͔ΒCSSΛॻ͖ग़ͤΔ σβΠϯΛͦͷ··CSSʹམͱ͠ࠐΊΔͷͰɺ Web։ൃ͕ޮతʹͳΓ·͢ʂ - Webϒϥβ͔ΒͰ͑Δ ࣮Webϒϥβ͔Β͑·͢ʂ ΤϯδχΞͷPCʹΞϓϦΛೖΕͳͯ͘ɺ
σβΠϯΛ֬ೝͰ͖·͢ʂ -ҐஔΛURLͰ͢͜ͱ͕Ͱ͖Δ σβΠφʔ͕ݟ͍ͯΔҐஔΛͦͷ··ΤϯδχΞʹ URLʹͯ͠γΣΞ͢Δ͜ͱ͕Ͱ͖·͢ʂ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮΤϯδχΞ͞Μͷ࡞ͬͯ͘ΕͨσβΠϯɺ ɹɹɹɹɹɹͷ࡞ͬͨσβΠϯʹ࣮Ͱخ͍͠Αʂʯ ΤϯδχΞʮ'JHNBͷ͓͔͛ͰͳΜͱ͔࣮ʹσβΠϯΛ࠶ݱͰ͖·ͨ͠ɻʯ
σβΠϯΛ࣮ʹ࠶ݱͰ͖ͳ͍ Pro Tips: - ΤϯδχΞͰɺσβΠϯπʔϧʹΛͬͯΈͯʁ Figma͍ͭ·ͰΘΕΔ͔Θ͔Γ·ͤΜɻ σβΠφʔ͕͍ͭπʔϧΛม͙͑ͯ͢ʹॱԠͰ͖ΔΑ͏ʹɺ σβΠϯπʔϧʹΞϯςφΛཱͯͯΈΔͷ͍͔͕Ͱ͠ΐ͏͔ʁ
͜ΕΒͷɺ πʔϧΛָͬͯʹղܾ͠·͠ΐ͏ σβΠφʔͱ িಥ͕ى͖Δʜ σβΠϯΛ࣮ʹ ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕
͍ͮΒ͍ʜ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Photo by cottonbro on Pexels
Gunma.web #42 ϓϩδΣΫτཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI