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
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
三者三様 宣言的UI
kkagurazaka
0
260
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.7k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
Cursorハンズオン実践!
eltociear
2
1.2k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
SODA - FACT BOOK(JP)
sodainc
1
8.9k
マンガアプリViewerの大画面対応を考える
kk__777
0
370
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
RailsConf 2023
tenderlove
30
1.3k
Music & Morning Musume
bryan
46
6.9k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Faster Mobile Websites
deanohume
310
31k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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ϚΠϯεΠʔύ͕͏·͘ͳͬͨ