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

大規模は開発環境保守が大変なので改善する / ng-kyoto Angular Meetup 8

大規模は開発環境保守が大変なので改善する / ng-kyoto Angular Meetup 8

ng-kyoto Angular Meetup 8にて発表した資料です。

Avatar for OKUNOKENTARO

OKUNOKENTARO

October 06, 2018
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

  1. ԿΛ͢Δਓ w େن໛ܥҊ݅ͷ։ൃ ʢສʙສߦͷΞϓϦέʔγϣϯઃܭ͔Β࣮૷ʣ  w ίʔ υ ϨϏϡʔ΍ઃܭͷίϯαϧλϯ τ

    w ΧϯϑΝϨϯεͰͷొஃɺ ߨԋ w ٕज़ຊ΍ΦϯϥΠϯϚΨδϯͰͷࣥච w 8FC.VTJDٕज़Λ༻͍ͨ։ൃ
  2. ։ൃ؀ڥͷεέʔϧ͸ޙखʹͳΓ͕ͪ w ςε τϑ ϨʔϜϫʔΫͦͷ΋ͷͷۛຯ w ϓϩδΣΫ τॳظͷςε τϑ ϨʔϜϫʔΫΛ


    େن໛ʹͳ͔ͬͯΒ΋࢖͍ଓ͚Δͷ͸ຊ౰ʹΑ͍͜ͱͳͷ͔ ʁ  w -JOU 'PSNBUUFSͳͲͷࣗಈॲཧͷੋඇ w ͦΕΒ͸͍࣮ͭߦ͢΂͖͔ ʁ  w ඞཁͳϥΠ ϒϥ Ϧͷੋඇ w ͦ΋ͦ΋package.jsonʹແବ͕ͳ͍͔ɺ ݟ௚͍ͯ͠Δ͔
  3. OHVQEBUF w IUUQTHJUIVCDPNBOHVMBSBOHVMBSDMJXJLJVQEBUF w "OHVMBS$-*ʹ͸ґଘύοέʔδͷόʔδϣϯΛ্͛ΔͨΊͷίϚϯ υ͕͋Δ • ng update w

    ͜ΕΛ਺ϲ݄ʙ೥ͱ์ஔͨ͠Βɺ όʔδϣϯ͕ࠩେ͖ ͘ෆ۩߹ͷՄೳੑ͕ߴ·Δ w ։ൃ޻਺ʹ ʮఆظతͳόʔδϣϯͷ֬ೝͱΞοϓσʔ τ࡞ۀʯ ΛؚΉ΂͖
  4. ඞͣ௥ՃΠϯε τʔϧͨ͠ํ͕Α͍΋ͷ w 1SFUUJFS w ਓ͕ؒίʔσΟ ϯάελΠϧΛؾʹ͢Δ࣌୅͸ऴΘͬͨ w 1SFUUJFSͷࣗಈ੔ܗ݁Ռʹৗʹै͏ w

    ࠷ॳ͸ ʮࣗ෼ͷίʔσΟ ϯάελΠϧͱҧ͏ʯ ͱؾʹೖΒͳ͘ ͯ΋࢖͏ w ਺ϲ݄͢Ε͹׳Εͯ1SFUUJFSͳ͠ͷ؀ڥ͕͍΍ʹͳΔ
  5. "OHVMBS$-*ͷςε τߏ੒ w IUUQTBOHVMBSKQHVJEFUFTUJOH w ,BSNB +BTNJOF w 5FTU#FE w

    ϞοΫͷࢦఆ΍Πϯελϯεͷड͚औΓ w ґଘੑ஫ೖ %FQFOEFODZ*OKFDUJPO Λ׆༻ͨ͠ςε τʹ͔ܽͤͳ͍
  6. ͦͷςε τ͸ຊ౰ʹඞཁ͔ w ͦͷςε τ͸ຊ౰ʹඞཁ͔ۛຯ͢΂͠ w ͦͷDMBTT 4FSWJDF ʹςε τ͸ຊ౰ʹඞཁ͔

    ʁ  w 'BDBEFύλʔϯͳͲͰઃܭͨ͠ࡍ
 ஥ཱͪͱͳΔ4FSWJDFʹ೦ೖΓͳςε τΛॻ͘΂͖͔ ʁ  w calls.count()ͷճ਺ݕূʹऴ͍࢝ͯ͠ͳ͍͔ ʁ  w ϞοΫͷอक͚ͩͰΉ΍Έʹർฐ͍ͯ͠ͳ͍͔ ʁ
  7. ςε τΛࣺͯΔ༐ؾ wʮςε τΛࣺͯΔʯ ͱ͍͏ ͱෆԺʹฉ͑͜Δ͔΋͠Εͳ͍ w ۛຯͨ݁͠Ռ w ଞͷՕॴͷ୯ମςε

    τͰॲཧ͕े෼ʹकΒΕ͍ͯΔ w ͜ͷՕॴͷςε τΛΧόϨοδͷͨΊ͚ͩʹ࣮ࢪ͢Δͷ͸ෆໟͩ w ςε τ͍߲ͨ͠໨͕෼͔Βͳ͍··ɺ ݟΑ ͏ݟ·ͶͰॻ͍͍͍ͯͯͭ΋සൟʹյΕΔ w ͜͏͍ͬͨ঱ঢ়͕ى͍ͬͯ͜Δ৔߹
 Ή͠Ζͦͷςε τ͸ࣺͯͨ΄͏͕։ൃޮ཰্͕͕Δ
  8. ୯ମςε τͷॲཧ࣌ؒ w ୯ମςε τͷ݅਺ w ਺݅ʙ਺े݅Ͱ͋Ε͹ؾʹͳΒͳ͍͔΋͠Εͳ͍ w ਺ઍ݅Φʔμʔʹͳͬͯ͘ Δͱ

    ʮςε τ࣮ߦ࣌ͷແବΛল͍ͯߴ଎Խ͢Δʯ 
 ͱ͍͏؍఺͕ඞཁ w ςε τ͕೦ೖΓͳͷ͸ɺ ͔ͨ͠ʹΑ͍͜ͱͩ wʮͦͷςε τ͸͋ͳͨͷͲΜͳෆ҆Λղফͤ͞ΔͨΊͷςε τͰ͔͢ ʁ ʯ  w ແବͳςε τ͸ɺ ͍ͬͦແ͘ ͢͜ͱͰߴ଎Խͤ͞Δ
  9. +FTUͷಋೖ w +FTU w 'BDFCPPL੡ͷςε τϑ ϨʔϜϫʔΫ w IUUQTKFTUKTJPKB w

    ߴ଎ͳ࣮ߦͱɺ ߴ଎ͳ࠶࣮ߦ w ϚϧνίΞΛ׆༻ͨ͠ฒྻ࣮ߦ w εφοϓγϣ ο τςε τ
  10. +BTNJOF͔Β+FTU΁ͷҠߦ w ΋ͱ΋ͱ+BTNJOFͰಈ͍͍ͯΔςε τΛ+FTUͰಈ͔͢ʹ͸ w 5FTU#FEΛ࢖͍ͬͯΔՕॴ͸ɺ Ұ୴+BTNJOFͷ··ͷํ͕Α͍
 ʢ"OHVMBS͸+BTNJOFΛެࣜʹαϙʔ τ͍ͯ͠ΔͨΊʣ 

    w ؔ਺ͷςε τ΍ɺ ґଘੑ஫ೖΛ൐Θͳ͍4FSWJDFͷςε τʹ͸+FTU͕༗༻ w +FTUͷ"1*͸+BTNJOFͷ"1*ͱ΄΅ޓ׵͕͋Δ w ϫʔΫΞϥ΢ϯ υͱ ͯ͠
 .spec.ts͸+BTNJOF .test.ts͸+FTUͰಈ͘ Α ͏ʹͨ͠
  11. UTDPOpHKTPOͷվ଄ w "OHVMBS$-*ͷੜ੒͢Δtsconfig.spec.json͚ͩͰ͸ɺ +BTNJOFͱ+FTUͷಉډ͕ࠔ೉ w +BTNJOFͷܕఆٛϑΝΠϧͱ+FTUͷܕఆٛϑΝΠϧ͕
 ಉҰείʔϓ্ͰҰ෦ڝ߹͢ΔͨΊ w tsconfig.test.jsonΛෳ੡ͯ͠࡞੒ w

    include΍compilerOptions.typesͷϓϩύςΟ Λॻ͖׵͑ͯ
 +FTUͰར༻Մೳʹ͢Δ w angular.jsonͷMJOUͷઃఆ΋ซͤͯमਖ਼͠ͳ͍ͱɺ +FTUଆ͚ͩ-JOU͕ແࢹ͞ΕΔͷͰ஫ҙ
  12. ςε τ࣮ࢪ͕ඇޮ཰ͳͱ͖ w ςε τ͕਺ઍ݅ʹͳͬͨͱ͖ ʮςε τࣦഊ࣌ͷ࠶࣮ߦʯ ͕
 ૝૾Ҏ্ʹε τ

    ϨεͱͳΔ w ςε τΛ࠶࣮ߦ͢Δͨͼʹ8FCQBDLͷϏϧ υͰ෼΄Ͳ଴ͨ͞ΕΔ w ઌʹམͪΔςε τΛॻ͍͔ͯΒಈ࣮͘૷Λॻ͘ɺ ͱ͍ͬͨΞϓϩʔνΛऔΔ͜ͱ͕ ࠔ೉ʹͳΔ w ͦ΋ͦ΋ςε τΛॻ͘ؾྗ͕ࣦΘΕΔ
  13. +FTUͷ໌Β͔ͳϝ Ϧ ο τ w +FTU͸΢Υ ονͱ࠶࣮ߦʹؔ͢Δૢ࡞ੑ͕ͱͯ΋Α͍ w མͪͨςε τͷΈͷ࠶࣮ߦ΍ɺ

    ςε τϑΝΠϧͷϑΝΠϧ໊ͰߜΓࠐΜͰͷ
 ࣮ߦͳͲίϚϯ υ͕๛෋ w ࠶࣮ߦ͕ඵʙ਺ඵͳͷͰςε τϑΝʔε τͳ։ൃ΋ࣗࡏ w ΍΍͍͜͠ॲཧ΋ৗʹςε τΛॻ͖ͳ͕Β࣮૷Ͱ͖Δͱ͍͏҆৺ײ͕͋Δ
  14. &&ςε τ͸ߴ֬཰Ͱෛ࠴Խ w ΋͠&&ςε τͷੋඇΛཧղ͠ͳ͍··ɺ ΍ΔؾΛग़ͯ͠೦ೖΓʹॻ͍ͨ৔߹ w ͦͷ&&ςε τ͸͔ͳΓߴ͍֬཰Ͱෛ࠴Խ͢Δ w

    ࣮ͷͱ͜Ζɺ εϚʔ τͰ༗ӹͳ&&ςε τΛॻ͍ͯอक͢Δʹ͸͔ͳΓ εΩϧ͕ٻΊΒΕΔ w มߋʹڧ͍͔Ͳ͏͔ w ػೳҰͭҰͭͷཻ౓ͩͱมߋ͸গͳ͍ w ը໘શମͷ ʮͲΕ͔ʯ ͕มߋ͞ΕΔස౓͸ߴ͍ w $44Ϋϥε໊ͷվ໊ɺ σβΠϯͷมߋͱཁૉͷ࠶഑ஔɺ ಋઢݟ௚͠
  15. ෛ࠴Խͨ͠ςε τ͸Ͳ͏ͳΔ͔ w ৗʹϨο υ w Ϩο υ͸୭΋ݟͨ͘ ͳ͍ w

    $*ͷఆظ࣮ߦ͔Β֎͞ΕΔ w ϩʔΧϧͰ୭΋࣮ߦ͠ͳ͘ ͳΔ w ࣮ߦ͞Εͳ͍͔Βϝϯςφϯε͞Εͳ͘ ͳΔ
  16. ୭΋࣮ߦ͠ͳ͍ίʔ υ͸Ͳ͏ͳΔ͔ w ෛ࠴Խ w ຊମଆͷίʔ υͷมߋͰɺ &&ͷςε τίʔ υ͕໰୊Λى͜͢͜ͱ΋͋Δ

    w ୭΋࣮ߦ͠ͳ͍ίʔ υͷίϯύΠϧΤϥʔΛ໧ʑ ͱ௚͢ w ͦͷίϯύΠϧΤϥʔΛ௚ͯ͠΋୭΋޾ͤʹͳΒͳ͍ w ϓϩδΣΫ τ಺શମݕࡧͰ&&ϑΝΠϧ͕Ҿֻ͔ͬΓݕࡧ݁ՌͷϊΠζͱͳΔ w ࠜຊతʹআڈ͢Δଞͳ͘ ͳΔ
  17. ͦ΋ͦ΋ԿΛςε τ͍ͨ͠ͷ͔ w ͦͷγφϦΦ͸ຊ౰ʹ&&ςε τͱ ͯ͠ςε τ͢΂͖ͳͷ͔ w ϑϩϯ τΤϯ

    υͷ୯ମςε τͰΑ͍ͷͰ͸ ʁ  w αʔόʔଆͷςε τʹ͢΂͖Ͱ͸ ʁ  w εφοϓγϣ ο τςε τΛ׆༻͢΂͖Ͱ͸ ʁ  w ۛຯ͢Ε͹͢Δ΄Ͳɺ &&ςε τ͸ ʮͦΜͳʹແ͘ ͍͍ͯ΍ʯ ͱͳΔ
  18. ୯ମςε τͰ͸Ͱ͖ͳ͍͜ͱΛ΍Δ w ͋Δը໘Λ։͍ͨͱ͖ʹɺ ͦͷը໘಺ཁૉ ɾ ॲཧͷ ʮͲ͔͜ʯ Ͱ
 ϥϯλΠϜΤϥʔ͕ग़͍ͯͳ͍͔

    wʮ͜ͷը໘Λ։͍ͨΒਅͬനͰͨ͠ ʂ ʯ Λແ͘ ͢ w Τϥʔ͕ग़ͳ͍৔߹ɺ ଟ͘ͷέʔεͰ ʮόά͸ى͍ͬͯ͜ͳ͍ʯ ͱݟͳͤΔ w ΋ͪΖΜݸʑͷ୯ମςε τɺ Өڹൣғಛఆɺ खಈςε τ΋ซ༻͢΂͖
  19. 1VQQFUFFSͰͷ&SSPS%FUFDUJOH w 1VQQFUFFS +FTUΛ૊Έ߹ΘͤΔ w 1VQQFUFFSͰ͸$ISPNFͷΤϥʔΛϋϯ υ Ϧ ϯάͰ͖Δ w

    page.on('console', callback)ͱ͍͏"1* w ͜ΕΛ+FTUͰ࣮ߦ͠ ʮΤϥʔ͕ແ͚Ε͹άϦʔϯʯ ͱ͍͏ ςε τ͕ॻ͚Δ
  20. ܭଌͤΑ w ύϑΥʔϚϯεվળʹ͓͍ͯɺ Կࣄ΋ਪଌΑ Γܭଌ w Ͳͷॲཧ͕஗͍ͷ͔పఈతʹચ͍ग़͢ w npm installͰແବͳ΋ͷΛΠϯε

    τʔϧ͍ͯ͠ͳ͍͔ w ͍ͭͰʹ࣮ߦ͞ΕΔpostinstall͸$*࣮ߦʹඞཁͳॲཧͳͷ͔ w ਓ͕ؒԣண͢ΔͨΊͷॲཧ͕$*ʹͱͬͯෛ୲ʹͳ͍ͬͯͳ͍͔
  21. ࡉ෼ԽͤΑ w ͨͱ͑͹postinstallΛ΍ΊΔ w ਓ͕ؒԣண͢ΔͨΊ͚ͩͷࣗಈԽ͸͠ͳ͍ w ࣮͸npm install && npm

    run setupͳͲͷίϚϯ υͷ૊Έ߹ΘͤΛ
 εχϖο τʹ࣮ͯ͠ߦ͢Ε͹͍͍͚ͩͩͬͨ w npm installͰͷॲཧΛݶΓͳ͘ݶఆతʹ͢Δ w 5FTUJOH -JOUJOH 1SFWJFX%FQSPZͷΑ ͏ͳෳ߹తͳॲཧΛॻ͔ͳ͍
  22. ͳΔ΂͘ฒྻ࣮ߦ w ςε τͯ͠ɺ -JOUπʔϧճͯ͠ɺ ϓϩμΫγϣϯϏϧ υ࣌Τϥʔ͕ແ͍͔֬ೝͯ͠ʜ w ͦͷॲཧ͸ຊ౰ʹ௚ྻ࣮ߦ͠ͳ͍ͱ͍͚ͳ͍΋ͷ͔ ʁ

     w ςε τͭͭ͠ɺ -JOUπʔϧճͭͭ͠ɺ Ϗϧ υ͢Ε͹Α͍ w ฒྻ࣮ߦ͢Δ w 5SBWJT$*ʹ΋$JSDMF$*ʹ΋ฒྻ࣮ߦͷͨΊͷ"1*͕༻ҙ͞Ε͍ͯΔ w ࠷ऴతʹ͸$*ϓϩόΠμʹࡳଋϏϯλͯ͠εϖοΫΛ্͛Δ
  23. ͍͔ͳΔ΋ͷ΋෗Δ w ϓϩμΫ τίʔ υ͸෗͍ͬͯ͘ w ಉ࣌ʹςε τίʔ υ΋෗Δ w

    $*ͷઃఆϑΝΠϧ΋෗Δ w package.jsonͷεΫ Ϧ ϓτ΋෗Δ
  24. ఆظతͳ؂ࢹͷ໨ w ໰୊͕ى͖ͯ ʮ͍͔ͭ௚ͤ͹͍͍΍ʯ ͩͱɺ Ӭԕʹ௚͢ͱ ͖͸དྷͳ͍ w ໰୊ͷ஝ੵ͸ɺ ΍͕ͯऔΓฦ͠ͷ͔ͭͳ͍͜ͱʹܨ͕Δ

    w ։ൃ͕׬શʹε τοϓ͢Δʜ w ໰୊म෮ʹ਺ਓ݄͔͔ΔʜͳͲ w ݱঢ়Ͱ໰୊ͳ͍͔ɺ ఆظతʹٙ໰Λ࣋ͭ͜ͱ͕ॏཁ w ҆શͷͨΊͷ׆ಈ