Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018-07-31-angular-tips
Search
Araya
July 31, 2018
1
120
2018-07-31-angular-tips
合同会社ヘマタイトの社内LT会で話した、Angularでアプリケーションを開発するときに個人的に意識しているTipsです
Araya
July 31, 2018
Tweet
Share
More Decks by Araya
See All by Araya
Performance and cache strategy at NIKKEI
arayaryoma
0
2.2k
JavaScript Promise API in 2019
arayaryoma
1
790
gotandajs-11-nodejs-recursive-readdir
arayaryoma
2
450
What about Temporal in JavaScript
arayaryoma
5
1.5k
var, let, const and immutable of JavaScript
arayaryoma
0
220
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Debugging Ruby Performance
tmm1
73
12k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How STYLIGHT went responsive
nonsquared
95
5.1k
Web Components: a chance to create the future
zenorocha
310
42k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Transcript
͍͔͖ͭͬͱʹཱͭ Angular։ൃTips @arayaryoma 2018-07-31 ヘマタイト社内LT
ର ͜Ε͔Β"OHVMBSͰΞϓϦέʔγϣϯ։ൃΛ࢝ΊΑ͏ͱ͍ͯ͠Δਓ "OHVMBSͰΞϓϦέʔγϣϯΛগ͠ॻ͍ͨ͜ͱ͕͋Δਓ ͢ͰʹΰϦΰϦॻ͍ͯΔਓʹͭ·Βͳ͍͔͠Εͳ͍Ͱ͢
͢͜ͱ ։ൃڥΛߏங͠Α͏ "OHVMBS$-*Λ͍ͦ͏ ڥ͝ͱʹϏϧυεΫϦϓτΛ͚Α͏ $PEFGPSNBUUFSΛࣗಈͰ͔͚ΔΑ͏ʹ͠Α͏ ࠷৽൛Λ͓͏ !OHSYTUPSFͰঢ়ଶΛཧ͠Α͏ !BOHVMBSNBUFSJBM !BOHVMBSDELͰָʑDPNQPOFOU։ൃ 1SPNJTFͱ0CTFSWBCMFΛ͍͚Α͏
ࠔͬͨΒެࣜυΩϡϝϯτ ͞ΒʹࠔͬͨΒ(PPHMF
։ൃڥΛߏங͠Α͏
ඞཁͳͷ /PEFKT /PEFKTQBDLBHFNBOBHFS ZBSO OQN QOQNͳͲ
/PEFKT IUUQTOPEFKTPSHFO͔ΒΠϯετʔϧͰ͖Δ ෳͷ/PEFKTͷόʔδϣϯΛΓସ͑Ͱ͖ΔπʔϧΛ͏ͷ͕͓͢͢Ί IUUQTHJUIVCDPNDSFBUJPOJYOWN IUUQTHJUIVCDPNOPEFOWOPEFOW IUUQTHJUIVCDPNUKO
1BDLBHFNBOBHFS OQN/PEFKTΛΠϯετʔϧ͢Δͱଐͯ͘͠Δ ࠷৽൛ศརػೳ͕૿͑ͯͨΓηΩϡϦςΟύον͕ೖ͍ͬͯͨΓ͢Δͷ ͰɺͱΓ͋͑ͣnpm install -g npmͰ࠷৽൛Λ͏Α͏ʹ͢Δͷ͕ ͓͢͢Ί ଞͷ༗໊ॴͩͱZBSO IUUQTZBSOQLHDPNFO
OQNMPDLpMFʹ͕͋ΔͷͰݸਓతʹ࠷ۙZBSOΛਪ͍ͯ͠Δ
"OHVMBS$-*Λ׆༻͠Α͏
"OHVMBS$-*ͱ "OHVMBS։ൃͷͨΊͷ$-*πʔϧ ng [subcommand] [arguments] ϓϩδΣΫτͷॳظ࡞ɺίϯϙʔωϯτͳͲͷ࡞ɺϏϧυϩʔΧϧ αʔόʔͷىಈͳͲΛ؆୯ʹͰ͖Δ WΑΓɺNBKPS NJOPSVQEBUF"OHVMBSͷόʔδϣϯ൪߸ͱἧ͑ͯϦ Ϧʔε͞ΕΔΑ͏ʹͳͬͨ
"OHVMBS$-*Λ༻͍ͳͯ͘։ൃՄೳ͕ͩɺݱ࣮తʹΘͳ͍खͳ͍
Πϯετʔϧ npm install -g @angular/cli yarn global add @angular/cli
ϓϩδΣΫτͷ৽ن࡞ ng new [application-name] componentͳͲͷprefix͕σϑΥϧτͰ app ͱͳΔ͕ɺ--prefix [prefix] ΦϓγϣϯͰมߋ͕ՄೳͳͷͰɺ৽ن࡞࣌ʹprefixΛࢦఆ͓ͯ͘͠ ͱ͋ͱͰݕࡧɾஔ͠ͳ͍͍ͯ͘ͷͰָ
--style ΦϓγϣϯͰstylesheetͷϑΝΠϧܗࣜΛࢦఆͰ͖Δɻ e.g. ng new sample --style scss ͜Ε͋ͱͰมߋ͠ͳ͍͍ͯ͘ͷͰ࠷ॳʹࢦఆ͓ͯ͘͠ͱָ
ng generate ΞϓϦέʔγϣϯʹDPNQPOFOU TFSWJDF QJQF EJSFDUJWFͳͲΛ࡞Ͱ ͖Δ e.g. ng generate
component directory/component-name componentserviceͳͲΛ࡞Δͱ͖جຊ͜ΕΛ͏ WebStormͰGUIͰݺͼग़͕͠Մೳ [demo]
ng update ϥΠϒϥϦΛΞοϓσʔτ͢ΔͨΊͷίϚϯυW ϥΠϒϥϦͷschematicsʹΑΓɺbreaking-changesͳͲ͕͋ͬͨͱ͖ʹ ࣗಈͰஔͯ͘͠ΕΔ e.g. ng update @angular/core =>
rxjsTypeScriptɺAngular frameworkͷpackageΛͯ͢update͢Δ
ng add ϓϩδΣΫτʹϥΠϒϥϦΛՃ͢ΔͨΊͷίϚϯυW IUUQTCMPHBOHVMBSJPWFSTJPOPGBOHVMBSOPXBWBJMBCMFDDCFGBB υΩϡϝϯτΛݟͯଟԿΘ͔Βͳ͍IUUQTHJUIVCDPNBOHVMBSBOHVMBSDMJXJLJBEE QBDLBHFΛΠϯετʔϧ͢Δ͚ͩͰͳ͘ɺNPEVMFͷJNQPSU TUZMFTIFFUͷಡΈࠐΈQPMZpMMΛ উखʹՃͰ͖ΔΑ͏ʹͳΔ ϥΠϒϥϦͷTDIFNBUJDTͷTDSJQUʹΑΔͷ
υΩϡϝϯτϥΠϒϥϦͷTDIFNBUJDTΛݟΔͱ͍͍ FHIUUQTHJUIVCDPNBOHVMBSNBUFSJBMCMPCNBTUFSTSDMJCTDIFNBUJDT DPMMFDUJPOKTPO
ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़͢ OHOFXͰϓϩδΣΫτΛ࡞ͬͨޙɺHMPCBMͰͳ͘ϓϩδΣΫτϩʔΧϧͷBOHVMBSDMJΛݺͼग़ͨ͠ ΄͏͕͍͍ HMPCBMͱϓϩδΣΫτϩʔΧϧͰBOHVMBSDMJͷόʔδϣϯ͕ҧͬͯյΕΔ͜ͱΛ͙ ܯࠂ͕ͰΔ:PVSHMPCBM"OHVMBS$-*WFSTJPO JTHSFBUFSUIBOZPVSMPDBMWFSTJPO 5IF MPDBM"OHVMBS$-*WFSTJPOJTVTFE
ར༻ํ๏ ./node_modules/.bin/ng yarn run ng npx ng
ڥ͝ͱʹϏϧυεΫϦϓτΛ͚Α͏
"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ʹ͢Δͱศར
None
$PEFGPSNBUUFSΛࣗಈͰ࣮ߦ
DPEFGPSNBUUFSΛࣗಈͰ࣮ߦ͠Α͏ $PEFGPSNBUUFSͷQSFUUJFS IUUQTQSFUUJFSJP ΛɺHJUDPNNJUͨ͠ͱ ͖ʹࣗಈͰ࣮ߦ͞ΕΔΑ͏ʹ͢Δ खॱ ZBSOBEEEFWQSFUUJFSIVTLZMJOUTUBHFE QBDLBHFKTPOʹޙड़ͷTDSJQUΛهࡌ
None
࠷৽൛Λ͓͏
࠷৽൛ͷ"OHVMBSΛ͓͏ "OHVMBSόʔδϣϯΞοϓʹΑΓ։ൃऀ͕خ͘͠ͳΔػೳCVHpY͕ೖΔ ຖ݄ͷNJOPSSFMFBTFɺʹҰճͷNBKPSVQEBUF "OHVMBS$-*5ZQF4DSJQUͷΞοϓσʔτʹΑΓɺඇৗʹศརͳػೳ͕ೖΔ ͜ͱଟʑ͋ΔͷͰɺ৽ن࡞࣌໎Θͣ࠷৽൛ɺطଘͷϓϩδΣΫτՄ ೳͳݶΓ࠷৽൛ʹै͍ͨ͠ 6QEBUFHVJEF͕͋ΔͷͰɺ͜ͷ௨ΓʹΔͱ SEQBSUZMJCSBSZ͕յΕΔ Ҏ֎ ΄΅ࠔΒͳ͍IUUQTVQEBUFBOHVMBSJP
!OHSYTUPSFʹΑΔঢ়ଶཧ
"OHVMBSͷঢ়ଶ TUBUF ཧ "OHVMBS։ൃʹඞཁͳͷҰ௨Γೖ͍ͬͯΔϑϨʔϜϫʔΫ͕ͩɺΞϓ ϦέʔγϣϯDPNQPOFOUͷTUBUFཧ࣋ͨͳ͍ 3YKTΛۦͯࣗ͠Ͱؤுͬͯॻ͔͘ɺϥΠϒϥϦΛ͏
!OHSY3FBDUJWF&YUFOTJPOTGPS"OHVMBS "OHVMBSΞϓϦέʔγϣϯͷͨΊͷSFBDUJWFQSPHSBNNJOHϥΠϒϥϦ܊ 4UPSF3YKTΛ༻͍ͨTUBUFཧϥΠϒϥϦ &⒎FDUT4UPSFͷ෭࡞༻Λѻ͏ϥΠϒϥϦ %#3YKTΛ༻͍ͨɺ*OEFYFE%#Λѻ͏ͨΊͷϥΠϒϥϦ /PUJGZ3YKTΛ༻͍ͨɺ8FCOPUJpDBUJPOΛѻ͏ͨΊͷϥΠϒϥϦ 4UPSF%FW5PPMT4UPSFͷͨΊͷ։ൃπʔϧ ͳͲ
!OHSYTUPSF "OHVMBSͷTUBUFཧϥΠϒϥϦͰ͓ͦΒ͘Ұ൪ਓؾ TUPSF͕TUBUFΛอ͍࣋ͯͯ͠BDUJPOΛEJTQBUDI͢Δ͜ͱʹΑͬͯSFEVDFS͕TUBUFΛߋ৽͢Δ ΄΅3FEVYͳͷͰ3FEVYॻ͍ͨ͜ͱ͋ΕࠔΔ͜ͱͳ͍ ͣ TUBUFͷऔಘ͕0CTFSWBCMFͰฦ٫͞ΕΔͷ͚ͩҙ ࠷ڧͷυΩϡϝϯτIUUQTHJUIVCDPNOHSYQMBUGPSNUSFFNBTUFSFYBNQMFBQQ !OHSYTUPSFEFWUPPMTΛ͏ͱɺTUBUFͷมߋ͕͋ͬͨͱ͖ϒϥβͷίϯιʔϧʹදࣔ ͯ͘͠ΕͨΓ͢ΔͷͰศར
!BOHVMBSNBUFSJBMɺ!BOHVMBSDELͰ DPNQPOFOU։ൃΛָʹ͢Δ
!BOHVMBSNBUFSJBM ͦͷ໊ͷ௨Γ"OHVMBSͷͨΊͷNBUFSJBMEFTJHODPNQPOFOUTMJCBSZ IUUQTNBUFSJBMBOHVMBSJP GPSNɺNPEBMɺUBCMFͳͲɺࣗͰ࣮͢Δͱ࣮ͦͦ͜͜ίετͷ͔͔ΔDPNQPOFOU ͕ɺ!BOHVMBSNBUFSJBMΛ͏͜ͱͰָʹͦΕͬΆ͘ݟ͑ΔͷΛ࡞ΕΔ ϓϩτλΠϓͳͲͰઈର͍͍ͨ "OHVMBSWʹ͓͍ͯ4DIFNBUJDTʹΑΓ/BWJHBUJPOCBS%BTICPBSEͱ͍ͬ ͨ$PNQPOFOUΛҰॠͰ࡞Δ͜ͱՄೳʹ IUUQTNBUFSJBMBOHVMBSJPHVJEFTDIFNBUJDT
!BOHVMBSDEL "OHVMBSͷͨΊͷDPNQPOFOUEFWFMPQNFOULJU "DDFTTJCJMJUZ0WFSMBZͳͲɺDPNQPOFOU։ൃʹ༗༻ͳNPEVMFΛଟ࣋ͬ͘ ͍ͯΔ IUUQTNBUFSJBMBOHVMBSJPDELDBUFHPSJFT
1SPNJTFͱ0CTFSWBCMFΛ͍͚Α͏
1SPNJTFͱ0CTFSWBCMF 1SPNJTF&4ͰೖͬͨඇಉظॲཧΛؚΉ࣮ߦΛ؆ܿʹॻͨ͘Ίͷͷ &4ͰೖͬͨBTZODBXBJUʹΑΓඇৗʹ͍͘͢ͳͬͨ 0CTFSWBCMF3FBDUJWF9ͷ֓೦ɻPCTFSWBCMF0CKFDUΛTVCTDSJCF͢Δ͜ ͱͰɺඇಉظॲཧͳͲʹΑΔσʔλͷߋ৽Λݕ͢Δɻ "OHVMBSʹ3YKT͕แ͞Ε͍ͯͯɺ"OHVMBSͷCVJMUJOTFSWJDFͷඇಉ ظॲཧͷ݁Ռ0CTFSWBCMFͰฦͬͯ͘Δ͜ͱ͕ଟ͍ !BOHVMBS DPNNPOIUUQͳͲ
ͲͪΒΛ͏͖͔ ΈͷͰยٞ͘ ݸਓͷݟղ ͯ͢Λ1SPNJTF0CTFSWBCMFʹدͤΔͱଉۤ͘͠ͳΔ σʔλͷߋ৽͕Ұ͖Γ 9)3ͰϦΫΤετΛඈͯ͠ϨεϙϯεΛऔಘ͢ΔͳͲ ͳ߹ɺ3YKTͷ PQFSBUPSΛΘͳ͍߹1SPNJTFͰฦͨ͠΄͏͕BXBJUͰݺͼग़ͤΔͷͰ͍উख ͕͍͍ ٯʹTUSFBNʹEBUBΛྲྀͯ͠ɺมߋΛݕͯ͠PQFSBUPSͰσʔλܗͯ͠"OHVMBSͷ
DPNQPOFOUʹ͢ͱ͍ͬͨॲཧΛॻ͘ͳΒ0CTFSWBCMF͕ศར
։ൃதࠔͬͨΒ
BOHVMBSJPΛݟΑ͏ʂ ެࣜυΩϡϝϯτͰ͋ΔIUUQTBOHVMBSJPEPDTඇৗʹใྔ͕๛ ͰಡΈ͘͢ɺ"1*CVJMUJOͷEJSFDUJWF TFSWJDF QJQFͳͲ͜ΕΛࢀর ͢Εؒҧ͍ͳ͍ɻ ೖ͢Δͱ͖ͷνϡʔτϦΞϧॆ࣮IUUQTBOHVMBSJPUVUPSJBM ຊޠείγμέΞϧIUUQTBOHVMBSKQ ࣮ྫ·Ͱ·͔ͳ͑ͳ͍
࣮ྫɺ৽ػೳͷৄ͍͠ใΛݟ͍ͨ (PPHMFݕࡧ ະͩʹ"OHVMBSͷશͰ͋Δ"OHVMBS+4ͷهࣄTUBDLPWFSqPX͕େྔʹग़ͯ͘ΔͷͰɺظؒࢦఆͰߜΓࠐΈΛ ͔͚ͨΓɺBOHVMBSKT͢Δͷ͕CFUUFSɻ<ݕࡧϫʔυ BOHVMBS>Ξϯνύλʔϯ ͓͢͢Ίϒϩά ӳޠ IUUQTCMPHBOHVMBSJP IUUQTCMPHBOHVMBSJOEFQUIDPN
͓͢͢Ίϒϩά ຊޠ IUUQTNFEJVNDPNBOHVMBSKBQBOVTFSHSPVQ IUUQTMBDPMBDPIBUFOBCMPHDPN