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
20161226_wajs2
Search
Ryo.Nitami
December 26, 2016
0
820
20161226_wajs2
React.js と TypeScript でデザフェスの SPA を作っている話をしました
https://wajs.connpass.com/event/46636/
Ryo.Nitami
December 26, 2016
Tweet
Share
More Decks by Ryo.Nitami
See All by Ryo.Nitami
20220927_mot_kauche_tummy
bird_tummy
0
49
Chucker で GraphQL の通信ログを見やすくした / Made GraphQL log easier to read on Chucker
bird_tummy
1
870
matching_dev1
bird_tummy
0
240
dxel1
bird_tummy
0
3.5k
GraphQL in production
bird_tummy
3
3.3k
livedata-plus-viewmodel
bird_tummy
0
3.5k
何も準備せずにノリで上海に行ったら大変だった話 / shanghai-is-wonderful
bird_tummy
0
360
AutoLayout と友達になる方法 / How to be friends with AutoLayout
bird_tummy
1
3k
初めて転職して思ったこと / ngineerxiv11
bird_tummy
0
320
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Language of Interfaces
destraynor
154
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Designing for humans not robots
tammielis
250
25k
Transcript
React.js ͱ TypeScript Ͱ झຯʹͬͨ SPA ࡞ͬͯΈͨ 2016/12/26 We Are
JavaScripters! @ 2nd
ࣗݾհ ‣ ਔଟݟྒྷʢʹͨΈΓΐ͏ʣ!CJSE@UVNNZ ‣ ຊͷํͰ8FCΤϯδχΞͯ͠·͢ ✦ ΞϓϦগʑ ‣ ϑΥϯτͱ͓ञͱখௗ͕͖Ͱ͢
ΞδΣϯμ ‣ ࠓճ࡞ͬͨ41"ͷ͝հ ‣ 3FBDUKT5ZQF4DSJQUͬͯͳʹʁ ‣ ࣮ͷྲྀΕ ✦ ίʔυݟͳ͕Βதղઆ
‣ ·ͱΊ
࡞ͬͨͭ ‣ 5XJUUFSͷGPMMPXJOH͔ΒσβϑΣεग़లऀͬΆ͍ ਓΛ୳ͯ͠දࣔ ‣ *OTQJSFECZIUUQDPNJLFUTVSKQ ✦ ϑΥϩʔͯ͠Δਓͷத͔ΒίϛέࢀՃऀͬΆ͍ਓ Λநग़͢Δ͘Μ
ίϛέ͝ଘͩ͡ͱࢥ͏ͷͰলུͯ͠
σβϑΣεͬͯʁ ‣ σβΠϯϑΣελIUUQEFTJHOGFTUBDPN
σβϑΣεͬͯʁ ‣ ΦϦδφϧͰ͋Ε৹ࠪແ͠Ͱɺ୭ͰࢀՃ͢Δࣄ ͕Ͱ͖ΔΞʔτΠϕϯτ ‣ ͔ΒճϖʔεͰ։࠵த ✦ ॴϏοάαΠτ ‣
ඒେੜͱ͔झຯͰܳͯ͠ΔਓɺΨνͷΞʔςΟε τ·Ͱ͍ΖΜͳਓ͕ग़ల
σβϑΣεͬͯʁ ‣ σβϑΣε͓ܴ͑ͱ͔σβϑΣεઓརͰ 5XJUUFSͳΓ*OTUBHSBNΛݕࡧ͢Δͱ͍Ζ͍ΖͰ ͖ͯ·͢
ͷΊΓࠐΉϧʔϓ σβϑΣεઓརͰΒͳ͔ͬͨ࡞ΛݟΔ ͍͍ͩͨग़లͯ͠Δਓ5XJUUFSͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ ࣍ճग़ల͢Δ͜ͱ͕Θ͔ΕࢀՃ
ʹΔ
ࠓճͷ SPA σβϑΣεઓརͰΒͳ͔ͬͨ࡞ΛݟΔ ͍͍ͩͨग़లͯ͠Δਓ5XJUUFSͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ
࣍ճग़ల͢Δ͜ͱ͕Θ͔ΕࢀՃ ʹΔ ͜͜Λαϙʔτʂ
React.js ͱʁ ‣ 'BDFCPPLͷ044Ͱ͢ ✦ IUUQTGBDFCPPLHJUIVCJPSFBDU ✦ IUUQTKTpEEMFOFUSFBDUKT[XFQP ‣
l"+"7"4$3*15-*#3"3:'03#6*-%*/(64&3 */5&3'"$&4z ✦ 6*Λ࡞ΔͨΊͷ+4ϥΠϒϥϦ ✦ .7$Ͱ͍͏7 7JFX ʹ͋ͨΔ
React.js ͱʁ ‣ 7JSUVBM%0.͕Ξπ͍ ✦ IUUQRJJUBDPNNJ[DIJJUFNT ECDEFGEF ‣ "OHVMBSͱ͔#BDLCPOFͱൺΒΕΔ͜ͱ͕ଟ͍
‣ 7VFಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ ‣ ࠷ۙJOGFSOPͬͯͷ͋ΔΒ͍͠ʁ
TypeScript ͱʁ ‣ .JDSPTPGUͷ044Ͱ͢ ✦ IUUQTXXXUZQFTDSJQUMBOHPSH ✦ IUUQXXXUZQFTDSJQUMBOHPSHQMBZ ‣
ܕɻͱʹ͔͘ܕɻ ‣ +BWB4DSJQUΛܕ҆શͷঢ়ଶͰॻ͚Δ
͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ WBSDPVOU ְְDPVOUח㼎׃גⳢ椚ׅ JG JT'JOJUF DPVOU \ DPOTPMFMPH OVNCFS
^FMTF\ DPOTPMFMPH OPUOVNCFS ^ OPUOVNCFSָ⳿⸂ׁ s٥ω٥
͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ WBSDPVOU ְְDPVOUח㼎׃גⳢ椚ׅ JG JT'JOJUF DPVOU \ DPOTPMFMPH OVNCFS
^FMTF\ DPOTPMFMPH OPUOVNCFS ^ OPUOVNCFSָ⳿⸂ׁ s٥ω٥ ݴޠଆͰࣄނ͕ࢭͰ͖Δʂʂ
͔͜͜Β41"ͷ࣮ํ๏ͷ͓͠
࣮ͷྲྀΕ ‣ ։ൃڥ࡞Δ ‣ 6*ͦΕͬΆ͘͢Δ ‣ 5XJUUFS"1*ୟ͍ͯਖ਼نදݱ͔·ͤͯදࣔ ‣ ςετॻ͘
‣ ΊͰ͍ͨ
։ൃڥΛ࡞Ζ͏ ‣ ͕͜͜͠ΜͲ͍ɻͱʹ͔͘͠ΜͲ͍ʢݸਓൺʣ ‣ 3FBDUKT 5ZQF4DSJQU 8FCQBDL͕جຊ ✦ DTTMPBEFSTUZMFMPBEFS
✦ NBUFSJBMVJ BYJPT SFBDUTPDJBM ✦ NPYJPT FO[ZNF NPDIB QPXFSBTTFSUʜ
ઃఆ৻ॏʹ ‣ গͣͭ͠ೖΕͯಈ͘͜ͱΛ֬ೝ͠ͳ͕Βߦ͏ ‣ ҰؾʹೖΕΔͱ݁ہͲ͕͜ݪҼ͔Θ͔Βͳ͘ͳΔ ✦ ͭΒ͍
UI ΛͦΕͬΆ͘ ‣ ݸਓతʹ.BUFSJBM%FTJHO͕͖ͳͷͰ࠾༻ ✦ NBUFSJBMVJ͏ ✦ 3PCPUPϑΥϯτΛ(PPHMF'POUT͔Β࣋ͬͯ ͖ͯ$44Ͱઃఆ
UI ΛͦΕͬΆ͘
Twitter API ୟ͍ͯ (ry ‣ ਖ਼نදݱͰͦΕͬΆ͍ਓநग़ͯ͠දࣔͰ͢ ‣ BYJPTͰGPMMPXJOHͯ͠ΔਓͷOBNFΛऔͬͯ͘ Δˠਖ਼نදݱͰ;Δ͍͔͚ˠͬͨͷΛදࣔ
OBNF͜͜
;Δ͍ ‣ ྫɿίϛέ ‣ )/!Yʢϒʔε൪߸ʣ ‣ σβϑΣεؒ͋Δ ✦ Կ͔
✦ ϒʔε൪߸Կ͔
ςετॻ͘ ‣ FO[ZNF NPDIB QPXFSBTTFSUͰΑ͠ͳʹ ‣ #%%ʢ;Δ·͍ۦಈ։ൃʣͳͷͰɺ͍ΖΜͳঢ়گ ʹԠͨ͡ঢ়ଶΛ୲อͰ͖Δ
ςετॻ͘ʢHTTPฤʣ ‣ 5XJUUFS"1*ୟ͍ͨͱ͖ʹ ͪΌΜͱ)551͕ฦ͖ͬͯͯ ϨεϙϯεʹOBNFͱ͍͏ΦϒδΣΫτ͕͋Δ ʢۭͰͳ͍ʣ ‣
NPYJPTͰϦΫΤετΛϞοΫͰ͖Δ
ςετॻ͘ʢHTTPฤʣ
ςετॻ͘ʢHTTPฤʣ ‣ "QQίϯϙʔωϯτͷΫϥε͕BQQ ‣ )FBEFSΫϥε͕͋Δ ‣ 6TFS-JTUΫϥεͷMJTUϓϩύςΟʹྻ͋Δ
ςετॻ͘ʢϨϯμϦϯάฤʣ
ΊͰ͍ͨʂ ‣ 41"͕Ͱ͖·ͨ͠ ‣ ςετॻ͚·͢ ‣ TUZMFMPBEFSͷ͓͔͛ͰTBTTͱ͔͑·͢ ‣ SFBDUSPVUFSͱ͔ೖΕΔͱ41"͔ΒਐԽͯͬ͠
ͱେ͖ͳΞϓϦ͕࡞ΕΔ͔ʁ
·ͱΊ ‣ 3FBDUKTͱ5ZQF4DSJQUʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱཧղ͚ͨΒ͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ͏͔ݸਓͷΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷͷΛ͑ใస͕ͬͯͯྑ͍ʁ
‣ ࡞Γ͍ͨͷ࡞ΔͱษڧͰ͖ͯྑ͍ʂྑ͍ʂ
͓ΘΓ