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.4k
マインスイーパで学ぶ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.5k
いかにして若手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
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
570
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
910
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
dynamic!
moro
9
6.3k
CSC305 Lecture 04
javiergs
PRO
0
250
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
920
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Language of Interfaces
destraynor
162
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Git: the NoSQL Database
bkeepers
PRO
431
66k
For a Future-Friendly Web
brad_frost
180
9.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing for humans not robots
tammielis
254
25k
Gamification - CAS2011
davidbonilla
81
5.5k
Done Done
chrislema
185
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
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ϚΠϯεΠʔύ͕͏·͘ͳͬͨ