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
810
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
34
Chucker で GraphQL の通信ログを見やすくした / Made GraphQL log easier to read on Chucker
bird_tummy
1
790
matching_dev1
bird_tummy
0
220
dxel1
bird_tummy
0
3.2k
GraphQL in production
bird_tummy
3
3.2k
livedata-plus-viewmodel
bird_tummy
0
3.4k
何も準備せずにノリで上海に行ったら大変だった話 / shanghai-is-wonderful
bird_tummy
0
300
AutoLayout と友達になる方法 / How to be friends with AutoLayout
bird_tummy
1
2.8k
初めて転職して思ったこと / ngineerxiv11
bird_tummy
0
300
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Optimising Largest Contentful Paint
csswizardry
7
2.3k
How to Ace a Technical Interview
jacobian
272
22k
GitHub's CSS Performance
jonrohan
1024
450k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
It's Worth the Effort
3n
180
27k
Building Adaptive Systems
keathley
30
1.9k
Thoughts on Productivity
jonyablonski
57
3.8k
Documentation Writing (for coders)
carmenintech
59
3.9k
Why Our Code Smells
bkeepers
PRO
331
56k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
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ʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱཧղ͚ͨΒ͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ͏͔ݸਓͷΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷͷΛ͑ใస͕ͬͯͯྑ͍ʁ
‣ ࡞Γ͍ͨͷ࡞ΔͱษڧͰ͖ͯྑ͍ʂྑ͍ʂ
͓ΘΓ