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
830
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
54
Chucker で GraphQL の通信ログを見やすくした / Made GraphQL log easier to read on Chucker
bird_tummy
1
900
matching_dev1
bird_tummy
0
240
dxel1
bird_tummy
0
3.6k
GraphQL in production
bird_tummy
3
3.4k
livedata-plus-viewmodel
bird_tummy
0
3.5k
何も準備せずにノリで上海に行ったら大変だった話 / shanghai-is-wonderful
bird_tummy
0
380
AutoLayout と友達になる方法 / How to be friends with AutoLayout
bird_tummy
1
3k
初めて転職して思ったこと / ngineerxiv11
bird_tummy
0
340
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bash Introduction
62gerente
611
210k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Faster Mobile Websites
deanohume
306
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Unsuck your backbone
ammeep
669
57k
Practical Orchestrator
shlominoach
186
10k
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ʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱཧղ͚ͨΒ͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ͏͔ݸਓͷΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷͷΛ͑ใస͕ͬͯͯྑ͍ʁ
‣ ࡞Γ͍ͨͷ࡞ΔͱษڧͰ͖ͯྑ͍ʂྑ͍ʂ
͓ΘΓ