Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20161226_wajs2

2df5079e89d2e51aeb9203b3410ea61b?s=47 Ryo.Nitami
December 26, 2016
780

 20161226_wajs2

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

2df5079e89d2e51aeb9203b3410ea61b?s=128

Ryo.Nitami

December 26, 2016
Tweet

Transcript

  1. React.js ͱ TypeScript Ͱ झຯʹ૸ͬͨ SPA ࡞ͬͯΈͨ 2016/12/26 We Are

    JavaScripters! @ 2nd 
  2. ࣗݾ঺հ  ‣ ਔଟݟྒྷʢʹͨΈΓΐ͏ʣ!CJSE@UVNNZ ‣ ࿡ຊ໦ͷํͰ8FCΤϯδχΞͯ͠·͢ ✦ ΞϓϦ΋গʑ ‣ ϑΥϯτͱ͓ञͱখௗ͕޷͖Ͱ͢

  3. ΞδΣϯμ  ‣ ࠓճ࡞ͬͨ41"ͷ͝঺հ ‣ 3FBDUKT5ZQF4DSJQUͬͯͳʹʁ ‣ ࣮૷ͷྲྀΕ ✦ ίʔυݟͳ͕Βத਎ղઆ

    ‣ ·ͱΊ
  4. ࡞ͬͨ΍ͭ  ‣ 5XJUUFSͷGPMMPXJOH͔ΒσβϑΣεग़లऀͬΆ͍ ਓΛ୳ͯ͠දࣔ ‣ *OTQJSFECZIUUQDPNJLFUTVSKQ ✦ ϑΥϩʔͯ͠Δਓͷத͔ΒίϛέࢀՃऀͬΆ͍ਓ Λநग़͢Δ͘Μ

  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. ͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ  WBSDPVOU ְ׹ְ׹DPVOUח㼎׃גⳢ椚ׅ׷ JG JT'JOJUF DPVOU \ DPOTPMFMPH OVNCFS

     ^FMTF\ DPOTPMFMPH OPUOVNCFS  ^ OPUOVNCFSָ⳿⸂ׁ׸׷ s٥ω٥
  16. ͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ  WBSDPVOU ְ׹ְ׹DPVOUח㼎׃גⳢ椚ׅ׷ JG JT'JOJUF DPVOU \ DPOTPMFMPH OVNCFS

     ^FMTF\ DPOTPMFMPH OPUOVNCFS  ^ OPUOVNCFSָ⳿⸂ׁ׸׷ s٥ω٥ ݴޠଆͰࣄނ͕๷ࢭͰ͖Δʂʂ
  17.  ͔͜͜Β͸41"ͷ࣮૷ํ๏ͷ͓࿩͠

  18. ࣮૷ͷྲྀΕ  ‣ ։ൃ؀ڥ࡞Δ ‣ 6*ͦΕͬΆ͘͢Δ ‣ 5XJUUFS"1*ୟ͍ͯਖ਼نදݱ͔·ͤͯදࣔ ‣ ςετॻ͘

    ‣ ΊͰ͍ͨ
  19. ։ൃ؀ڥΛ࡞Ζ͏  ‣ ͕͜͜͠ΜͲ͍ɻͱʹ͔͘͠ΜͲ͍ʢݸਓൺʣ ‣ 3FBDUKT 5ZQF4DSJQU 8FCQBDL͕جຊ ✦ DTTMPBEFSTUZMFMPBEFS

    ✦ 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. ͓ΘΓ