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

2018-07-31-angular-tips

012765e2e29cd000be9e0f32236c46d2?s=47 Araya
July 31, 2018
1
89

 2018-07-31-angular-tips

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

012765e2e29cd000be9e0f32236c46d2?s=128

Araya

July 31, 2018
Tweet

More Decks by Araya

See All by Araya
Performance and cache strategy at NIKKEI
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
0
1.1k
JavaScript Promise API in 2019
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
1
620
gotandajs-11-nodejs-recursive-readdir
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
2
260
What about Temporal in JavaScript
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
5
1k
var, let, const and immutable of JavaScript
012765e2e29cd000be9e0f32236c46d2?s=48 arayaryoma
0
160

Featured

See All Featured
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.5k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
5
2.3k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
11k

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