Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
20210525_react_next.pdf
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ozaki25
May 25, 2021
Technology
170
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
20210525_react_next.pdf
ozaki25
May 25, 2021
Transcript
19 slides
3FBDUͰͰ͖Δ͜ͱ /FYUKTͰͰ͖Δ͜ͱ
3FBDUͰͰ͖Δ͜ͱ
3FBDUΛ͏ͱԿ͕Ͱ͖Δͷʁ w 6*ίϯϙʔωϯτΛ࡞Δ͜ͱ͕Ͱ͖Δ w 6*ίϯϙʔωϯτΛΈ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ ϝΠϯͷػೳ͜Ε͚ͩʂ ଞ͓·͚Έ͍ͨͳͷ Ͱ͓·͚͕ෳࡶͩͬͨΓ͢Δ
6*ίϯϙʔωϯτͱʁ w )5.-$44+BWB4DSJQUͷ͔ͨ·Γ ίϯϙʔωϯτ͔ΒίϯϙʔωϯτΛݺͼग़ͨ͠Γ͢Δ ίϯϙʔωϯτΛΈ߹ΘͤΔ͜ͱͰը໘Λ࡞Δ https://stackblitz.com/edit/aa-seminar-react-step2?file=src/App.js
ίϯϙʔωϯτΛ͏͚ͩʁ w ੩తͳϖʔδͰ͋Ε͜Ε͚ͩͰࡁΉ w ࣮ࡍಈతͳϖʔδ͕ଟ͍ͷͰ͜Ε͚ͩͰΓͳ͘ͳΔ
ಈతͳΛຒΊࠐΈ͍ͨ w ίϯϙʔωϯτʹຒΊࠐΉσʔλ͕ಈతͳ࣌ Ҿͱͯ͠͠ɺड͚औͬͨΛຒΊࠐΉ ड͚औͬͨΛ ຒΊࠐΉ ಈతͳҾͰ͢ ಉ͡ίϯϙʔωϯτͰ දࣔ༰͕ҧ͏
https://stackblitz.com/edit/aa-seminar-react-step3?file=src/components/ListItem/ListItem.js
ঢ়ଶͷมߋΛཧ͍ͨ͠ w Ϣʔβͷૢ࡞ͳͲͰมԽ͢ΔΛอ͓͖͍࣋ͯͨ࣌͠ VTF4UBUFͰཧ͢Δ͜ͱ͕Ͱ͖Δ ཧ͢ΔͷॳظΛఆٛ ཧ͢ΔΛߋ৽Ͱ͖Δ Ϣʔβͷૢ࡞ ͜͜ͰΫϦοΫ ΛτϦΨʔʹ
ؔΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ https://stackblitz.com/edit/aa-seminar-react-step4?file=src/components/Counter/Counter.js
3FBDUͷͦͷଞͷػೳ w ଞʹ3FBDU͕ఏڙ͢Δػೳ͋Δ͕ ϝΠϯͲ͜Ζ͜Μͳͱ͜Ζ w ͦΕҎ֎֎෦ϥΠϒϥϦΛ͏͔ ७ਮͳ+BWB4DSJQUͱͯ͠ॲཧΛॻ͘ ଞͷػೳެࣜΨΠυΛࢀߟʹ͍ͯͩ͘͠͞ IUUQTKBSFBDUKTPSHEPDTIFMMPXPSMEIUNM
७ਮͳ+BWB4DSJQUͰؤுΔྫ w "1*͔ΒσʔλΛऔಘͨ͠ΓσʔλΛૹ৴͢Δॲཧ ࣗલͰॻ͘ඞཁ͕͋Δ ௨৴ॲཧ ௨৴ॲཧͰऔಘͨ͠ σʔλΛTFU͠ը໘ʹදࣔ https://stackblitz.com/edit/aa-seminar-react-step5?file=src/components/Articles/Articles.js
w ෳͷϖʔδͷΞϓϦΛ࡞Γ͍ͨ߹SFBDUSPVUFSͳͲͷ ϥΠϒϥϦΛ͏ͷ͕ϕλʔ ֎෦ϥΠϒϥϦΛ͏ྫ 63-ʹԠͯ͡දࣔ͢Δ ίϯϙʔωϯτΛΓସ͑Δ https://stackblitz.com/edit/aa-seminar-react-step6?file=src/routes/router.js
3FBDUͰͰ͖Δ͜ͱ w ίϯϙʔωϯτΛ࡞ͬͯΈ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ w ಈతͳΞϓϦΛ࡞ΔͨΊͷঢ়ଶཧͳͲ࠷ݶͷ͜ͱ w ͦΕҎ֎७ਮͳ+BWB4DSJQUͰ࣮͢Δ͔ ֎෦ϥΠϒϥϦΛ͏͜ͱʹͳΔ
/FYUKTͰͰ͖Δ͜ͱ
/FYUKTΛ͏ͱԿ͕Ͱ͖Δͷʁ w 3FBDUΛแͯ͠ΔͷͰ3FBDUͰͰ͖Δ͜ͱͰ͖Δ w ઃఆͳ͠ͰࣗಈͰͬͯ͘ΕΔܥ w ίϯϙʔωϯτͷྖҬΛ͑ͨܥ
ઃఆͳ͠ͰࣗಈͰͬͯ͘ΕΔܥ w 8FCQBDLͷઃఆΛࣗͰΒͳͯ͘Α͍ w ֤छઃఆΛ؆୯ઃఆͳ͠Ͱ͑Δ w 5ZQF4DSJQU w $44.PEVMFT w
4BTT4$44
ઃఆͳ͠ͰࣗಈͰͬͯ͘ΕΔܥ w ϑΥϧμߏ͕ͦͷ··ϧʔςΟϯάʹͳΔ w SFBDUSPVUFS͕ෆཁ 63- ϑΝΠϧ VTFST QBHFTVTFSTJOEFYKT
VTFSTOFX QBHFTVTFSTOFXKT VTFST QBHFTVTFST<JE>JOEFYKT VTFSTFEJU QBHFTVTFST<JE>FEJUKT
ίϯϙʔωϯτͷྖҬΛ͑ͨܥ "1*ͷࣗಈੜ w BQJԼʹϑΝΠϧΛ࡞Δͱ+40/ Λฦ͢ΤϯυϙΠϯτʹͳΔ ύϑΥʔϚϯε࠷దԽ w ը૾αΠζͷࣗಈ࠷దԽ w ϦϯΫͷࣗಈઌಡΈ
443 4FSWFS4JEF3FOEFSJOH w αʔόαΠυͰ3FBDUίϯϙʔωϯ τΛੜͯ͠)5.-Λฦ͢͜ͱ͕Ͱ ͖Δ 44( 4UBUJD4JUF(FOFSBUF w "1*ͳͲ͔Βऔಘͨ͠σʔλΛຒΊ ࠐΜͩঢ়ଶͷ)5.-ΛੜͰ͖Δ w ͍ΘΏΔ+BNTUBDLͰΘΕΔ
/FYUKTͰͰ͖Δ͜ͱ w 3FBDUʹগ͠ϧʔϧ͕Ճ͞ΕΔ͜ͱͰઃఆָ͕ʹͳΔ w σΟϨΫτϦߏϕʔεͷϧʔςΟϯά w 5ZQF4DSJQU$44.PEVMFTͷઃఆ؆ུԽ w ίϯϙʔωϯτͷྖҬΛ͑ͨػೳ͕͑Δ w
"1*ͷੜ w 44344(
·ͱΊ
·ͱΊ w 3FBDUίϯϙʔωϯτϥΠϒϥϦ ͳͷͰࣗલͰؤுΒͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ଟ͍ w /FYUKT3FBDUΑΓറΓ͕গ͠૿͑ΔઃఆͳͲָ͕ʹͳΔ ίϯϙʔωϯτͷྖҬΛ͍͑ͨΖ͍Ζͳ͜ͱ͕Ͱ͖Δ w ϖʔδભҠͷ͋ΔΞϓϦͳΒ/FYUKTे༗༻ w
44344(ͳͲ͚ͨ͠Ε/FYUKTߋʹޮՌత
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
210
Webフロントエンドはなぜ複雑なのか
ozaki25
1
160
utility first css
ozaki25
0
130
20201225_how_to_learn_technology.pdf
ozaki25
0
190
20201124_blitz.pdf
ozaki25
0
120
20200727_liff_app.pdf
ozaki25
1
690
20200721_web_vitals.pdf
ozaki25
0
130
20200624_web_otp_api.pdf
ozaki25
1
160
20200128_sentry.pdf
ozaki25
0
130
Other Decks in Technology
See All in Technology
「AIチャットからもできないの?」と言われたら ~業務アプリをMCP対応するときの認証・認可の勘所
oidfj
0
310
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
120
An Introduction to Context Ontology Accelerator (teaching AI agents what your data means)
inariku
PRO
1
220
Biohub - Cell Tracking During Development 5th place solution
rist
0
130
開発者とAIで共に歩み育てていく OSS開発 ~創造しながら育てていく~ / 20261105 Masaki Okuda
shift_evolve
PRO
1
110
BALLAS Technology Deck
ballas_inc
0
540
Kiro Crew 入門 (手を離しても進む仕事) | 目指せ Kiro マスター 11
inariku
PRO
4
710
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
140
Claude Codeで新規事業を伸ばせるか? Zennの試行錯誤の記録
wadayusuke
1
140
あの日、見つかっていなかったらどうなっていたか
kazzpapa3
2
130
The Author Pays
hiccupps
0
180
cdkd (CDK Direct)
gotok365
4
290
Featured
See All Featured
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
380
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
Are puppies a ranking factor?
jonoalderson
2
4.2k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Claude Code のすすめ
schroneko
67
230k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
460
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.3k
Raft: Consensus for Rubyists
vanstee
143
7.9k
Designing for Timeless Needs
cassininazir
1
560
What's in a price? How to price your products and services
michaelherold
247
13k
How STYLIGHT went responsive
nonsquared
100
6.4k
How to Talk to Developers About Accessibility
jct
2
620