2018-07-31-angular-tips

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

Transcript

1. ͍͔͖ͭͬͱ໾ʹཱͭ Angular։ൃTips @arayaryoma 2018-07-31 ヘマタイト社内LT
2. ର৅ ͜Ε͔Β"OHVMBSͰΞϓϦέʔγϣϯ։ൃΛ࢝ΊΑ͏ͱ͍ͯ͠Δਓ
   "OHVMBSͰΞϓϦέʔγϣϯΛগ͠ॻ͍ͨ͜ͱ͕͋Δਓ ͢ͰʹΰϦΰϦॻ͍ͯΔਓʹ͸ͭ·Βͳ͍͔΋͠Εͳ͍Ͱ͢
3. ࿩͢͜ͱ ։ൃ؀ڥΛߏங͠Α͏
   "OHVMBS
   $-*Λ࢖͍౗ͦ͏
   ؀ڥ͝ͱʹϏϧυεΫϦϓτΛ෼͚Α͏
   $PEF
   GPSNBUUFSΛࣗಈͰ͔͚ΔΑ͏ʹ͠Α͏
   ࠷৽൛Λ࢖͓͏
   !OHSYTUPSFͰঢ়ଶΛ؅ཧ͠Α͏
   !BOHVMBSNBUFSJBM
   !BOHVMBSDEL
   ͰָʑDPNQPOFOU։ൃ
   1SPNJTFͱ0CTFSWBCMFΛ࢖͍෼͚Α͏
   ࠔͬͨΒެࣜυΩϡϝϯτ
   ͞ΒʹࠔͬͨΒ(PPHMF
4. ։ൃ؀ڥΛߏங͠Α͏
5. ඞཁͳ΋ͷ /PEFKT
   /PEFKT
   QBDLBHF
   NBOBHFS ZBSO
   OQN
   QOQNͳͲ
6. /PEFKT IUUQTOPEFKTPSHFO
   ͔ΒΠϯετʔϧͰ͖Δ
   ෳ਺ͷ/PEFKTͷόʔδϣϯΛ੾Γସ͑Ͱ͖ΔπʔϧΛ࢖͏ͷ͕͓͢͢Ί
   IUUQTHJUIVCDPNDSFBUJPOJYOWN
   IUUQTHJUIVCDPNOPEFOWOPEFOW
   IUUQTHJUIVCDPNUKO
7. 1BDLBHF
   NBOBHFS OQN͸/PEFKTΛΠϯετʔϧ͢Δͱ෇ଐͯ͘͠Δ
   ࠷৽൛͸ศརػೳ͕૿͑ͯͨΓηΩϡϦςΟύον͕ೖ͍ͬͯͨΓ͢Δͷ ͰɺͱΓ͋͑ͣ
   npm install -g npm
   Ͱ࠷৽൛Λ࢖͏Α͏ʹ͢Δͷ͕ ͓͢͢Ί
   ଞͷ༗໊ॴͩͱZBSO
   
   IUUQTZBSOQLHDPNFO
   
   OQN͸MPDL
   pMFʹ೉͕͋ΔͷͰݸਓతʹ͸࠷ۙZBSOΛਪ͍ͯ͠Δ
8. "OHVMBS
   $-*Λ׆༻͠Α͏
9. "OHVMBS
   $-*ͱ͸ "OHVMBS։ൃͷͨΊͷ$-*πʔϧ
   ng [subcommand] [arguments] ϓϩδΣΫτͷॳظ࡞੒΍ɺίϯϙʔωϯτͳͲͷ࡞੒ɺϏϧυ΍ϩʔΧϧ αʔόʔͷىಈͳͲΛ؆୯ʹͰ͖Δ
   WΑΓɺNBKPS
   NJOPS
   VQEBUF͸"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ΛݟΔͱ͍͍
 FH
    IUUQTHJUIVCDPNBOHVMBSNBUFSJBMCMPCNBTUFSTSDMJCTDIFNBUJDT DPMMFDUJPOKTPO
15. ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़͢ OH
    OFX
    ͰϓϩδΣΫτΛ࡞ͬͨޙ͸ɺHMPCBMͰ͸ͳ͘ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़ͨ͠ ΄͏͕͍͍
    HMPCBMͱϓϩδΣΫτϩʔΧϧͰBOHVMBSDMJͷόʔδϣϯ͕ҧͬͯյΕΔ͜ͱΛ๷͙
    ܯࠂ͕ͰΔ
    :PVS
    HMPCBM
    "OHVMBS
    $-*
    WFSTJPO
    
    JT
    HSFBUFS
    UIBO
    ZPVS
    MPDBM
    WFSTJPO
     
    5IF
    MPDBM
    "OHVMBS
    $-*
    WFSTJPO
    JT
    VTFE
    ར༻ํ๏
    ./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ͱ͔ຖ౓ଧͭͷ໘౗ͳͷͰɺOQN
    TDSJQUʹ͢Δͱศར
19. $PEF
    GPSNBUUFSΛࣗಈͰ࣮ߦ
20. DPEF
    GPSNBUUFSΛࣗಈͰ࣮ߦ͠Α͏ $PEF
    GPSNBUUFSͷQSFUUJFS
    IUUQTQSFUUJFSJP
    ΛɺHJU
    DPNNJU
    ͨ͠ͱ ͖ʹࣗಈͰ࣮ߦ͞ΕΔΑ͏ʹ͢Δ
    खॱ
     ZBSO
    BEE
    ŠEFW
    QSFUUJFS
    IVTLZ
    MJOUTUBHFE
    
     QBDLBHFKTPOʹޙड़ͷTDSJQUΛهࡌ
22. ࠷৽൛Λ࢖͓͏
23. ࠷৽൛ͷ"OHVMBSΛ࢖͓͏ "OHVMBS͸όʔδϣϯΞοϓʹΑΓ։ൃऀ͕خ͘͠ͳΔػೳ΍CVH
    pY͕ೖΔ
    ຖ݄ͷNJOPS
    SFMFBTFɺ൒೥ʹҰճͷNBKPS
    VQEBUF
    "OHVMBS
    $-*΍5ZQF4DSJQUͷΞοϓσʔτʹΑΓɺඇৗʹศརͳػೳ͕ೖΔ ͜ͱ΋ଟʑ͋ΔͷͰɺ৽ن࡞੒࣌͸໎Θͣ࠷৽൛ɺطଘͷϓϩδΣΫτ΋Մ ೳͳݶΓ࠷৽൛ʹ௥ै͍ͨ͠
    6QEBUF
    HVJEF
    ͕͋ΔͷͰɺ͜ͷ௨Γʹ΍Δͱ SE
    QBSUZ
    MJCSBSZ͕յΕΔ Ҏ֎͸ ΄΅ࠔΒͳ͍
    IUUQTVQEBUFBOHVMBSJP
24. !OHSYTUPSFʹΑΔঢ়ଶ؅ཧ
25. "OHVMBSͷঢ়ଶ TUBUF ؅ཧ "OHVMBS͸։ൃʹඞཁͳ΋ͷ͸Ұ௨Γೖ͍ͬͯΔϑϨʔϜϫʔΫ͕ͩɺΞϓ Ϧέʔγϣϯ΍DPNQPOFOUͷTUBUF؅ཧ͸࣋ͨͳ͍
    3YKTΛۦ࢖ͯࣗ͠෼Ͱؤுͬͯॻ͔͘ɺϥΠϒϥϦΛ࢖͏
26. !OHSY
    
    3FBDUJWF
    &YUFOTJPOT
    GPS
    "OHVMBS "OHVMBSΞϓϦέʔγϣϯͷͨΊͷSFBDUJWF
    QSPHSBNNJOHϥΠϒϥϦ܊
    4UPSF
    3YKTΛ༻͍ͨTUBUF؅ཧϥΠϒϥϦ
    &⒎FDUT
    4UPSFͷ෭࡞༻Λѻ͏ϥΠϒϥϦ
    %#
    3YKTΛ༻͍ͨɺ*OEFYFE%#Λѻ͏ͨΊͷϥΠϒϥϦ
    /PUJGZ
    3YKTΛ༻͍ͨɺ8FC
    OPUJpDBUJPOΛѻ͏ͨΊͷϥΠϒϥϦ
    4UPSF
    %FW
    5PPMT
    4UPSFͷͨΊͷ։ൃπʔϧ
    ͳͲ
27. !OHSYTUPSF "OHVMBSͷTUBUF؅ཧϥΠϒϥϦͰ͓ͦΒ͘Ұ൪ਓؾ
    TUPSF͕TUBUFΛอ͍࣋ͯͯ͠BDUJPOΛEJTQBUDI͢Δ͜ͱʹΑͬͯSFEVDFS͕TUBUFΛߋ৽͢Δ
    ΄΅3FEVYͳͷͰ3FEVYॻ͍ͨ͜ͱ͋Ε͹ࠔΔ͜ͱ͸ͳ͍ ͸ͣ
    TUBUFͷऔಘ͕0CTFSWBCMFͰฦ٫͞ΕΔͷ͚ͩ஫ҙ
    ࠷ڧͷυΩϡϝϯτ͸
    IUUQTHJUIVCDPNOHSYQMBUGPSNUSFFNBTUFSFYBNQMFBQQ
    !OHSYTUPSFEFWUPPMTΛ࢖͏ͱɺTUBUFͷมߋ͕͋ͬͨͱ͖ϒϥ΢βͷίϯιʔϧʹදࣔ ͯ͘͠ΕͨΓ͢ΔͷͰศར
28. !BOHVMBSNBUFSJBMɺ!BOHVMBSDELͰ
    DPNQPOFOU։ൃΛָʹ͢Δ
29. !BOHVMBSNBUFSJBM ͦͷ໊ͷ௨Γ"OHVMBSͷͨΊͷNBUFSJBM
    EFTJHO
    DPNQPOFOUT
    MJCBSZ
    IUUQTNBUFSJBMBOHVMBSJP
    GPSNɺNPEBMɺUBCMFͳͲɺࣗ෼Ͱ࣮૷͢Δͱ࣮ͦͦ͜͜૷ίετͷ͔͔ΔDPNQPOFOU ͕ɺ!BOHVMBSNBUFSJBMΛ࢖͏͜ͱͰָʹͦΕͬΆ͘ݟ͑Δ΋ͷΛ࡞ΕΔ
    ϓϩτλΠϓͳͲͰ͸ઈର࢖͍͍ͨ
    "OHVMBS
    
    Wʹ͓͍ͯ͸4DIFNBUJDTʹΑΓ/BWJHBUJPO
    CBS΍%BTICPBSEͱ͍ͬ ͨ$PNQPOFOUΛҰॠͰ࡞Δ͜ͱ΋Մೳʹ
 IUUQTNBUFSJBMBOHVMBSJPHVJEFTDIFNBUJDT
30. !BOHVMBSDEL "OHVMBSͷͨΊͷDPNQPOFOU
    EFWFMPQNFOU
    LJU
    "DDFTTJCJMJUZ΍0WFSMBZͳͲɺDPNQPOFOU։ൃʹ༗༻ͳNPEVMFΛଟ࣋ͬ͘ ͍ͯΔ
    IUUQTNBUFSJBMBOHVMBSJPDELDBUFHPSJFT
31. 1SPNJTFͱ0CTFSWBCMFΛ࢖͍෼͚Α͏
32. 1SPNJTFͱ0CTFSWBCMF 1SPNJTF
    &4ͰೖͬͨඇಉظॲཧΛؚΉ࣮ߦΛ؆ܿʹॻͨ͘Ίͷ΋ͷ
    &4ͰೖͬͨBTZODBXBJUʹΑΓඇৗʹ࢖͍΍͘͢ͳͬͨ
    0CTFSWBCMF
    3FBDUJWF9ͷ֓೦ɻPCTFSWBCMF
    0CKFDUΛTVCTDSJCF͢Δ͜ ͱͰɺඇಉظॲཧͳͲʹΑΔσʔλͷߋ৽Λݕ஌͢Δɻ
    "OHVMBSʹ͸3YKT͕಺แ͞Ε͍ͯͯɺ"OHVMBSͷCVJMUJO
    TFSWJDFͷඇಉ ظॲཧͷ݁Ռ͸0CTFSWBCMFͰฦͬͯ͘Δ͜ͱ͕ଟ͍ !BOHVMBS DPNNPOIUUQͳͲ
33. ͲͪΒΛ࢖͏΂͖͔ ޷Έͷ໰୊Ͱย෇ٞ͘࿦
    ݸਓͷݟղ
    ͢΂ͯΛ1SPNJTF
    
    0CTFSWBCMFʹدͤΔͱଉۤ͘͠ͳΔ
    σʔλͷߋ৽͕Ұ౓͖Γ 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