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
140
20210525_react_next.pdf
ozaki25
May 25, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
180
Webフロントエンドはなぜ複雑なのか
ozaki25
1
130
utility first css
ozaki25
0
99
20201225_how_to_learn_technology.pdf
ozaki25
0
160
20201124_blitz.pdf
ozaki25
0
92
20200727_liff_app.pdf
ozaki25
1
640
20200721_web_vitals.pdf
ozaki25
0
110
20200624_web_otp_api.pdf
ozaki25
1
130
20200128_sentry.pdf
ozaki25
0
110
Other Decks in Technology
See All in Technology
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
140
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
220
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
130
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
140
AWS IoT 超入門 2025
hattori
0
290
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
450
Wasmのエコシステムを使った ツール作成方法
askua
0
110
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4k
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
KATA
mclloyd
32
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Bash Introduction
62gerente
615
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Review Best Practice
trishagee
72
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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ߋʹޮՌత