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

実務で使うAngular CLI

実務で使うAngular CLI

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

Avatar for OKUNOKENTARO

OKUNOKENTARO

March 20, 2017
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

  1. BSNPSJL ˙ Ԟ໺ݡଠ࿠ ˙ גࣜձࣾϐΫηϧάϦ ο υ ˙ ϑϩϯ τΤϯ

    υ ɾ ΤϯδχΞ ˙ "OHVMBSίϛϡχςΟ ˙ OHLZPUP୅ද ˙ OHKBQBOελοϑ ˙ 8FC"VEJP 8FC.*%*
  2. Կ͕Ͱ͖Δͷ͔ ˙ "OHVMBSΞϓϦέʔγϣϯͷ৽ن࡞੒ ˙ package.jsonͷ࡞੒ ˙ "OHVMBSΞϓϦέʔγϣϯʹ࠷௿ݶඞཁͳґଘؔ܎ΛؚΉ ˙ ։ൃ؀ڥͷઃఆΛ࡞੒ ˙

    "OHVMBS$-*ࣗ਎ͷઃఆ.angular-cli.json ˙ ςε τ༻karma.conf.js, protractor.conf.js ˙ MJOU༻tslint.json ˙ .gitignore, .editorconfig, README.mdͳͲͷࡉ͔͍ϑΝΠϧ
  3. ˙ "OHVMBSΞϓϦέʔγϣϯͷ৽ن࡞੒ ˙ package.jsonͷ࡞੒ ˙ "OHVMBSΞϓϦέʔγϣϯʹ࠷௿ݶඞཁͳґଘؔ܎ΛؚΉ ˙ ։ൃ؀ڥͷઃఆΛ࡞੒ ˙ "OHVMBS$-*ࣗ਎ͷઃఆ.angular-cli.json

    ˙ ςε τ༻karma.conf.js, protractor.conf.js ˙ MJOU༻tslint.json ˙ .gitignore, .editorconfig, README.mdͳͲͷࡉ͔͍ϑΝΠϧ Կ͕Ͱ͖Δͷ͔
  4. ४උͷ ʮ໘౗͘ ͍͞ʯ Λٵऩ ˙ ؀ڥߏங͸͍͍ͩͨ໘౗͘ ͍͞ ˙ େن໛ΞϓϦ ʢͱ

    Γ͋͑ͣສߦҎ্ͱ͢Δʣ Λ࡞ΔͳΒ͹؀ڥߏஙΛखൈ͖Ͱ͖ͳ͍ ˙ ςε τͷ४උʹ࣌ؒΛඅ΍͢ͷͰ͸ͳ͘ɺ 
 ςε τΛॻ͘ ͜ͱʹ࣌ؒΛඅ΍͍ͨ͠
  5. Կ͕Ͱ͖Δͷ͔ ˙ ։ൃதͷิॿ ˙ αʔόͷىಈ ˙ ϑΝΠϧΛอଘ͢Δͱଈϒϥ΢β͕ߋ৽ ˙ ೲ඼ϑΝΠϧͷϏϧυ ˙

    ৽نϑΝΠϧͷ࡞੒ ˙ $PNQPOFOU %JSFDUJWF 4FSWJDFͳͲͷ৽ن࡞੒ ˙ ಉ࣌ʹͦΕΒͷςε τϑΝΠϧ΋࡞੒
  6. ։ൃதͷ ʮ໘౗͘ ͍͞ʯ Λٵऩ ˙ ϑΝΠϧͷ४උ͸͍͍ͩͨ໘౗͘ ͍͞ ˙ ͜͜Λ໘౗͘ ͕ͬͯ͞ɺ

    ϑΝΠϧΛ࡞੒͠ͳ͍ͱ ˙ ͙͢ʹංେԽ͢Δ ˙ ద੾ͳ෼ׂͷྲྀΕΛࢭΊͯ͸͍͚ͳ͍ ˙ ςε τϑΝΠϧ͕ແ͚Ε͹ ˙ ໘౗͘ ͞ ͘ͳͬͯςε τΛॻ͔ͳ͘ͳΔ ˙ ςε τϑΝΠϧΛࣗಈੜ੒ͯ͘͠ΕΔͳΒ͹ ˙ ςε τΛॻ͖࢝ΊΔ͖͔͚ͬʹܨ͕Δ
  7. ࣮຿JT ˙ ݱࡏɹ͸"OHVMBSY ʢࠓޙYʣ Ͱͷେن໛ΞϓϦέʔγϣϯͷҊ݅ʹઃܭ͔ΒࢀՃ ˙ େن໛ͱ͸ ˙ ݱ࣌఺Ͱ$PNQPOFOU 4FSWJDF਺͕௒

    ˙ ඞཁͳཁ݅Λ͢΂࣮ͯ૷ͨ͠Β͓ͦΒ͘਺ඦ ˙ ߦ਺ϕʔεͰສʙສߦลΓʹͳΔͱ༧૝ ˙ ༨ஊ͕ͩ$234ΞʔΩςΫνϟͰઃܭ
  8. ৽͍͠ը໘Λ࣮૷͢Δγʔϯ ˙ "ཁ݅Λ࣮૷͠ऴΘͬͨͷͰ#ཁ݅Λ࡞Δ ˙ ʮ'/b'ͷϧʔςΟ ϯάͰBbbComponentΛද͍ࣔͨ͠ʯ  ˙ ng g

    component bbb ˙ ʮͰ΋৽͍͠ը໘Λ࡞ΔͳΒηο τͰBbbService΋ඞཁʹͳΔΜͩΑͶʯ  ˙ ng g service bbb ˙ BbbComponentʹBbbServiceΛ%*ͯ͠ʜ
  9. ৽͍͠ը໘Λ࣮૷͢Δγʔϯ ˙ "ཁ݅Λ࣮૷͠ऴΘͬͨͷͰ#ཁ݅Λ࡞Δ ˙ ʮ'/b'ͷϧʔςΟ ϯάͰBbbComponentΛද͍ࣔͨ͠ʯ  ˙ ng g

    component bbb ˙ ʮͰ΋৽͍͠ը໘Λ࡞ΔͳΒηο τͰBbbService΋ඞཁʹͳΔΜͩΑͶʯ  ˙ ng g service bbb ˙ BbbComponentʹBbbServiceΛ%*ͯ͠ʜ ˙ ݁ہख࡞ۀ͕ଟ͍ ʂ ʂ
  10. ৽͍͠)551௨৴༻αʔϏεΛ࡞Δγʔϯ ˙ #ཁ݅Ͱ͸/endpoint/bbbͱ͍͏αʔόͷΤϯυϙΠϯ τΛୟ͔ͳ͍ͱ͍͚ͳ͍ ˙ ʮBbbApiServiceΛ࣮૷͠ͳ͖Όʯ  ˙ ng g

    service bbb-api ˙ ʮͰ΋ΤϯυϙΠϯ τʹ͸ڞ௨ͷϦΫΤε τϔομΛ෇༩͢Δॲཧ΋ඞཁ͔ͩΒ
 AaaApiServiceͱಉ͡Α ͏ʹ࡞Βͳ͖ΌͶʯ
  11. ৽͍͠)551௨৴༻αʔϏεΛ࡞Δγʔϯ ˙ #ཁ݅Ͱ͸/endpoint/bbbͱ͍͏αʔόͷΤϯυϙΠϯ τΛୟ͔ͳ͍ͱ͍͚ͳ͍ ˙ ʮBbbApiServiceΛ࣮૷͠ͳ͖Όʯ  ˙ ng g

    service bbb-api ˙ ʮͰ΋ΤϯυϙΠϯ τʹ͸ڞ௨ͷϦΫΤε τϔομΛ෇༩͢Δॲཧ΋ඞཁ͔ͩΒ
 AaaApiServiceͱಉ͡Α ͏ʹ࡞Βͳ͖ΌͶʯ  ˙ ݁ہίϐϖ ʂ ʂ
  12. #MVFQSJOUT ˙ "OHVMBS$-*͕ੜ੒͢ΔϑΝΠϧͷݩʕ਽ܗ͸Ͳ͜ʹ͋Δͷ͔ ˙ ͜ͷ਽ܗͷ͜ͱΛ#MVFQSJOUTͱݺͿ ˙ #MVFQSJOUT͸ҎԼʹ֨ೲ͞Ε͍ͯΔ ˙ ./node_modules/@angular/cli/blueprints ˙

    component, service ͳͲͷσΟ ϨΫ τ Ϧ໊͕
 ng g component, ng g service ͳͲͷίϚϯυʹରԠ ˙ ͜ͷ#MVFQSJOUTΛมߋ ɾ ௥Ճ͢Ε͹Α͍ ˙ Ͱ΋ɺ Ͳ͏΍ͬͯ ʁ
  13. %FWFMPQNFOU)JOUTGPSIBDLJOHPO"OHVMBS$-* ˙ ࣮͸ ʢੵۃతͰ΋ͳͦ͞͏͕ͩʣ ެࣜͰΞφ΢ϯε͍ͯ͠Δ ˙ https://github.com/angular/angular-cli/tree/v1.0.0-rc. 2#development-hints-for-hacking-on-angular-cli ˙ ཁ͸"OHVMBS$-*ΛGPSLɺ

    ·ͨ͸HJUDMPOF OQNMJOLͯ͠ɺ ͦ͜ͷத਎Λ
 ॻ͖׵͑ͯ͘Εͱ͍͏ Ξφ΢ϯε ˙ https://github.com/angular/angular-cli/issues/3549
 https://github.com/angular/angular-cli/issues/4302 ˙ ެࣜ͸কདྷతʹ͸֦ுػೳΛ࠾༻͍ͨ͠ɺ ͱ͍ͯ͠Δ ˙ ͿͬͪΌ͚./node_modules/@angular/cli/blueprintsΛ
 ௚઀ॻ͖׵͑ͯ΋ಈ͘ ʢඇਪ঑ʣ
  14. #MVFQSJOUTΛॻ͖׵͑ͯΈΑ ͏ ˙ "OHVMBS$-*ͷϕʔε͸&NCFS$-* ˙ https://ember-cli.com/extending/ ˙ Θ͔ͣʹ"OHVMBS$-*༻ʹνϡʔχϯά͞Ε͍ͯΔ͕
 େମ&NCFS$-*޲͚ͷ஌͕ࣝ͋Ε͹࡞ΕΔ ˙

    astUtils.addProviderToModule(), dynamicPathParser
 ͱ͍ͬͨॲཧ͕"OHVMBS$-*޲͚ʹ௥Ճ͞Ε͍ͯΔ ˙ ਽ܗʹม਺ΛׂΓ౰ͯͯϑΝΠϧΛੜ੒͢Δ͚ͩͰͳ͘
 NgModuleͰͷimportߦͷ௥Ճ΋ߦ͑Δ ʢTFSWJDF͕͍͍ྫʣ
  15. #MVFQSJOUTΛॻ͖׵͑Δ஫ҙ఺ ˙ ඞཁ࠷௿ݶͷվมʹཹΊΔ ˙ ͳΜ͔ڽͬͨ͜ͱΛ΍Ζ͏ ͱ͠ͳ͍ ˙ ެࣜͷίʔσΟ ϯά ɾ

    ελΠϧʹଇͬͯॻ͍͓ͯ͘΂͖ ˙ ͲͪΒ΋ࣗલ#MVFQSJOUTͷ෗ഊ๷ࢭࡦ ˙ ެࣜଆͷ#MVFQSJOUTߋ৽ʹஔ͍͍͔ͯΕΔͱ෗Δ ˙ ͜ͷลͷϝϯςίε τͱ#MVFQSJOUTΛࣗ࡞ͨ݁͠Ռͷ࡞ۀޮ཰Λఱṝʹ ˙ ࠓ΍ͬͯΔҊ݅ͩͱϖΠ͢ΔͷͰࣗ࡞ͨ͠
  16. ίʔ υ ϨϏϡʔΛཔΉγʔϯ ˙ ʮϨϏϡʔ͓ͳ͠Ό͢ʯ  ˙ ʮͲΕͲΕʜ໰୊ͳͦ͞͏ͩͳɺ Ϛʔδ͠·ͨ͠ʯ 

    ˙ ޙ೔ ˙ ʮ͋ͬɺ ͜͜ϨϏϡʔͷͱ͖͸ݟಀͯͨ͠ɻ ͜ͷॻ͖ํ͸Α ͘ͳ͍ʯ  ˙ ϨϏϡʔͰݟಀ͞ͳ͍ͷ͕Ұ൪͚ͩͲʜ ˙ ਓ͕ؒҰߦҰߦɺ ͜ͱࡉ͔ʹϨϏϡʔ͢Δͷ͸͠ΜͲ͍
  17. ίʔ υ ϨϏϡʔΛཔΉγʔϯ ˙ ʮϨϏϡʔ͓ͳ͠Ό͢ʯ  ˙ ʮͲΕͲΕʜ໰୊ͳͦ͞͏ͩͳɺ Ϛʔδ͠·ͨ͠ʯ 

    ˙ ޙ೔ ˙ ʮ͋ͬɺ ͜͜ϨϏϡʔͷͱ͖͸ݟಀͯͨ͠ɻ ͜ͷॻ͖ํ͸Α ͘ͳ͍ʯ  ˙ ϨϏϡʔͰݟಀ͞ͳ͍ͷ͕Ұ൪͚ͩͲʜ ˙ ਓ͕ؒҰߦҰߦɺ ͜ͱࡉ͔ʹϨϏϡʔ͢Δͷ͸͠ΜͲ͍ ˙ ͦΕ"OHVMBS$-*ͰͰ͖ΔΑ ʂ ʂ
  18. $PEFMZ[FS ˙ "OHVMBS༻ʹ֦ு͞ΕͨUTMJOUϧʔϧू ˙ https://github.com/mgechev/codelyzer ˙ ྫ͑͹͜Μͳϧʔϧ ˙ @ComponentͷinputͰ͸ͳ͘@Input()Λ࢖͏ Α

    ͏ڧ੍͢Δϧʔϧ ˙ UTͰ͸ͳ͘ ςϯϓϨʔ τͷ)5.-Λݕূͯ͘͠ΕΔϧʔϧ ˙ @Component͕෇͘DMBTT໊͸*Componentͱ͠ͳ͚Ε͹ͳΒͳ͍ϧʔϧ ˙ ֤ϧʔϧͷ࣮૷͸ͲΕ΋୹͍ͷͰಡΜͰΈΔͱ໘ന͍
  19. ˙ ߏจղੳΛඞཁͱ͢ΔҎ্"45 "CTUSBDU4ZOUBY5SFF ͷ஌͕ࣝඞཁ ˙ "45FYQMPSFS͕͋Δ͔Βා͘ͳ͍ ˙ https://astexplorer.net/ ˙ 54-JOU$VTUPN3VMFT

    ˙ https://palantir.github.io/tslint/develop/custom- rules/ ˙ ͜͜ΛಡΊ͹54-JOUʹ͓͚Δϧʔϧ࡞੒ํ๏͕෼͔Δ ˙ SyntaxWalker͕ΊͪΌ͘ ͪΌ༏लͳͷͰࣗ࡞ϧʔϧΛ࡞Δͱ͖͸
 ࠷খݶͷWBMJEBUJPO࣮૷ͰࡁΉ ϧʔϧͷ࡞Γํ
  20. ˙ ͍͔ͭࣗ͘࡞ͯ͠Έͨ ˙ AbstractFooServiceΛܧঝ͍ͯ͠ΔΫϥεʹݶΓ
 PromiseΛฦ͢ϝ ιο υͷ໋໊͸ඞͣ*AsPromise()ʹ͠ͳ͚Ε͹ͳΒͳ͍ ˙ ܕ͕ChangeDetectorRefͷม਺໊͸ඞͣcdRefʹ͠ͳ͚Ε͹ͳΒͳ͍ ˙

    windowΛ࢖͍ͬͯͨΒඞͣWindowRef.nativeWindowΛ࢖͏ Α ͏ܯࠂ ˙ ͳͲ ˙ Ҋ݅ͷ୲౰ΤϯδχΞ͕ෳ਺໊ͱ͍͏ن໛ͳͷͰɺ ίʔσΟ ϯάελΠϧͷ8JLJΛ
 อक͢Δ͘ Β͍ͳΒࣗ࡞ϧʔϧΛอकͨ͠ํׂ͕ʹ߹͏ ͱ൑அ ˙ ਓ͕ؒϨϏϡʔͰۤ࿑͢Δͷ΍ΊΑ ͏ ۀ຿Ͱͷࣗ࡞ϧʔϧྫ
  21. ΧόϨοδ ˙ "OHVMBS$-*͸ΧόϨοδऔಘ·Ͱαϙʔ τ͍ͯ͠Δ ˙ *TUBOCVM ˙ https://github.com/gotwarlost/istanbul ˙ ng

    test --single-run --code-coverage ˙ ͜ͷͱ͖ʹ࣮ߦ͞Εͨςε τͷΧόϨοδ ɾ Ϩϙʔ τ͕ग़ྗ͞ΕΔ
  22. "OHVMBS$-*ͷΦϓγϣϯΛ׆༻͠Α ͏ ˙ $*্ͳͲͰ͸ɺ ϓϩάϨεදࣔΛͦͷ··ग़ྗͯ͠͠·͍ಡΈʹ͍͘ ˙ ΦϓγϣϯͰ໧ΒͤΔ ˙ ྫ͑͹ςε τͩͱ

    ˙ ng test --single-run --progress false --reporters dots ˙ ϩά͕εοΩ Ϧ ˙ ςε τͷਐḿදࣔ΋ͬ͘͟ ΓΧο τ ˙ ͜͏͍͏ Φϓγϣϯ͕͠͹͠͹༻ҙ͞Ε͍ͯΔ
  23. ༻ҙ͞ΕͨΦϓγϣϯΛͲ͏΍ͬͯ֬ೝ͢Δ͔ ˙ "OHVMBS$-*νʔ τγʔ τ ˙ http://qiita.com/armorik83/items/5ad850b78e5893d41570 ˙ $-*্Ͱ֬ೝ͢Δํ๏ ˙

    ng help ˙ ൒෼͘ Β͍͸͜͜Ͱ෼͔Δ ˙ ࣮૷ΛಡΜͩ΄͏͕ૣ͍ ˙ ྫ͑͹ng g componentͷΦϓγϣϯ͸͜͜ʹ͋Δ
 https://github.com/angular/angular-cli/blob/v1.0.0-rc.2/packages/%40angular/cli/blueprints/component/index.ts#L40-L105 ˙ ng build΍ng serveͳͲͷίϚϯυ͸͜͜
 https://github.com/angular/angular-cli/blob/v1.0.0-rc.2/packages/%40angular/cli/addon/index.js#L13-L37
  24. ͊͞ೲ඼ͩ ˙ ݱҊ݅Ͱ͸ɺ ఆظతʹਐḿΛೲ඼͢Δ࢓૊Έʹͳ͍ͬͯΔ ˙ CSBODIنଇ ˙ NBTUFS ˙ ೲ඼͢ΔલʹEFWFMPQΛNFSHFͯ͠5BH෇͚

    ˙ EFWFMPQ ˙ ϝΠϯͷCSBODI ˙ UPQJDJTTVFOO IPUGJYJTTVFOO ˙ *TTVF୲౰ऀ͕ਵ࣌࡞੒
  25. "OHVMBS$-*Ͱೲ඼෺ΛϏϧ υ ˙ npm run buildͷ಺༰Λ࣍ͷΑ ͏ʹ͍ͯ͠Δ ˙ ng build

    --aot -e prod --progress false ˙ "P5$PNQJMFΛ࣮ࢪ ˙ environmentΛproductionʹઃఆ ˙ $*Ͱͷϩά͕൥͘ͳΒͳ͍Α ͏ରࡦ
  26. "P5$PNQJMF ˙ "IFBEPG5JNF$PNQJMF ʢࣄલίϯύΠϧʣ  ˙ "OHVMBSͷςϯϓϨʔ τ)5.-ʹؚ·ΕΔಛघͳߏจΛࣄલʹ͢΂ͯύʔε ˙ )5.-Λ࢒ͣ͞ʹશͯ+BWB4DSJQUιʔείʔ

    υͱͯ͠ग़ྗ ˙ ΞϓϦέʔγϣϯ࣮ߦ࣌ͷϥϯλΠϜ ɾ ύʔεͷෛՙΛ࡟ݮͰ͖Δ ˙ ೲ඼෺΍σϓϩΠ಺༰ʹ͸"P5Λద༻ͨ͠ํ͕͍͍
  27. ։ൃ࣌ͷޮ཰ͷྑ͍ίϯύΠϧ ˙ "P5ͷରٛޠ͸+*5 +VTU*O5JNF$PNQJMF  ˙ ng serveΛ࣮ߦͯ͠։ൃΛਐΊΔͱ͖ ˙ ng

    serve --aotͱ͢ΔͱϏϧυʹֻ͕͔࣌ؒΔͷͰΦεεϝ͠ͳ͍ ˙ --aotΛ࣮ߦ͠ͳ͍ͱݕ஌Ͱ͖ͳ͍ίϯύΠϧΤϥʔ΋͋ΔͷͰ
 $*Ͱ͸ඞͣ--aotΛ࣮ߦ͓ͤͯ͘͞
  28. ˙ ౰વ͚ͩͲɺ ςε τ΋#MVFQSJOUT΋ࣗ࡞ϧʔϧ΋ɺ ϓϩάϥϜͰ͋ΔҎ্෗Δ ˙ ඞཁ࠷খݶͷ಺༰Λγϯϓϧʹ࣮૷ ˙ ެࣜͷ࣮૷ʹࣅͤͨॻ͖ํ ˙

    ͜ΕΒ͕कΕͳ͍Α ͏ͳΒෛ࠴Խ͢Δ ˙ ΍ΔͳΒ͹อकΛ৫ΓࠐΜͰݕ౼͢΂͖ ˙ ϓϩμΫ τͱҧࣺͬͯܿͯ͘Δ͜ͱ΋ؚΉ ࣗ࡞ͷෛ࠴Խ
  29. $PEF(SJE ˙ ࣥචਞ͸ݱ໾ͷϑϩϯ τΤϯυ ɾ ΤϯδχΞ ˙ جૅ͔Β࠷৽τ Ϩϯυٕज़·Ͱ ˙

    ϓϩͱͯ͠ͷ࢓ࣄͷ࣭΋޲্ͤ͞Δ৘ใ ˙ ಡΈ͍ͨͱ͖ʹ͙͢ಡΊΔ ֹ݄ԁ ʢ੫ൈʣ 
 ΫϨδο τΧʔ υɺ 1BZ1BMࢧ෷͍ͳΒ೔ؒແྉ IUUQTXXXDPEFHSJEOFU