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
fand/amagitakayosi
March 05, 2016
Technology
12
4.2k
Designing in React: Why and How
FRONTEND CONFERENCE 2016
http://kfug.jp/frontconf2016/
fand/amagitakayosi
March 05, 2016
Tweet
Share
More Decks by fand/amagitakayosi
See All by fand/amagitakayosi
How to hack VS Code: evil ways (Japanese)
fand
5
3.4k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
460
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.6k
Real World GLSL
fand
0
230
APIs for VJ-ing
fand
1
6.6k
Style your Components with styled-component!
fand
1
630
Other Decks in Technology
See All in Technology
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
AWSでRAGを作る法方
sonoda_mj
1
140
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Classmethod Odyssey 登壇資料
yamahiro
0
390
地理情報とAPIのトレンド
nagix
0
160
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
Featured
See All Featured
Visualization
eitanlees
139
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
The Mythical Team-Month
searls
217
43k
Embracing the Ebb and Flow
colly
81
4.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Designing for humans not robots
tammielis
247
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Being A Developer After 40
akosma
72
580k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Facilitating Awesome Meetings
lara
46
5.8k
Practical Orchestrator
shlominoach
185
10k
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 ͷ͍͢͝εϐʔυͰ ৽͍͠ઓ͕ߦΘΕ͍ͯΔ