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
新世界の理解
koriym
0
110
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
320
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
770
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
900
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
What's new in Adaptive Android development
fornewid
0
130
Go製CLIツールをnpmで配布するには
syumai
2
1k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
250
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
We Have a Design System, Now What?
morganepeng
53
7.7k
Faster Mobile Websites
deanohume
308
31k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
278
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
A designer walks into a library…
pauljervisheath
207
24k
Designing Experiences People Love
moore
142
24k
Designing for humans not robots
tammielis
253
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
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ϚΠϯεΠʔύ͕͏·͘ͳͬͨ