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
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Agile that works and the tools we love
rasmusluckow
327
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
KATA
mclloyd
29
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
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ʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱཧղ͚ͨΒ͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ͏͔ݸਓͷΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷͷΛ͑ใస͕ͬͯͯྑ͍ʁ
‣ ࡞Γ͍ͨͷ࡞ΔͱษڧͰ͖ͯྑ͍ʂྑ͍ʂ
͓ΘΓ