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
Designing in React: Why and How
Search
Amagi
March 05, 2016
Technology
12
4.4k
Designing in React: Why and How
FRONTEND CONFERENCE 2016
http://kfug.jp/frontconf2016/
Amagi
March 05, 2016
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
110
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
530
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
270
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
160
shake-upを科学する
rsakata
7
930
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
390
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
860
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.5k
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
780
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
230
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
AI エージェントと考え直すデータ基盤
na0
18
7.3k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Music & Morning Musume
bryan
46
6.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bash Introduction
62gerente
613
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Cult of Friendly URLs
andyhume
79
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Designing in id:amagitakayosi WHY and HOW? React
@amagitakayosi
ۀͰ3FBDUͬͯ·͢
Έͳ͞Μ 3FBDU ͬͯ·͔͢ʁ
ࠓ 3FBDUͱʁ ͱ͍͏͠·ͤΜ
͔ΘΓʹ 3FBDUք۾Ͱ Կ͕ى͖ͯΔͷʁ ͱ͍͏Λ͠·͢
3FBDUͷྺ࢙
✨3FBDUੜ✨ w ެ։ w େنͳίʔυϕʔεͰ͑ΔΑ͏ʹ w ࠶ར༻Մೳͳίϯϙʔωϯτ w ୯ํͳσʔλϑϩʔ
None
3FBDU "OHVMBS
3FBDUͷྑ͍ͱ͜Ζ
γϯϓϧ ͍ ςετ͍͢͠ ใ͕๛ ࣮͕͋Δ *NNVUBCMF *TPNPSQIJD 'VUVSFPSJFOUFE
ैདྷͷϑϨʔϜϫʔΫͱͷҧ͍ w ίϯϙʔωϯτࢦʹͳΓ͍͢ w ୯ํͳσʔλϑϩʔ
ίϯϙʔωϯτࢦ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ શͯͷৼΔ͍͕CBSͷͰܾ·Δ w 7JSUVBM%0. w %0.Λ৮Εͳ͍ w ଞͷίϯϙʔωϯτʹյ͞ΕΔࣄ͕ͳ͍
୯ํͳσʔλϑϩʔ w XBZCJOEJOH w ࢠ͕ͷΛॻ͖͑Δ͜ͱ͕ͳ͍ʂ w 'PPCBS\CB[^ͱ͍͏ίϯϙʔωϯτ CBSͷΛมߋͰ͖ͳ͍
ࢀߟ3FBDUGPS%FTJHOFST IUUQSFBDUGPSEFTJHOFSTDPNMBCTSFBDUKTJOUSPEVDUJPOGPSQFPQMFXIPLOPXKVTU FOPVHIKRVFSZUPHFUCZ
3FBDUք۾ͷϒʔϜ w 'MVYϑϨʔϜϫʔΫઓ૪ w *NNVUBCMF ؔܕ '31 w 3FBDU/BUJWF
'MVYઓ૪ QIPUPCZ+BTPO"4BNGJFME IUUQTXXXGMJDLSDPNQIPUPT!/
w 3FBDUͨͩͷ7JFXϥΠϒϥϦ w 'MVYͱ͍͏ઃܭख๏͕ྲྀߦ w ϑϨʔϜϫʔΫ͕ཚཱ
'VODUJPOBM 3FBDUJWF 1SPHSBNNJOH
w ؔܕݴޠͷӨڹΛड͚ͨ ઃܭख๏ϥΠϒϥϦ͕ྲྀߦ w *NNVUBCMF+4 0N ʜʜ
3FBDU/BUJWF
w 3FBDUͰJ04"OESPJEΞϓϦΛ։ൃ w +4࣮ߦΤϯδϯ͕σόΠε্ͰΔ w Ϗϧυͳ͠Ͱ+4ΛϦϩʔυ
Ͱɺ3FBDUͷσβΠϯͬͯʜʜ w σβΠφʔ৮ΓͮΒ͍ΜͰ͠ΐʁ w ςϯϓϨʔτ͍͡Γʹ͍͘ w Ξχϝʔγϣϯ͍͠ w +4ॻ͚ͳ͍ͱ͍͚ͳ͍ʁʁ
ʢ◞‸◟ʣ
σβΠϯपΓͰಈ͖͕ʂʂ w #&. w $44JO+4 w ֤ΞχϝʔγϣϯϥΠϒϥϦ
BEM
#&.͕ྲྀߦ w #MPDL &MFNFOU .PEJpFSʹ͚ͯ ελΠϧΛॻ͘ख๏ w 3FBDUͱ#&.૬ੑ͕͍͍ w ίϯϙʔωϯτ㲈#MPDL
None
Block Element Modifier
CSS in JS
$44᠘ͩΒ͚ w શ෦άϩʔόϧ w ΧεέʔσΟϯάɺ༏ઌ w มɺ͔ؔͭ͑ͳ͍ w ܧঝͰ͖ͳ͍ʜʜ
ϓϦϓϩηοαͷ࣌ w 4BTT -FTT 4UZMVT ʜʜ w ࠷ۙͩͱ1PTU$44ͱ͔
ͦΕ+4Ͱྑ͘Ͷʁ 3FBDU։ൃϝϯόʔ $ISJTUPQIFS$IFEFBV
None
$44JO+4ొ w 3FBDUίϯϙʔωϯτఆٛͰ TUZMFଐੑʹελΠϧΛࢦఆ w มɺؔɺͳΜͰ͑Δ
CSS in JSͷίʔυྫ
ओͳ$44JO+4ϥΠϒϥϦ w 3BEJVN%FDPSBUPSͰίϯϙʔωϯτΛϥο ϓ w $4+45FNQMBUF4USJOHͰελΠϧΛهड़ w $44.PEVMFT$44ϑΝΠϧΛಡΈࠐΉ
Animation
3FBDUඪ४ͷΞχϝʔγϣϯ w GCʮ3FBDU$445SBOTJUJPO(SPVQͰ ࡉ੍͔͘ޚͰ͖ΔΑʔ ?P? ʗʯ w ཁૉͷग़ݱɺফ໓ͦΕͧΕʹ ελΠϧΛͯΒΕΔ
3FBDU$445S SZͷ͍ํ w 3FBDU$445SBOTJUJPO(SPVQͰ ରͷίϯϙʔωϯτΛXSBQ w FOUFS MFBWF FOUFSBDUJWFͷΫϥεʹ ελΠϧΛهड़
ओͳΞχϝʔγϣϯϥΠϒϥϦ w SFBDUNPUJPO w SFBDUXFCBOJNBUJPO w SFBDUWFMPDJUZ
SFBDUNPUJPO w ࠓͷͱ͜ΖҰ൪ਓؾ TUBST w FBTJOHؔΛબͿͷͰͳ͘ɺ όωͷߗ͞Ͱಈ͖ΛΧελϚΠζ͢Δ
όωͷߗ͞
SFBDUWFMPDJUZ w 7FMPDJUZKTͷϥούʔ w K2VFSZ͔࣌Β͓ੈʹͳͬͯͨํ ଟ͍ͣ
SFBDUXFCBOJNBUJPO w 8FC"OJNBUJPOT"1*ͷϥούʔ w ʹެ։͞Ε͔ͨΓʂ
8FC"OJNBUJPOT"1* w $44 47(ʹͭͮ͘ ৽͍͠Ξχϝʔγϣϯ"1* w λΠϜϥΠϯ ΩʔϑϨʔϜϕʔε ࠶ੜఀࢭר͖͠Մೳ w
࠶ੜޙͷίʔϧόοΫΛઃఆͰ͖Δ
·ͱΊ
ΈΜͳ3FBDUͰ༡΅͏ʂʂ w ͜Ε·Ͱͷ.7$ΞʔΩςΫνϟͱ ҰઢΛը͍ͯ͠Δ w ಠಛͷจԽݍ͕ੜ·Ε͍ͯΔ w ͷ͍͢͝εϐʔυͰ ৽͍͠ઓ͕ߦΘΕ͍ͯΔ