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
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
兎に角、コードレビュー
mitohato14
0
150
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
Langfuseと歩む生成AI活用推進
licux
3
300
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
AIでLINEスタンプを作ってみた
eycjur
1
200
Laravel Boost 超入門
fire_arlo
1
130
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
How GitHub (no longer) Works
holman
315
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Music & Morning Musume
bryan
46
6.7k
Side Projects
sachag
455
43k
Docker and Python
trallard
45
3.5k
Site-Speed That Sticks
csswizardry
10
790
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Fireside Chat
paigeccino
39
3.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
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ϚΠϯεΠʔύ͕͏·͘ͳͬͨ