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
55
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
How GitHub (no longer) Works
holman
314
140k
Code Review Best Practice
trishagee
67
18k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Invisible Side of Design
smashingmag
299
50k
GraphQLとの向き合い方2022年版
quramy
44
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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ʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱཧղ͚ͨΒ͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ͏͔ݸਓͷΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷͷΛ͑ใస͕ͬͯͯྑ͍ʁ
‣ ࡞Γ͍ͨͷ࡞ΔͱษڧͰ͖ͯྑ͍ʂྑ͍ʂ
͓ΘΓ