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
20210525_react_next.pdf
Search
ozaki25
May 25, 2021
Technology
0
130
20210525_react_next.pdf
ozaki25
May 25, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
170
Webフロントエンドはなぜ複雑なのか
ozaki25
1
130
utility first css
ozaki25
0
97
20201225_how_to_learn_technology.pdf
ozaki25
0
160
20201124_blitz.pdf
ozaki25
0
90
20200727_liff_app.pdf
ozaki25
1
640
20200721_web_vitals.pdf
ozaki25
0
100
20200624_web_otp_api.pdf
ozaki25
1
130
20200128_sentry.pdf
ozaki25
0
110
Other Decks in Technology
See All in Technology
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
470
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
Practical Agentic AI in Software Engineering
uzyn
0
110
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
190
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
430
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
184
22k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
RailsConf 2023
tenderlove
30
1.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Transcript
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ߋʹޮՌత