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
78
20210525_react_next.pdf
ozaki25
May 25, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
99
Webフロントエンドはなぜ複雑なのか
ozaki25
1
75
utility first css
ozaki25
0
39
20201225_how_to_learn_technology.pdf
ozaki25
0
110
20201124_blitz.pdf
ozaki25
0
49
20200727_liff_app.pdf
ozaki25
1
540
20200721_web_vitals.pdf
ozaki25
0
54
20200624_web_otp_api.pdf
ozaki25
1
75
20200128_sentry.pdf
ozaki25
0
54
Other Decks in Technology
See All in Technology
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
やっていきテスト
k6s4i53rx
0
160
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
700
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.6k
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.6k
Building a RAG app to chat with your data (on Azure)
pamelafox
0
120
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
290
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
380
任意コード実行の原理
ffri
0
190
Autify Company Deck
autifyhq
1
30k
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
275
33k
How to Ace a Technical Interview
jacobian
272
22k
The Mythical Team-Month
searls
214
42k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Optimizing for Happiness
mojombo
369
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Designing for humans not robots
tammielis
247
25k
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ߋʹޮՌత