20161226_wajs2

React.js と TypeScript でデザフェスの SPA を作っている話をしました
https://wajs.connpass.com/event/46636/

Transcript

1. React.js ͱ TypeScript Ͱ झຯʹ૸ͬͨ SPA ࡞ͬͯΈͨ 2016/12/26 We Are JavaScripters! @ 2nd 
2. ࣗݾ঺հ  ‣ ਔଟݟ
   ྒྷʢʹͨΈ
   Γΐ͏ʣ
   !CJSE@UVNNZ
   ‣ ࿡ຊ໦ͷํͰ
   8FC
   ΤϯδχΞͯ͠·͢
   ✦ ΞϓϦ΋গʑ
   ‣ ϑΥϯτͱ͓ञͱখௗ͕޷͖Ͱ͢
3. ΞδΣϯμ  ‣ ࠓճ࡞ͬͨ
   41"
   ͷ͝঺հ
   ‣ 3FBDUKT
   
   5ZQF4DSJQU
   ͬͯͳʹʁ
   ‣ ࣮૷ͷྲྀΕ
   ✦ ίʔυݟͳ͕Βத਎ղઆ
   ‣ ·ͱΊ
4. ࡞ͬͨ΍ͭ  ‣ 5XJUUFS
   ͷ
   GPMMPXJOH
   ͔ΒσβϑΣεग़లऀͬΆ͍ ਓΛ୳ͯ͠දࣔ
   ‣ *OTQJSFE
   CZ
   IUUQDPNJLFUTVSKQ
   ✦ ϑΥϩʔͯ͠Δਓͷத͔ΒίϛέࢀՃऀͬΆ͍ਓ Λநग़͢Δ͘Μ
5. 
6.  ίϛέ͸͝ଘͩ͡ͱࢥ͏ͷͰলུͯ͠
7. σβϑΣεͬͯʁ  ‣ σβΠϯϑΣελ
   IUUQEFTJHOGFTUBDPN
8. σβϑΣεͬͯʁ  ‣ ΦϦδφϧͰ͋Ε͹৹ࠪແ͠Ͱɺ୭Ͱ΋ࢀՃ͢Δࣄ ͕Ͱ͖ΔΞʔτΠϕϯτ
   ‣ ೥͔Β೥ճϖʔεͰ։࠵த
   ✦ ৔ॴ͸ϏοάαΠτ
   ‣ ඒେੜͱ͔झຯͰ޻ܳͯ͠ΔਓɺΨνͷΞʔςΟε τ·Ͱ͍ΖΜͳਓ͕ग़ల
9. σβϑΣεͬͯʁ  ‣ σβϑΣε͓ܴ͑඼
   ͱ͔
   σβϑΣεઓར඼
   Ͱ
   5XJUUFS
   ͳΓ
   *OTUBHSBN
   Λݕࡧ͢Δͱ͍Ζ͍ΖͰ ͖ͯ·͢
10. ͷΊΓࠐΉϧʔϓ   σβϑΣεઓར඼
    Ͱ஌Βͳ͔ͬͨ࡞඼ΛݟΔ
     ͍͍ͩͨग़లͯ͠Δਓ͸
    5XJUUFS
    ͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ
     ࣍ճ΋ग़ల͢Δ͜ͱ͕Θ͔Ε͹ࢀՃ
     
    ʹ໭Δ
11. ࠓճͷ SPA ͸   σβϑΣεઓར඼
    Ͱ஌Βͳ͔ͬͨ࡞඼ΛݟΔ
     ͍͍ͩͨग़లͯ͠Δਓ͸
    5XJUUFS
    ͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ
     ࣍ճ΋ग़ల͢Δ͜ͱ͕Θ͔Ε͹ࢀՃ
    
     
    ʹ໭Δ ͜͜Λαϙʔτʂ
12. 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
    ʹ͋ͨΔ
13. React.js ͱ͸ʁ  ‣ 7JSUVBM
    %0.
    ͕Ξπ͍
    ✦ IUUQRJJUBDPNNJ[DIJJUFNT ECDEFGEF
    ‣ "OHVMBS
    ͱ͔
    #BDLCPOF
    ͱൺ΂ΒΕΔ͜ͱ͕ଟ͍
    ‣ 7VF
    ΋ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ
    ‣ ࠷ۙ͸
    JOGFSOP
    ͬͯͷ΋͋ΔΒ͍͠ʁ
14. TypeScript ͱ͸ʁ  ‣ .JDSPTPGU
    ͷ
    044
    Ͱ͢
    ✦ IUUQTXXXUZQFTDSJQUMBOHPSH
    ✦ IUUQXXXUZQFTDSJQUMBOHPSHQMBZ
    ‣ ܕɻͱʹ͔͘ܕɻ
    ‣ +BWB4DSJQU
    Λܕ҆શͷঢ়ଶͰॻ͚Δ
15. ͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ  WBS
    DPVOU
    
    ְ׹ְ׹
    DPVOU
    ח㼎׃גⳢ椚ׅ׷
    JG
    JT'JOJUF DPVOU
    \
    
    
    
    
    DPOTPMFMPH OVNCFS 
    ^
    FMTF
    \
    
    
    
    
    DPOTPMFMPH OPU
    OVNCFS 
    ^
    
    OPU
    OVNCFS
    ָ⳿⸂ׁ׸׷
    s٥ω٥
16. ͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ  WBS
    DPVOU
    
    ְ׹ְ׹
    DPVOU
    ח㼎׃גⳢ椚ׅ׷
    JG
    JT'JOJUF DPVOU
    \
    
    
    
    
    DPOTPMFMPH OVNCFS 
    ^
    FMTF
    \
    
    
    
    
    DPOTPMFMPH OPU
    OVNCFS 
    ^
    
    OPU
    OVNCFS
    ָ⳿⸂ׁ׸׷
    s٥ω٥ ݴޠଆͰࣄނ͕๷ࢭͰ͖Δʂʂ
17.  ͔͜͜Β͸
    41"
    ͷ࣮૷ํ๏ͷ͓࿩͠
18. ࣮૷ͷྲྀΕ  ‣ ։ൃ؀ڥ࡞Δ
    ‣ 6*
    ͦΕͬΆ͘͢Δ
    ‣ 5XJUUFS
    "1*
    ୟ͍ͯਖ਼نදݱ͔·ͤͯදࣔ
    ‣ ςετॻ͘
    ‣ ΊͰ͍ͨ
    
19. ։ൃ؀ڥΛ࡞Ζ͏  ‣ ͕͜͜͠ΜͲ͍ɻͱʹ͔͘͠ΜͲ͍ʢݸਓൺʣ
    ‣ 3FBDUKT
    
    5ZQF4DSJQU
    
    8FCQBDL
    ͕جຊ
    ✦ DTTMPBEFS
    
    TUZMFMPBEFS
    ✦ NBUFSJBMVJ
    BYJPT
    SFBDUTPDJBM
    ✦ NPYJPT
    FO[ZNF
    NPDIB
    QPXFSBTTFSU
    ʜ
20. ઃఆ͸৻ॏʹ  ‣ গͣͭ͠ೖΕͯಈ͘͜ͱΛ֬ೝ͠ͳ͕Βߦ͏
    ‣ ҰؾʹೖΕΔͱ݁ہͲ͕͜ݪҼ͔Θ͔Βͳ͘ͳΔ
    ✦ ͭΒ͍
    
21. UI ΛͦΕͬΆ͘  ‣ ݸਓతʹ
    .BUFSJBM
    %FTJHO
    ͕޷͖ͳͷͰ࠾༻
    ✦ NBUFSJBMVJ
    ࢖͏
    ✦ 3PCPUP
    ϑΥϯτΛ
    (PPHMF
    'POUT
    ͔Β࣋ͬͯ ͖ͯ
    $44
    Ͱઃఆ
22. UI ΛͦΕͬΆ͘ 
23. Twitter API ୟ͍ͯ (ry  ‣ ਖ਼نදݱͰͦΕͬΆ͍ਓநग़ͯ͠දࣔͰ͢
    ‣ BYJPT
    Ͱ
    GPMMPXJOH
    ͯ͠Δਓͷ
    OBNF
    Λऔͬͯ͘ Δˠਖ਼نදݱͰ;Δ͍͔͚ˠ࢒ͬͨ΋ͷΛදࣔ OBNF
    ͸͜͜
24. ;Δ͍  ‣ ྫɿίϛέ
    ‣ )/
    !
    Y೔໨ʢϒʔε൪߸ʣ
    ‣ σβϑΣε΋೔ؒ͋Δ
    ✦ Կ೔໨͔
    ✦ ϒʔε൪߸͸Կ͔
25. ςετॻ͘  ‣ FO[ZNF
    
    NPDIB
    
    QPXFSBTTFSU
    ͰΑ͠ͳʹ
    ‣ #%%
    ʢ;Δ·͍ۦಈ։ൃʣͳͷͰɺ͍ΖΜͳঢ়گ ʹԠͨ͡ঢ়ଶΛ୲อͰ͖Δ
26. ςετॻ͘ʢHTTPฤʣ  ‣ 5XJUUFS
    "1*
    ୟ͍ͨͱ͖ʹ
     ͪΌΜͱ
    )551
    
    ͕ฦ͖ͬͯͯ
     Ϩεϙϯεʹ
    OBNF
    ͱ͍͏ΦϒδΣΫτ͕͋Δ ʢۭͰ͸ͳ͍ʣ
    ‣ NPYJPT
    ͰϦΫΤετΛϞοΫͰ͖Δ
27. ςετॻ͘ʢHTTPฤʣ 
28. ςετॻ͘ʢHTTPฤʣ  ‣ "QQ
    ίϯϙʔωϯτͷΫϥε͕
    BQQ
    ‣ )FBEFS
    Ϋϥε͕͋Δ
    ‣ 6TFS-JTU
    Ϋϥεͷ
    MJTU
    ϓϩύςΟʹ഑ྻ͋Δ
29. ςετॻ͘ʢϨϯμϦϯάฤʣ 
30. ΊͰ͍ͨʂ  ‣ 41"
    ͕Ͱ͖·ͨ͠
    ‣ ςετॻ͚·͢
    ‣ TUZMFMPBEFS
    ͷ͓͔͛Ͱ
    TBTT
    ͱ͔΋࢖͑·͢
    ‣ SFBDUSPVUFS
    ͱ͔ೖΕΔͱ
    41"
    ͔ΒਐԽͯ͠΋ͬ ͱେ͖ͳΞϓϦ͕࡞ΕΔ͔΋ʁ
31. ·ͱΊ  ‣ 3FBDUKT
    ͱ
    5ZQF4DSJQU
    ʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱ΋ཧղ௖͚ͨΒ޾͍Ͱ͢
    ‣ ϥΠϒϥϦԿΛ࢖͏͔͸ݸਓͷ޷ΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢
    ✦ جຊࠓ࣌ͷ΋ͷΛ࢖͑͹৘ใ΋స͕ͬͯͯྑ͍ʁ
    ‣ ࡞Γ͍ͨ΋ͷ࡞Δͱษڧ΋Ͱ͖ͯྑ͍ʂྑ͍ʂ
32. ͓ΘΓ