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
120
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
540
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
280
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
Where will it converge?
ibknadedeji
0
140
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.5k
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
100
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
410
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
480
What is BigQuery?
aizack_harks
0
130
いまさら聞けない ABテスト入門
skmr2348
1
200
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
130
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
BBQ
matthewcrist
89
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Gamification - CAS2011
davidbonilla
81
5.5k
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 ͷ͍͢͝εϐʔυͰ ৽͍͠ઓ͕ߦΘΕ͍ͯΔ