Tweet
Tweet

Slide 1

Slide 1 text

େن໛"OHVMBSͷ޲͜͏ଆ %FD !OHTBLF

Slide 2

Slide 2 text

୭ w !PLVOPLFOUBSP w ͸ͪ͞Μ w גࣜձࣾϐΫηϧάϦ ο υ w OHKBQBOͷதͷਓ

Slide 3

Slide 3 text

ຊΛॻ͖·ͨ͠

Slide 4

Slide 4 text

ࠓ೔΍Δ࿩ w େن໛"OHVMBSΞϓϦ͕ߋʹେ͖͘ͳΔ࣌ɺ Ͳ͏͢Ε͹Α͍͔ w ᠘ͩΒ͚

Slide 5

Slide 5 text

͜ͷลͷଓ͖Ͱ͢ https://speakerdeck.com/armorik83

Slide 6

Slide 6 text

େن໛ͷͭΒ͍ͱ͜Ζ w ίʔ υͷॏෳΛͲͷΑ ͏ʹந৅Խ ɾ ڞ௨Խ͢Δ͔ w ๲େͳϑΝΠϧ਺ΛͲ͏΍ͬͯѻ͏͔ w ϝϯόʔ͕ଟ͍ϓϩδΣΫ τͰͲ͏΍ͬͯ඼࣭Λ୲อ͢Δ͔

Slide 7

Slide 7 text

Ͱ͸ͳ͘ ͯ

Slide 8

Slide 8 text

Ϗϧυ͕஗͍݅

Slide 9

Slide 9 text

Ϗϧυͷ஗͞ w ϑΝΠϧ਺͕ଟ͍͔Β࢓ํͳ͍ ʢສߦ௒ʣ w ͱʹ͔͘஗͍ w ng serveͰ෼͸౰ͨΓલ w ng buildͰ෼͸౰ͨΓલ w $*͸෼௒͑༨༟

Slide 10

Slide 10 text

ੜ࢈ੑͷ௿Լ w Ϗϧυͷ஗͞͸ຊ౰ʹόΧʹͳΒͳ͍ w ճ$*Λճ͢ͱ࣌ؒ΋ࣦΘΕΔ
 ʢ཯ّʹ଴͍ͬͯΕ͹ɺ ͕ͩʣ w ͤΊͯ։ൃத͸αΫαΫ͍ͨ͠

Slide 11

Slide 11 text

ͦ͏ͩϑΝΠϧ਺ΛݮΒͦ͏

Slide 12

Slide 12 text

૯ϑΝΠϧ਺ͷ࡟ݮ w ݱࡏɺ ཁ݅ͷ෼ͷఔ౓͕࣮૷׬ྃͰɺ ͢Ͱʹ͜ͷ஗͞ w ཁ݅Λ΄΅࣮૷͖͠ΔͰ͋Ζ͏ ϓϩδΣΫ τऴ൫͸ɺ 
 ݱࡏΑ Γ਺ഒ͕͔͔࣌ؒΔͱ༧૝ w ͩͬͨΒείʔϓΛখ͞ ͘͢Δ͜ͱͰɺ 
 Ϗϧυ࣌ؒΛ͜ΕҎ্૿΍͞ͳ͍Α ͏ʹ͠Α ͏

Slide 13

Slide 13 text

ΞϓϦͷ෼ׂ w "OHVMBS$-*ʹ͸ෳ਺ͷΞϓϦΛ؅ཧ͢Δ࢓૊Έ͕͋Δ w ng serve --app=app-nameͳͲ w લྫΛࢀߟʹ͍ͨ͠

Slide 14

Slide 14 text

/Y w IUUQTOSXMJPOY w 7JDUPS4BWLJOࢯͷձࣾɺ "OHVMBSͷίϯαϧλϯ τͷձࣾΒ͍͠ w ͜͏͍͏໊લͷπʔϧ͔ͱࢥ͍͖΍ɺ 
 ςϯϓϨʔ τूɺ ϊ΢ϋ΢ूͱࢥͬͨ΄͏͕Α͍ w ෳ਺ΞϓϦ؅ཧͷϊ΢ϋ΢͕٧·ͬͯΔ

Slide 15

Slide 15 text

4DIFNBUJDT w "OHVMBS$-*Α Γ#MVFQSJOUTʹ୅Θͬͯಋೖ͞ΕͨςϯϓϨʔ τੜ੒ ͷج൫ w Α ͏΍͘ಠࣗςϯϓϨʔ τΛੜ੒Ͱ͖ΔΑ ͏ʹͳͬͨ w schema.json, index.tsΛطଘͷ΋ͷΛࢀߟʹෳ੡͢Ε͹࡞ΕΔ w ݱࡏӡ༻தɺ ϊ΢ϋ΢஝ੵதͳͷͰ·͍ͨͣΕ࿩͠·͢

Slide 16

Slide 16 text

ΞϓϦ͕෼ׂͰ͖ͨ w ͱࢥ͍͔ͨͬͨ

Slide 17

Slide 17 text

Կ͕μϝ͔ w ࠷ॳ͔ΒΞϓϦ෼ׂΛ૝ఆ͍ͯ͠ͳ͍ͱɺ 
 ్த͔Βͷ෼ׂ͸ઃܭ্͔ͳΓͭΒ͍ w ϧʔςΟ ϯά͕େ໰୊ʹͳΔ ʢ-B[ZMPBEJOHͱ4JOHMFUPOͷ໰୊ʣ w "ΞϓϦ ͱ#ΞϓϦΛಉ࣌ʹىಈͯ͠ϧʔςΟ ϯάΛৼΓ෼͚͚ͨΕ͹ɺ 
 ϧʔςΟ ϯά༻ͷϋϒΞϓϦͷ࡞੒΋ඞཁ w ؅ཧίε τ͕ΞϓϦʹ૿͑Δ ʢϏϧυ͕஗͍͜ͱΑ Γ ΋खؒͳՄೳੑʣ

Slide 18

Slide 18 text

Ͱ΋Ϗϧυ࣌ؒΛݮΒ͍ͨ͠

Slide 19

Slide 19 text

ͤΊͯ։ൃத͸଎͘ʜ w ͱ͍͏ ͜ͱͰTestBed.configureTestingModule()ʹΑͬͯ
 ࡞ΒΕΔখن໛ϞδϡʔϧͷඳըͰಈ࡞ݕূͰ͖ͳ͍͔࣮ݧͨ͠ w ͜͏͢Ε͹είʔϓ͕5FTU#FEʹಡΈࠐ·ΕΔґଘؔ܎ͷΈʹͳΓɺ 
 ߴ଎Ϗϧυ͕ՄೳʹͳΔ͔΋ ʁ

Slide 20

Slide 20 text

଎͘ͳͬͨ w ͱࢥ͍͔ͨͬͨ

Slide 21

Slide 21 text

Կ͕μϝ͔ w "OHVMBS$-*ͷXFCQBDL͕೉ղ͗ͯ͢ɺ ෦෼తϏϧυͷ࢓૊Έ͕
 ͔ͳΓߏஙͮ͠Β͍ w ng ejectͤͣʹ࣮ݱ͠Α ͏ ͱ͢Δͱݫ͍͠ w ng ejectΛͤͣʹɺ ng ejectͯ͠ಘΒΕͨwebpack.configΛ ϕʔεʹվ଄͢Δ͜ͱ΋ߟ͕͑ͨɺ ࠓޙͷόʔδϣϯΞοϓʹ͍ͭͯߦ͚ͣ
 ෛ࠴Խ͢Δະདྷ͕ݟ͑ͨ

Slide 22

Slide 22 text

ଥڠ఺ w "OHVMBS$-*͕ੜ੒͢Δsrc/test.tsΛෳ੡ͯ͠ΠδΔ w const context = require.context()ͷείʔϓΛݶఆ͢Ε ͹ಡΈࠐ·ΕΔϑΝΠϧ਺͕ݮΒͤΔ͸ͣ w ݱࡏࢼߦࡨޡதʜ w ͍͍΍Γํ͋Ε͹୭͔ڭ͑ͯʜ

Slide 23

Slide 23 text

ͪͳΈʹ

Slide 24

Slide 24 text

େن໛ͷͭΒ͍ͱ͜Ζճ౴ฤ w ίʔ υͷॏෳΛͲͷΑ ͏ʹந৅Խ ɾ ڞ௨Խ͢Δ͔
 ɹˠ%%%ͷ఩ֶΛ༝དྷͱͨ͠ϞσϦϯάख๏ͷप஌ w ๲େͳϑΝΠϧ਺ΛͲ͏΍ͬͯѻ͏͔
 ɹˠಠࣗ4DIFNBUJDTʹΑΔࣗಈੜ੒ w ϝϯόʔ͕ଟ͍ϓϩδΣΫ τͰͲ͏΍ͬͯ඼࣭Λ୲อ͢Δ͔
 ɹˠ1SFUUJFS༷ສࡀɺ ୭ʹ΋จ۟͸ݴΘͤͳ͍

Slide 25

Slide 25 text

Α͍͓೥Λ