Tweet
Tweet

Slide 1

Slide 1 text

React.js ͱ TypeScript Ͱ झຯʹ૸ͬͨ SPA ࡞ͬͯΈͨ 2016/12/26 We Are JavaScripters! @ 2nd

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

ίϛέ͸͝ଘͩ͡ͱࢥ͏ͷͰলུͯ͠

Slide 7

Slide 7 text

σβϑΣεͬͯʁ ‣ σβΠϯϑΣελIUUQEFTJHOGFTUBDPN

Slide 8

Slide 8 text

σβϑΣεͬͯʁ ‣ ΦϦδφϧͰ͋Ε͹৹ࠪແ͠Ͱɺ୭Ͱ΋ࢀՃ͢Δࣄ ͕Ͱ͖ΔΞʔτΠϕϯτ ‣ ೥͔Β೥ճϖʔεͰ։࠵த ✦ ৔ॴ͸ϏοάαΠτ ‣ ඒେੜͱ͔झຯͰ޻ܳͯ͠ΔਓɺΨνͷΞʔςΟε τ·Ͱ͍ΖΜͳਓ͕ग़ల

Slide 9

Slide 9 text

σβϑΣεͬͯʁ ‣ σβϑΣε͓ܴ͑඼ͱ͔σβϑΣεઓར඼Ͱ 5XJUUFSͳΓ*OTUBHSBNΛݕࡧ͢Δͱ͍Ζ͍ΖͰ ͖ͯ·͢

Slide 10

Slide 10 text

ͷΊΓࠐΉϧʔϓ σβϑΣεઓར඼Ͱ஌Βͳ͔ͬͨ࡞඼ΛݟΔ ͍͍ͩͨग़లͯ͠Δਓ͸5XJUUFSͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ ࣍ճ΋ग़ల͢Δ͜ͱ͕Θ͔Ε͹ࢀՃ ʹ໭Δ

Slide 11

Slide 11 text

ࠓճͷ SPA ͸ σβϑΣεઓར඼Ͱ஌Βͳ͔ͬͨ࡞඼ΛݟΔ ͍͍ͩͨग़లͯ͠Δਓ͸5XJUUFSͯ͠ΔͷͰؾʹ ͳͬͨΒϑΥϩʔ ࣍ճ΋ग़ల͢Δ͜ͱ͕Θ͔Ε͹ࢀՃ ʹ໭Δ ͜͜Λαϙʔτʂ

Slide 12

Slide 12 text

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 ʹ͋ͨΔ

Slide 13

Slide 13 text

React.js ͱ͸ʁ ‣ 7JSUVBM%0.͕Ξπ͍ ✦ IUUQRJJUBDPNNJ[DIJJUFNT ECDEFGEF ‣ "OHVMBSͱ͔#BDLCPOFͱൺ΂ΒΕΔ͜ͱ͕ଟ͍ ‣ 7VF΋ಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ ‣ ࠷ۙ͸JOGFSOPͬͯͷ΋͋ΔΒ͍͠ʁ

Slide 14

Slide 14 text

TypeScript ͱ͸ʁ ‣ .JDSPTPGUͷ044Ͱ͢ ✦ IUUQTXXXUZQFTDSJQUMBOHPSH ✦ IUUQXXXUZQFTDSJQUMBOHPSHQMBZ ‣ ܕɻͱʹ͔͘ܕɻ ‣ +BWB4DSJQUΛܕ҆શͷঢ়ଶͰॻ͚Δ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

͜͏͍͏͜ͱ͋Γ·ͤΜ͔ʁ WBSDPVOU ְ׹ְ׹DPVOUח㼎׃גⳢ椚ׅ׷ JG JT'JOJUF DPVOU \ DPOTPMFMPH OVNCFS ^FMTF\ DPOTPMFMPH OPUOVNCFS ^ OPUOVNCFSָ⳿⸂ׁ׸׷ s٥ω٥ ݴޠଆͰࣄނ͕๷ࢭͰ͖Δʂʂ

Slide 17

Slide 17 text

͔͜͜Β͸41"ͷ࣮૷ํ๏ͷ͓࿩͠

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

։ൃ؀ڥΛ࡞Ζ͏ ‣ ͕͜͜͠ΜͲ͍ɻͱʹ͔͘͠ΜͲ͍ʢݸਓൺʣ ‣ 3FBDUKT5ZQF4DSJQU8FCQBDL͕جຊ ✦ DTTMPBEFSTUZMFMPBEFS ✦ NBUFSJBMVJ BYJPT SFBDUTPDJBM ✦ NPYJPT FO[ZNF NPDIB QPXFSBTTFSUʜ

Slide 20

Slide 20 text

ઃఆ͸৻ॏʹ ‣ গͣͭ͠ೖΕͯಈ͘͜ͱΛ֬ೝ͠ͳ͕Βߦ͏ ‣ ҰؾʹೖΕΔͱ݁ہͲ͕͜ݪҼ͔Θ͔Βͳ͘ͳΔ ✦ ͭΒ͍

Slide 21

Slide 21 text

UI ΛͦΕͬΆ͘ ‣ ݸਓతʹ.BUFSJBM%FTJHO͕޷͖ͳͷͰ࠾༻ ✦ NBUFSJBMVJ࢖͏ ✦ 3PCPUPϑΥϯτΛ(PPHMF'POUT͔Β࣋ͬͯ ͖ͯ$44Ͱઃఆ

Slide 22

Slide 22 text

UI ΛͦΕͬΆ͘

Slide 23

Slide 23 text

Twitter API ୟ͍ͯ (ry ‣ ਖ਼نදݱͰͦΕͬΆ͍ਓநग़ͯ͠දࣔͰ͢ ‣ BYJPTͰGPMMPXJOHͯ͠ΔਓͷOBNFΛऔͬͯ͘ Δˠਖ਼نදݱͰ;Δ͍͔͚ˠ࢒ͬͨ΋ͷΛදࣔ OBNF͸͜͜

Slide 24

Slide 24 text

;Δ͍ ‣ ྫɿίϛέ ‣ )/!Y೔໨ʢϒʔε൪߸ʣ ‣ σβϑΣε΋೔ؒ͋Δ ✦ Կ೔໨͔ ✦ ϒʔε൪߸͸Կ͔

Slide 25

Slide 25 text

ςετॻ͘ ‣ FO[ZNFNPDIBQPXFSBTTFSUͰΑ͠ͳʹ ‣ #%%ʢ;Δ·͍ۦಈ։ൃʣͳͷͰɺ͍ΖΜͳঢ়گ ʹԠͨ͡ঢ়ଶΛ୲อͰ͖Δ

Slide 26

Slide 26 text

ςετॻ͘ʢHTTPฤʣ ‣ 5XJUUFS"1*ୟ͍ͨͱ͖ʹ ͪΌΜͱ)551͕ฦ͖ͬͯͯ ϨεϙϯεʹOBNFͱ͍͏ΦϒδΣΫτ͕͋Δ ʢۭͰ͸ͳ͍ʣ ‣ NPYJPTͰϦΫΤετΛϞοΫͰ͖Δ

Slide 27

Slide 27 text

ςετॻ͘ʢHTTPฤʣ

Slide 28

Slide 28 text

ςετॻ͘ʢHTTPฤʣ ‣ "QQίϯϙʔωϯτͷΫϥε͕BQQ ‣ )FBEFSΫϥε͕͋Δ ‣ 6TFS-JTUΫϥεͷMJTUϓϩύςΟʹ഑ྻ͋Δ

Slide 29

Slide 29 text

ςετॻ͘ʢϨϯμϦϯάฤʣ

Slide 30

Slide 30 text

ΊͰ͍ͨʂ ‣ 41"͕Ͱ͖·ͨ͠ ‣ ςετॻ͚·͢ ‣ TUZMFMPBEFSͷ͓͔͛ͰTBTTͱ͔΋࢖͑·͢ ‣ SFBDUSPVUFSͱ͔ೖΕΔͱ41"͔ΒਐԽͯ͠΋ͬ ͱେ͖ͳΞϓϦ͕࡞ΕΔ͔΋ʁ

Slide 31

Slide 31 text

·ͱΊ ‣ 3FBDUKTͱ5ZQF4DSJQUʢͱͦͷपลٕज़ͳͲʣ ͕গ͠Ͱ΋ཧղ௖͚ͨΒ޾͍Ͱ͢ ‣ ϥΠϒϥϦԿΛ࢖͏͔͸ݸਓͷ޷ΈʹΑΔͱ͜Ζ͕ େ͖͍ؾ͕͍ͯ͠·͢ ✦ جຊࠓ࣌ͷ΋ͷΛ࢖͑͹৘ใ΋స͕ͬͯͯྑ͍ʁ ‣ ࡞Γ͍ͨ΋ͷ࡞Δͱษڧ΋Ͱ͖ͯྑ͍ʂྑ͍ʂ

Slide 32

Slide 32 text

͓ΘΓ