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
96
20201225_how_to_learn_technology.pdf
ozaki25
0
160
20201124_blitz.pdf
ozaki25
0
89
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
Language Update: Java
skrb
2
290
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
140
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
350
roppongirb_20250911
igaiga
1
210
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
580
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
Obsidian応用活用術
onikun94
1
470
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.8k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
420
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Balancing Empowerment & Direction
lara
3
620
Gamification - CAS2011
davidbonilla
81
5.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Practical Orchestrator
shlominoach
190
11k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Language of Interfaces
destraynor
161
25k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Automating Front-end Workflow
addyosmani
1370
200k
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ߋʹޮՌత