2018-07-31-angular-tips

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

࿩͢͜ͱ ։ൃ؀ڥΛߏங͠Α͏ "OHVMBS$-*Λ࢖͍౗ͦ͏ ؀ڥ͝ͱʹϏϧυεΫϦϓτΛ෼͚Α͏ $PEFGPSNBUUFSΛࣗಈͰ͔͚ΔΑ͏ʹ͠Α͏ ࠷৽൛Λ࢖͓͏ !OHSYTUPSFͰঢ়ଶΛ؅ཧ͠Α͏ !BOHVMBSNBUFSJBM !BOHVMBSDELͰָʑDPNQPOFOU։ൃ 1SPNJTFͱ0CTFSWBCMFΛ࢖͍෼͚Α͏ ࠔͬͨΒެࣜυΩϡϝϯτ ͞ΒʹࠔͬͨΒ(PPHMF

Slide 4

Slide 4 text

։ൃ؀ڥΛߏங͠Α͏

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

"OHVMBS$-*Λ׆༻͠Α͏

Slide 9

Slide 9 text

"OHVMBS$-*ͱ͸ "OHVMBS։ൃͷͨΊͷ$-*πʔϧ ng [subcommand] [arguments] ϓϩδΣΫτͷॳظ࡞੒΍ɺίϯϙʔωϯτͳͲͷ࡞੒ɺϏϧυ΍ϩʔΧϧ αʔόʔͷىಈͳͲΛ؆୯ʹͰ͖Δ WΑΓɺNBKPS NJOPSVQEBUF͸"OHVMBSͷόʔδϣϯ൪߸ͱἧ͑ͯϦ Ϧʔε͞ΕΔΑ͏ʹͳͬͨ "OHVMBS$-*Λ༻͍ͳͯ͘΋։ൃ͸Մೳ͕ͩɺݱ࣮తʹ࢖Θͳ͍ख͸ͳ͍

Slide 10

Slide 10 text

Πϯετʔϧ npm install -g @angular/cli yarn global add @angular/cli

Slide 11

Slide 11 text

ϓϩδΣΫτͷ৽ن࡞੒ ng new [application-name] componentͳͲͷprefix͕σϑΥϧτͰ͸ app ͱͳΔ͕ɺ--prefix [prefix] ΦϓγϣϯͰมߋ͕ՄೳͳͷͰɺ৽ن࡞੒࣌ʹprefixΛࢦఆ͓ͯ͘͠ ͱ͋ͱͰݕࡧɾஔ׵͠ͳ͍͍ͯ͘ͷͰָ --style ΦϓγϣϯͰstylesheetͷϑΝΠϧܗࣜΛࢦఆͰ͖Δɻ  e.g. ng new sample --style scss  ͜Ε΋͋ͱͰมߋ͠ͳ͍͍ͯ͘ͷͰ࠷ॳʹࢦఆ͓ͯ͘͠ͱָ

Slide 12

Slide 12 text

ng generate ΞϓϦέʔγϣϯ಺ʹDPNQPOFOU TFSWJDF QJQF EJSFDUJWFͳͲΛ࡞੒Ͱ ͖Δ e.g. ng generate component directory/component-name component΍serviceͳͲΛ࡞Δͱ͖͸جຊ͜ΕΛ࢖͏ WebStormͰ͸GUIͰݺͼग़͕͠Մೳ [demo]

Slide 13

Slide 13 text

ng update ϥΠϒϥϦΛΞοϓσʔτ͢ΔͨΊͷίϚϯυW ϥΠϒϥϦͷschematicsʹΑΓɺbreaking-changesͳͲ͕͋ͬͨͱ͖ʹ ࣗಈͰஔ׵ͯ͘͠ΕΔ e.g. ng update @angular/core  => rxjs΍TypeScriptɺAngular frameworkͷpackageΛ͢΂ͯupdate͢Δ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़͢ OHOFXͰϓϩδΣΫτΛ࡞ͬͨޙ͸ɺHMPCBMͰ͸ͳ͘ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़ͨ͠ ΄͏͕͍͍ HMPCBMͱϓϩδΣΫτϩʔΧϧͰBOHVMBSDMJͷόʔδϣϯ͕ҧͬͯյΕΔ͜ͱΛ๷͙ ܯࠂ͕ͰΔ:PVSHMPCBM"OHVMBS$-*WFSTJPO JTHSFBUFSUIBOZPVSMPDBMWFSTJPO 5IF MPDBM"OHVMBS$-*WFSTJPOJTVTFE ར༻ํ๏ ./node_modules/.bin/ng yarn run ng npx ng

Slide 16

Slide 16 text

؀ڥ͝ͱʹϏϧυεΫϦϓτΛ෼͚Α͏

Slide 17

Slide 17 text

"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ʹ͢Δͱศར

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

$PEFGPSNBUUFSΛࣗಈͰ࣮ߦ

Slide 20

Slide 20 text

DPEFGPSNBUUFSΛࣗಈͰ࣮ߦ͠Α͏ $PEFGPSNBUUFSͷQSFUUJFS IUUQTQSFUUJFSJP ΛɺHJUDPNNJUͨ͠ͱ ͖ʹࣗಈͰ࣮ߦ͞ΕΔΑ͏ʹ͢Δ खॱ ZBSOBEEEFWQSFUUJFSIVTLZMJOUTUBHFE QBDLBHFKTPOʹޙड़ͷTDSJQUΛهࡌ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

࠷৽൛Λ࢖͓͏

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

!OHSYTUPSFʹΑΔঢ়ଶ؅ཧ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

!BOHVMBSNBUFSJBMɺ!BOHVMBSDELͰ DPNQPOFOU։ൃΛָʹ͢Δ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

։ൃதࠔͬͨΒ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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