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
マインスイーパで学ぶReact / Pepabo Frontend Tech Meeting #1
Search
purple_jwl
March 16, 2018
Programming
2
2.3k
マインスイーパで学ぶReact / Pepabo Frontend Tech Meeting #1
https://purple-jwl.github.io/react-minesweeper/
purple_jwl
March 16, 2018
Tweet
Share
More Decks by purple_jwl
See All by purple_jwl
PHPerによるMySQLバージョンアップ 〜PHP7化の次〜 / PHP Conference Fukuoka 2018
purple_jwl
1
2.4k
いかにして若手PHPerは レガシーなWebサービスと向き合うようになったか / PHP Conference 2017
purple_jwl
3
3.6k
モックライブラリの導入について考えた話 / PHP BLT #8
purple_jwl
1
1.5k
Other Decks in Programming
See All in Programming
TanStack DB ~状態管理の新しい考え方~
bmthd
2
320
🔨 小さなビルドシステムを作る
momeemt
1
420
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
100
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.2k
tool ディレクティブを導入してみた感想
sgash708
1
150
実践!App Intents対応
yuukiw00w
1
350
State of CSS 2025
benjaminkott
1
120
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
Langfuseと歩む生成AI活用推進
licux
3
290
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
130
Constant integer division faster than compiler-generated code
herumi
2
690
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
How GitHub (no longer) Works
holman
315
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GitHub's CSS Performance
jonrohan
1031
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
185
16k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
ϑϩϯτΤϯυςοΫϛʔςΟϯά !QVSQMF@KXM ϚΠϯεΠʔύͰֶͿ3FBDU
࠷ۙϑϩϯτΤϯυʹڵຯʑ͓͡͞Μ ͺʔΆʔ!QVSQMF@KXM
࣍ wϚΠϯεΠʔύͱ w3FBDUͱ w3FBDUͰϚΠϯεΠʔύΛ࡞Δ w·ͱΊ
ϚΠϯεΠʔύͱ
ϚΠϯεΠʔύ wʹൃ໌͞Εͨਓ༻ͷίϯϐϡʔλήʔϜ wϘʔυ 3Y$ ্ʹଘࡏ͢Δ.ݸͷཕͷॴΛώϯτΛݩʹಛఆ͢ Δ͜ͱ͕త
࡞ͬͨͭͷσϞ IUUQTQVSQMFKXMHJUIVCJPSFBDUNJOFTXFFQFS
3FBDUͱ
3FBDU w'BDFCPPL͕։ൃΛߦ͍ͬͯΔ+BWB4DSJQUϥΠϒϥϦ w.7$Ͱݴ͏ͱ͜ΖͷWJFXͷΈΛ୲͢Δ wίϯϙʔωϯτΛఆٛ͠ɺͦΕΛΈ߹Θͤͯը໘Λ࡞Δ w୯ํσʔλϑϩʔɺԾ%0.ɺ+49͕ಛͱͯ͠ڍ͛ΒΕΔ
ίϯϙʔωϯτ wը໘Λߏ͢Δ෦ͷ͜ͱ wঢ়ଶʢTUBUFʣΛ࣋ͭ͜ͱ͕Ͱ͖Δ
୯ํσʔλϑϩʔ wجຊతʹίϯϙʔωϯτ͔Βࢠίϯϙʔωϯτʹঢ়ଶ͕ྲྀΕΔ w͕ࣗ࣋ͭঢ়ଶΛTUBUFɺίϯϙʔωϯτ͔ΒྲྀΕ͖ͯͨঢ়ଶΛ QSPQTͱ͍͏ wTUBUFॻ͖͑ՄೳɺQSPQTಡΈࠐΈઐ༻ wίϯϙʔωϯτ͕શͯͷTUBUFΛҰݩཧ͢Δ͜ͱ͕ଟ͍
Ծ%0. wੜ%0.ͱରʹͳΔͷ wԾ%0.Λ3FBDUͰཧ͠ɺঢ়ଶมԽʹΑΔԾ%0.ͷࠩͷΈΛ ੜ%0.ʹөͤ͞ΔΈ w͜ͷΈʹΑͬͯੜ%0.ͷૢ࡞ΛۃྗݮΒ͠ɺύϑΥʔϚϯε ্Λ࣮ݱ͍ͯ͠Δ
+49 w+BWB4DSJQUͷߏจ֦ுͰ)5.-ͷΑ͏ʹهड़Ͱ͖Δ w3FBDUͱҰॹʹར༻͢Δ͜ͱ͕ਪ͞Ε͍ͯΔʢඞਢͰͳ͍ʣ const App = () => ( <div
className=“MyApp”> = </div> );
3FBDUͰϚΠϯεΠʔύΛ࡞Δ
DSFBUFSFBDUBQQͰڥߏங
DSFBUFSFBDUBQQ w'BDFCPPL͕։ൃΛߦ͍ͬͯΔπʔϧ wίϚϯυҰൃͰ3FBDUͷڥߏஙͯ͘͠ΕΔ w8FCQBDL#BCFMͳͲͷઃఆ͕ෆཁͰɺ3FBDUΛαΫοͱࢼͯ͠Έͨ ͍ͱ͖ʹศར $ create-react-app react-minesweeper
ίϯϙʔωϯτͷઃܭΛߟ͑Δ
ίϯϙʔωϯτͷઃܭ wը໘Λίϯϙʔωϯτ֊ʹղ͢Δ wͭͷίϯϙʔωϯτʹͤ͞Δ͜ͱ͚ͭͩʹ͢Δͷ͕ϕετ ʢ͍ΖΜͳ͜ͱΛΒͤͳ͍ʣ
None
ʜ
ʜ "QQ #PBSE $POUSPM"SFB $FMM
ͲͷίϯϙʔωϯτʹTUBUFΛ ࣋ͨͤΔ͔ߟ͑Δ
୯ํσʔλϑϩʔʢ࠶ܝʣ wجຊతʹίϯϙʔωϯτ͔Βࢠίϯϙʔωϯτʹঢ়ଶ͕ྲྀΕΔ w͕ࣗ࣋ͭঢ়ଶΛTUBUFɺίϯϙʔωϯτ͔ΒྲྀΕ͖ͯͨঢ়ଶΛ QSPQTͱ͍͏ wTUBUFॻ͖͑ՄೳɺQSPQTಡΈࠐΈઐ༻ wίϯϙʔωϯτ͕શͯͷTUBUFΛҰݩཧ͢Δ͜ͱ͕ଟ͍
ʜ "QQ #PBSE $POUSPM"SFB $FMM
"QQ #PBSE $POUSPM"SFB $FMM $FMM $FMM ʜ
"QQ #PBSE $POUSPM"SFB $FMM $FMM $FMM ʜ ˡ͍ͭͩ͜ʂʂ
ͲͷΑ͏ͳঢ়ଶΛ࣋ͨͤΔ͔ ߟ͑Δ
ʜ
ͲͷΑ͏ͳঢ়ଶΛ࣋ͨͤΔ͔ wඞཁͳใ͕͍Ζ͍Ζ͋Δ w൫໘ͷαΠζɺཕͷɺ֤ηϧͷ։ดঢ়ଶɺ֤ηϧͷضͷ༗ແɺ ֤ηϧͷपғͷཕʢώϯτʣɺήʔϜͷܦա࣌ؒɺͳͲͳͲʜ wʢήʔϜϩδοΫͷ࣮ํ๏ʹΑͬͯඞཁͳใ͕มΘΔ͔ʣ
ͲͷΑ͏ͳΠϕϯτ͕͋Δͷ͔ ߟ͑Δ
ʜ
ͲͷΑ͏ͳΠϕϯτ͕͋Δͷ͔ߟ͑Δ w͜Ε͍Ζ͍Ζ͋Δ wήʔϜͷқબɺηϧΛ։͚ΔɺضΛཱͯΔɺλΠϚʔͷ։࢝ ఀࢭͳͲ
࣮͢Δ
࣮͢Δ w͜͜·Ͱߟ͑ͨ༰Λݩʹ࣮͢Δ w֤ίϯϙʔωϯτ͕Δ͜ͱ͕ఆ·͍ͬͯΕɺͦΕʹඞཁͳঢ়ଶ͕ ͔ΔΑ͏ʹͳΔͷͰɺίϯϙʔωϯτ͔Βඞཁͳঢ়ଶΛྲྀͤΑ ͍ wࢠίϯϙʔωϯτͷQSPQTಡΈऔΓઐ༻ͳͷͰɺTUBUFΛॻ͖͑ͨ ͍߹ίϯϙʔωϯτͷΠϕϯτϋϯυϥΛݺͼग़͢Α͏ʹ͢Δ
Ͱ͖ͨؾ͕͢Δʂ
·ͱΊ
·ͱΊ wϚΠϯεΠʔύΛࡐʹ3FBDUΛֶΜͩ w3FBDUࣗମγϯϓϧͳͷͰڽͬͨ͜ͱΛ͠ͳ͍ʹ؆୯ʹॻ͚Δ ͜ͱ͕͔ͬͨ wͳΜͱͳ͘3FBDUʹڵຯΛ࣋ͬͯ͘ΕΔਓ͕૿͑Δͱخ͍͠ wϚΠϯεΠʔύ͕͏·͘ͳͬͨ