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

2018-07-31-angular-tips

012765e2e29cd000be9e0f32236c46d2?s=47 Araya
July 31, 2018
82

 2018-07-31-angular-tips

合同会社ヘマタイトの社内LT会で話した、Angularでアプリケーションを開発するときに個人的に意識しているTipsです

012765e2e29cd000be9e0f32236c46d2?s=128

Araya

July 31, 2018
Tweet

Transcript

  1. ͍͔͖ͭͬͱ໾ʹཱͭ Angular։ൃTips @arayaryoma 2018-07-31 ヘマタイト社内LT

  2. ର৅ ͜Ε͔Β"OHVMBSͰΞϓϦέʔγϣϯ։ൃΛ࢝ΊΑ͏ͱ͍ͯ͠Δਓ "OHVMBSͰΞϓϦέʔγϣϯΛগ͠ॻ͍ͨ͜ͱ͕͋Δਓ ͢ͰʹΰϦΰϦॻ͍ͯΔਓʹ͸ͭ·Βͳ͍͔΋͠Εͳ͍Ͱ͢

  3. ࿩͢͜ͱ ։ൃ؀ڥΛߏங͠Α͏ "OHVMBS$-*Λ࢖͍౗ͦ͏ ؀ڥ͝ͱʹϏϧυεΫϦϓτΛ෼͚Α͏ $PEFGPSNBUUFSΛࣗಈͰ͔͚ΔΑ͏ʹ͠Α͏ ࠷৽൛Λ࢖͓͏ !OHSYTUPSFͰঢ়ଶΛ؅ཧ͠Α͏ !BOHVMBSNBUFSJBM !BOHVMBSDELͰָʑDPNQPOFOU։ൃ 1SPNJTFͱ0CTFSWBCMFΛ࢖͍෼͚Α͏

    ࠔͬͨΒެࣜυΩϡϝϯτ ͞ΒʹࠔͬͨΒ(PPHMF
  4. ։ൃ؀ڥΛߏங͠Α͏

  5. ඞཁͳ΋ͷ /PEFKT /PEFKTQBDLBHFNBOBHFS ZBSO OQN QOQNͳͲ

  6. /PEFKT IUUQTOPEFKTPSHFO͔ΒΠϯετʔϧͰ͖Δ ෳ਺ͷ/PEFKTͷόʔδϣϯΛ੾Γସ͑Ͱ͖ΔπʔϧΛ࢖͏ͷ͕͓͢͢Ί IUUQTHJUIVCDPNDSFBUJPOJYOWN IUUQTHJUIVCDPNOPEFOWOPEFOW IUUQTHJUIVCDPNUKO

  7. 1BDLBHFNBOBHFS OQN͸/PEFKTΛΠϯετʔϧ͢Δͱ෇ଐͯ͘͠Δ ࠷৽൛͸ศརػೳ͕૿͑ͯͨΓηΩϡϦςΟύον͕ೖ͍ͬͯͨΓ͢Δͷ ͰɺͱΓ͋͑ͣnpm install -g npmͰ࠷৽൛Λ࢖͏Α͏ʹ͢Δͷ͕ ͓͢͢Ί ଞͷ༗໊ॴͩͱZBSO IUUQTZBSOQLHDPNFO

     OQN͸MPDLpMFʹ೉͕͋ΔͷͰݸਓతʹ͸࠷ۙZBSOΛਪ͍ͯ͠Δ
  8. "OHVMBS$-*Λ׆༻͠Α͏

  9. "OHVMBS$-*ͱ͸ "OHVMBS։ൃͷͨΊͷ$-*πʔϧ ng [subcommand] [arguments] ϓϩδΣΫτͷॳظ࡞੒΍ɺίϯϙʔωϯτͳͲͷ࡞੒ɺϏϧυ΍ϩʔΧϧ αʔόʔͷىಈͳͲΛ؆୯ʹͰ͖Δ WΑΓɺNBKPS NJOPSVQEBUF͸"OHVMBSͷόʔδϣϯ൪߸ͱἧ͑ͯϦ Ϧʔε͞ΕΔΑ͏ʹͳͬͨ

    "OHVMBS$-*Λ༻͍ͳͯ͘΋։ൃ͸Մೳ͕ͩɺݱ࣮తʹ࢖Θͳ͍ख͸ͳ͍
  10. Πϯετʔϧ npm install -g @angular/cli yarn global add @angular/cli

  11. ϓϩδΣΫτͷ৽ن࡞੒ ng new [application-name] componentͳͲͷprefix͕σϑΥϧτͰ͸ app ͱͳΔ͕ɺ--prefix [prefix] ΦϓγϣϯͰมߋ͕ՄೳͳͷͰɺ৽ن࡞੒࣌ʹprefixΛࢦఆ͓ͯ͘͠ ͱ͋ͱͰݕࡧɾஔ׵͠ͳ͍͍ͯ͘ͷͰָ

    --style ΦϓγϣϯͰstylesheetͷϑΝΠϧܗࣜΛࢦఆͰ͖Δɻ
 e.g. ng new sample --style scss
 ͜Ε΋͋ͱͰมߋ͠ͳ͍͍ͯ͘ͷͰ࠷ॳʹࢦఆ͓ͯ͘͠ͱָ
  12. ng generate ΞϓϦέʔγϣϯ಺ʹDPNQPOFOU TFSWJDF QJQF EJSFDUJWFͳͲΛ࡞੒Ͱ ͖Δ e.g. ng generate

    component directory/component-name component΍serviceͳͲΛ࡞Δͱ͖͸جຊ͜ΕΛ࢖͏ WebStormͰ͸GUIͰݺͼग़͕͠Մೳ [demo]
  13. ng update ϥΠϒϥϦΛΞοϓσʔτ͢ΔͨΊͷίϚϯυW ϥΠϒϥϦͷschematicsʹΑΓɺbreaking-changesͳͲ͕͋ͬͨͱ͖ʹ ࣗಈͰஔ׵ͯ͘͠ΕΔ e.g. ng update @angular/core
 =>

    rxjs΍TypeScriptɺAngular frameworkͷpackageΛ͢΂ͯupdate͢Δ
  14. ng add ϓϩδΣΫτʹϥΠϒϥϦΛ௥Ճ͢ΔͨΊͷίϚϯυW IUUQTCMPHBOHVMBSJPWFSTJPOPGBOHVMBSOPXBWBJMBCMFDDCFGBB υΩϡϝϯτΛݟͯ΋ଟ෼Կ΋Θ͔Βͳ͍IUUQTHJUIVCDPNBOHVMBSBOHVMBSDMJXJLJBEE QBDLBHFΛΠϯετʔϧ͢Δ͚ͩͰͳ͘ɺNPEVMFͷJNQPSU TUZMFTIFFUͷಡΈࠐΈ΍QPMZpMMΛ উखʹ௥ՃͰ͖ΔΑ͏ʹͳΔ ϥΠϒϥϦͷTDIFNBUJDTͷTDSJQUʹΑΔ΋ͷ 

    υΩϡϝϯτ͸ϥΠϒϥϦͷTDIFNBUJDTΛݟΔͱ͍͍
 FHIUUQTHJUIVCDPNBOHVMBSNBUFSJBMCMPCNBTUFSTSDMJCTDIFNBUJDT DPMMFDUJPOKTPO
  15. ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़͢ OHOFXͰϓϩδΣΫτΛ࡞ͬͨޙ͸ɺHMPCBMͰ͸ͳ͘ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़ͨ͠ ΄͏͕͍͍ HMPCBMͱϓϩδΣΫτϩʔΧϧͰBOHVMBSDMJͷόʔδϣϯ͕ҧͬͯյΕΔ͜ͱΛ๷͙ ܯࠂ͕ͰΔ:PVSHMPCBM"OHVMBS$-*WFSTJPO  JTHSFBUFSUIBOZPVSMPDBMWFSTJPO  5IF MPDBM"OHVMBS$-*WFSTJPOJTVTFE

    ར༻ํ๏ ./node_modules/.bin/ng yarn run ng npx ng
  16. ؀ڥ͝ͱʹϏϧυεΫϦϓτΛ෼͚Α͏

  17. "OHVMBSϓϩδΣΫτͷCVJME ng buildͰϓϩδΣΫτΛCVJME͠ɺ੒Ռ෺ IUNM DTT KT BTTFUT ͸EJTU σΟϨΫτϦʹు͖ग़͞ΕΔ EFGBVMU

     ng build —prodͷΑ͏ʹΦϓγϣϯΛ͚ͭΔͱϏϧυ؀ڥΛ੾Γସ͑ΒΕ Δ Ϗϧυ؀ڥΛ੾Γସ͑Δͱimport * from ‘path/to/environment’Ͱ ࢀর͢ΔFOWJSPONFOUIPHFUTϑΝΠϧΛมߋͰ͖Δ npx ng build —prodͱ͔ຖ౓ଧͭͷ໘౗ͳͷͰɺOQNTDSJQUʹ͢Δͱศར
  18. None
  19. $PEFGPSNBUUFSΛࣗಈͰ࣮ߦ

  20. DPEFGPSNBUUFSΛࣗಈͰ࣮ߦ͠Α͏ $PEFGPSNBUUFSͷQSFUUJFS IUUQTQSFUUJFSJP ΛɺHJUDPNNJUͨ͠ͱ ͖ʹࣗಈͰ࣮ߦ͞ΕΔΑ͏ʹ͢Δ खॱ  ZBSOBEEŠEFWQSFUUJFSIVTLZMJOUTUBHFE  QBDLBHFKTPOʹޙड़ͷTDSJQUΛهࡌ

  21. None
  22. ࠷৽൛Λ࢖͓͏

  23. ࠷৽൛ͷ"OHVMBSΛ࢖͓͏ "OHVMBS͸όʔδϣϯΞοϓʹΑΓ։ൃऀ͕خ͘͠ͳΔػೳ΍CVHpY͕ೖΔ ຖ݄ͷNJOPSSFMFBTFɺ൒೥ʹҰճͷNBKPSVQEBUF "OHVMBS$-*΍5ZQF4DSJQUͷΞοϓσʔτʹΑΓɺඇৗʹศརͳػೳ͕ೖΔ ͜ͱ΋ଟʑ͋ΔͷͰɺ৽ن࡞੒࣌͸໎Θͣ࠷৽൛ɺطଘͷϓϩδΣΫτ΋Մ ೳͳݶΓ࠷৽൛ʹ௥ै͍ͨ͠ 6QEBUFHVJEF͕͋ΔͷͰɺ͜ͷ௨Γʹ΍Δͱ SEQBSUZMJCSBSZ͕յΕΔ Ҏ֎͸ ΄΅ࠔΒͳ͍IUUQTVQEBUFBOHVMBSJP

  24. !OHSYTUPSFʹΑΔঢ়ଶ؅ཧ

  25. "OHVMBSͷঢ়ଶ TUBUF ؅ཧ "OHVMBS͸։ൃʹඞཁͳ΋ͷ͸Ұ௨Γೖ͍ͬͯΔϑϨʔϜϫʔΫ͕ͩɺΞϓ Ϧέʔγϣϯ΍DPNQPOFOUͷTUBUF؅ཧ͸࣋ͨͳ͍ 3YKTΛۦ࢖ͯࣗ͠෼Ͱؤுͬͯॻ͔͘ɺϥΠϒϥϦΛ࢖͏

  26. !OHSY3FBDUJWF&YUFOTJPOTGPS"OHVMBS "OHVMBSΞϓϦέʔγϣϯͷͨΊͷSFBDUJWFQSPHSBNNJOHϥΠϒϥϦ܊ 4UPSF3YKTΛ༻͍ͨTUBUF؅ཧϥΠϒϥϦ &⒎FDUT4UPSFͷ෭࡞༻Λѻ͏ϥΠϒϥϦ %#3YKTΛ༻͍ͨɺ*OEFYFE%#Λѻ͏ͨΊͷϥΠϒϥϦ /PUJGZ3YKTΛ༻͍ͨɺ8FCOPUJpDBUJPOΛѻ͏ͨΊͷϥΠϒϥϦ 4UPSF%FW5PPMT4UPSFͷͨΊͷ։ൃπʔϧ ͳͲ

  27. !OHSYTUPSF "OHVMBSͷTUBUF؅ཧϥΠϒϥϦͰ͓ͦΒ͘Ұ൪ਓؾ TUPSF͕TUBUFΛอ͍࣋ͯͯ͠BDUJPOΛEJTQBUDI͢Δ͜ͱʹΑͬͯSFEVDFS͕TUBUFΛߋ৽͢Δ ΄΅3FEVYͳͷͰ3FEVYॻ͍ͨ͜ͱ͋Ε͹ࠔΔ͜ͱ͸ͳ͍ ͸ͣ  TUBUFͷऔಘ͕0CTFSWBCMFͰฦ٫͞ΕΔͷ͚ͩ஫ҙ ࠷ڧͷυΩϡϝϯτ͸IUUQTHJUIVCDPNOHSYQMBUGPSNUSFFNBTUFSFYBNQMFBQQ !OHSYTUPSFEFWUPPMTΛ࢖͏ͱɺTUBUFͷมߋ͕͋ͬͨͱ͖ϒϥ΢βͷίϯιʔϧʹදࣔ ͯ͘͠ΕͨΓ͢ΔͷͰศར

  28. !BOHVMBSNBUFSJBMɺ!BOHVMBSDELͰ DPNQPOFOU։ൃΛָʹ͢Δ

  29. !BOHVMBSNBUFSJBM ͦͷ໊ͷ௨Γ"OHVMBSͷͨΊͷNBUFSJBMEFTJHODPNQPOFOUTMJCBSZ IUUQTNBUFSJBMBOHVMBSJP GPSNɺNPEBMɺUBCMFͳͲɺࣗ෼Ͱ࣮૷͢Δͱ࣮ͦͦ͜͜૷ίετͷ͔͔ΔDPNQPOFOU ͕ɺ!BOHVMBSNBUFSJBMΛ࢖͏͜ͱͰָʹͦΕͬΆ͘ݟ͑Δ΋ͷΛ࡞ΕΔ ϓϩτλΠϓͳͲͰ͸ઈର࢖͍͍ͨ "OHVMBSWʹ͓͍ͯ͸4DIFNBUJDTʹΑΓ/BWJHBUJPOCBS΍%BTICPBSEͱ͍ͬ ͨ$PNQPOFOUΛҰॠͰ࡞Δ͜ͱ΋Մೳʹ
 IUUQTNBUFSJBMBOHVMBSJPHVJEFTDIFNBUJDT

  30. !BOHVMBSDEL "OHVMBSͷͨΊͷDPNQPOFOUEFWFMPQNFOULJU "DDFTTJCJMJUZ΍0WFSMBZͳͲɺDPNQPOFOU։ൃʹ༗༻ͳNPEVMFΛଟ࣋ͬ͘ ͍ͯΔ IUUQTNBUFSJBMBOHVMBSJPDELDBUFHPSJFT

  31. 1SPNJTFͱ0CTFSWBCMFΛ࢖͍෼͚Α͏

  32. 1SPNJTFͱ0CTFSWBCMF 1SPNJTF&4ͰೖͬͨඇಉظॲཧΛؚΉ࣮ߦΛ؆ܿʹॻͨ͘Ίͷ΋ͷ &4ͰೖͬͨBTZODBXBJUʹΑΓඇৗʹ࢖͍΍͘͢ͳͬͨ 0CTFSWBCMF3FBDUJWF9ͷ֓೦ɻPCTFSWBCMF0CKFDUΛTVCTDSJCF͢Δ͜ ͱͰɺඇಉظॲཧͳͲʹΑΔσʔλͷߋ৽Λݕ஌͢Δɻ "OHVMBSʹ͸3YKT͕಺แ͞Ε͍ͯͯɺ"OHVMBSͷCVJMUJOTFSWJDFͷඇಉ ظॲཧͷ݁Ռ͸0CTFSWBCMFͰฦͬͯ͘Δ͜ͱ͕ଟ͍ !BOHVMBS DPNNPOIUUQͳͲ

  33. ͲͪΒΛ࢖͏΂͖͔ ޷Έͷ໰୊Ͱย෇ٞ͘࿦ ݸਓͷݟղ ͢΂ͯΛ1SPNJTF0CTFSWBCMFʹدͤΔͱଉۤ͘͠ͳΔ σʔλͷߋ৽͕Ұ౓͖Γ 9)3ͰϦΫΤετΛඈ͹ͯ͠ϨεϙϯεΛऔಘ͢ΔͳͲ ͳ৔߹΍ɺ3YKTͷ PQFSBUPSΛ࢖Θͳ͍৔߹͸1SPNJTFͰฦͨ͠΄͏͕BXBJUͰݺͼग़ͤΔͷͰ࢖͍উख ͕͍͍ ٯʹTUSFBNʹEBUBΛྲྀͯ͠ɺมߋΛݕ஌ͯ͠PQFSBUPSͰσʔλ੔ܗͯ͠"OHVMBSͷ

    DPNQPOFOUʹ౉͢ͱ͍ͬͨॲཧΛॻ͘ͳΒ0CTFSWBCMF͕ศར
  34. ։ൃதࠔͬͨΒ

  35. BOHVMBSJPΛݟΑ͏ʂ ެࣜυΩϡϝϯτͰ͋ΔIUUQTBOHVMBSJPEPDT͸ඇৗʹ৘ใྔ͕๛෋ ͰಡΈ΍͘͢ɺ"1*΍CVJMUJOͷEJSFDUJWF TFSWJDF QJQFͳͲ͸͜ΕΛࢀর ͢Ε͹ؒҧ͍ͳ͍ɻ ೖ໳͢Δͱ͖ͷνϡʔτϦΞϧ΋ॆ࣮IUUQTBOHVMBSJPUVUPSJBM ೔ຊޠ΋είγμέΞϧIUUQTBOHVMBSKQ ࣮૷ྫ·Ͱ͸·͔ͳ͑ͳ͍

  36. ࣮૷ྫ΍ɺ৽ػೳͷৄ͍͠৘ใΛݟ͍ͨ (PPHMFݕࡧ ະͩʹ"OHVMBSͷશ਎Ͱ͋Δ"OHVMBS+4ͷهࣄ΍TUBDLPWFSqPX͕େྔʹग़ͯ͘ΔͷͰɺظؒࢦఆͰߜΓࠐΈΛ ͔͚ͨΓɺBOHVMBSKT͢Δͷ͕CFUUFSɻ<ݕࡧϫʔυ BOHVMBS>͸Ξϯνύλʔϯ ͓͢͢Ίϒϩά ӳޠ  IUUQTCMPHBOHVMBSJP IUUQTCMPHBOHVMBSJOEFQUIDPN

    ͓͢͢Ίϒϩά ೔ຊޠ  IUUQTNFEJVNDPNBOHVMBSKBQBOVTFSHSPVQ IUUQTMBDPMBDPIBUFOBCMPHDPN