Angularを使って爆速で管理画面を作る

by yuji nishimura

Slide 1

Slide 1 text

"OHVMBSΛ࢖ͬͯര଎Ͱ ؅ཧը໘Λ࡞Δ $9ࣄۀຊ෦ ੢ଜ༞ೋ

Slide 2

Slide 2 text

#cmdevio

Slide 3

Slide 3 text

εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ Attention

Slide 4

Slide 4 text

ࣗݾ঺հ 2019 APN AWS Top Engineersೝఆ AWSೝఆ 2017/5 ΫϥεϝιουJoin ࠓͷۀ຿ɿDevelopers.IO Cafeͷ؅ཧը໘ɺAPI Angular5͋ͨΓ͔Β͸͡Ίͨ(2018೥ࠒ) ΞαΠϯ͞ΕͨҊ݅ͰSPAΛ࡞Δඞཁ͕͋Γɺ ϝϯόʔ͕AngularΛ΍͍ͬͯͨͷ͕͖͔͚ͬ ܦྺ ੢ଜ ༞ೋ(28) CXࣄۀຊ෦ॴଐ େࡕΦϑΟεࡏ੶

Slide 5

Slide 5 text

Developers.IO CAFEΛ஌͍ͬͯΔਓ✋

Slide 6

Slide 6 text

ͱ͸

Slide 7

Slide 7 text

%FWFMPQFST*0$"'& ׬શΩϟογϡϨεɺϨδϨεɺ ΢ΥʔΫεϧʔ͕ମݧͰ͖ΔCafe

Slide 8

Slide 8 text

ϨδϨε࣮ݱͷͨΊͷϞόΠϧΦʔμʔ

Slide 9

Slide 9 text

৽ͨͳମݧ΢ΥʔΫεϧʔ

Slide 10

Slide 10 text

ൃද಺༰ ঎඼؅ཧͳͲΧϑΣͷཪଆΛࢧ͑Δ ؅ཧը໘ΛAngularΛ࢖࣮ͬͯ૷͍ͯ͠·͢ ࣮ࡍͲ͏͔ͩͬͨօ͞Μʹڞ༗͠·͢

Slide 11

Slide 11 text

ຊൃදͷର৅ऀ ର৅ऀ w"OHVMBSͬͯΑ͘Θ͔Βͳ͍ਓ w"OHVMBSͬͯͲΜͳಛ௃͕͋Δ͔஌Γ͍ͨਓ w"OHVMBSΛ࢖͍͖͍ͬͯͨਓ w؅ཧը໘Λ"OHVMBSͰ࡞Γ͍ͨਓ

Slide 12

Slide 12 text

Angular࢖ͬͯ։ൃ͍ͯ͠Δਓ✋

Slide 13

Slide 13 text

ΞδΣϯμ wΧϑΣͷ؅ཧը໘ w"OHVMBSʹ͍ͭͯ wര଎Ͱ؅ཧը໘Λ։ൃ͢Δํ๏ w"OHVMBSͷ։ൃͷྲྀΕ w؅ཧը໘ͷ࣮૷Ͱศརͩͬͨͱ͜Ζ w·ͱΊ NJO NJO NJO ̑NJO NJO NJO

Slide 14

Slide 14 text

ΧϑΣͷ؅ཧը໘

Slide 15

Slide 15 text

wΧϑΣͷελοϑ͕ར༻͢Δ wαΠυφϏɺλϒͰը໘੾Γସ͑ wϔομʔͰళฮͷ੾Γସ͑ͳͲ ΧϑΣͷ؅ཧը໘ w݉຿͠ͳ͕Β໿ ϲ݄Ͱ࣮૷ wݱࡏϝϯόʔਓͰ։ൃத w.BUFSJBMσβΠϯΛ࠾༻ ஫จঢ়گ֬ೝը໘

Slide 16

Slide 16 text

ച্֬ೝը໘ ঎඼Ұཡը໘

Slide 17

Slide 17 text

Angularͷجຊ৘ใ

Slide 18

Slide 18 text

"OHVMBSͷجຊ৘ใ wϦϦʔεɿલ਎ͷ"OHVMBS+4͸೥ɺ"OHVMBS͸೥݄ w࠷৽൛ɿόʔδϣϯʢʣ࣌఺ w։ൃମ੍ɿ(PPHMFͱίϛϡχςΟ wݴޠɿ5ZQF4DSJQU w࠾༻ࣄྫɿྺ࢙͋ΔେاۀͰͷ࣮੷͕ଟΊɺ($1$POTPMF 'JSFCBTF https://www.madewithangular.com/categories/angular/ اۀ 63- .JDSPTPGU IUUQTXXXP⒏DFDPNBQQT BVUI 'PSCFT IUUQTXXXGPSCFTDPN #.8 IUUQTpOEBEFBMFSCNXDPNBV 7.8BSF IUUQTDMBSJUZEFTJHO https://whouse.angular.jp/

Slide 19

Slide 19 text

AngularJSͱAngular

Slide 20

Slide 20 text

"OHVMBS+4͔Β"OHVMBS΁ w"OHVMBS+4͸ύϑΥʔϚϯεͱػೳͷΘ͔Γқ͞ʹ͍ͭͯܽ఺͕͋ͬͨ w։ൃνʔϜ͕̍೥͔͚͔ͯ̍Βίʔυॻ͖௚͠"OHVMBS͕Ͱ͖ͨ wجຊతʹผͷϑϨʔϜϫʔΫͱࢥͬͨ΄͏͕͍͍ w"OHVMBS͸ʮ"OHVMBSWʯ΍ʮ"OHVMBSʯͱݺ͹ΕΔ͜ͱ͕͋Δ͕ wࠓ͸"OHVMBSͱݺͿ͜ͱ͕Ұൠత w"OHVMBSͰ͸8FCඪ४ͷ৽ٕज़ΛऔΓࠐΈɺ5ZQF4DSJQUΛ࠾༻

Slide 21

Slide 21 text

Angularͷಛ௃

Slide 22

Slide 22 text

"OHVMBSͷಛ௃ w5ZQF4DSJQUඪ४ɺ࠷৽ͷ8FCελϯμʔυͳٕज़ͱ਌࿨ੑ͕ߴ͍ wϑϧελοΫͳϑϨʔϜϫʔΫʢϑϩϯτΤϯυ෦෼ͷΈʣ wίϯϙʔωϯτࢦ޲Ͱγϯϓϧɺ؆୯ɺߴύϑΥʔϚϯε wϦϦʔεαΠΫϧ͕ݻఆ wόʔδϣϯΞοϓָ͕

Slide 23

Slide 23 text

8FCελϯμʔυͳٕज़ͱ਌࿨ੑ͕ߴ͍ w&$."4DSJQUͷߏจͰ࣮૷͞Ε͍ͯΔ w&4.PEVMFTʹରԠ w8FC"OJNBUJPOT"1* w8FC$PNQPOFOUT w&41SPQTBM w%FDPSBUPST w0CTFSWBCMFT w;POFT ಠࣗ࿏ઢͰ͸ͳ͘ɺ Webͷඪ४ٕज़΍৽ٕज़Λ࠾༻

Slide 24

Slide 24 text

ϑϧελοΫͳϑϨʔϜϫʔΫ

Slide 25

Slide 25 text

ϑϧελοΫ wఏڙϥΠϒϥϦ wجຊతͳ΋ͷҎ֎ʹ΋443ɺ18"ɺ8FC$PNQPOFOUTͳͲ΋ఏڙ w։ൃπʔϧ΍पล؀ڥʹؔ͢Δ΋ͷ΋͋Δ wϝϦοτ wϥΠϒϥϦબఆͷίετ͕ݮΔ wόʔδϣϯΞοϓʹΑΔෆ۩߹͕গͳ҆͘ఆ w͙͢ʹ։ൃʹͱΓ͔͔ΕΔ @angular/core @angular/common @angular/animations @angular/forms @angular/router @angular/elements @angular/material @angular/platform-server @angular/service-worker ...

Slide 26

Slide 26 text

ϥΠϒϥϦͷೖΕସ͑΋Մೳ

Slide 27

Slide 27 text

ྫɿςετϑϨʔϜϫʔΫΛ+FTUʹมߋ wσϑΥϧτͰΠϯετʔϧ͞ΕΔ,BSNB͔Β+FTUʹมߋ w$-*͔Β਺ίϚϯυͰมߋ׬ྃɺґଘؔ܎΋ߟྀ͞ΕΔ https://dev.classmethod.jp/client-side/angular-jest-setup/ ❯ npm install -g @briebug/jest-schematic ❯ ng g @briebug/jest-schematic:add ❯ ng add @briebug/jest-schematic

Slide 28

Slide 28 text

ίϯϙʔωϯτࢦ޲

Slide 29

Slide 29 text

ίϯϙʔωϯτ wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢ w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ w࣮ଶ͸Ϋϥε wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `

Name: {{ name }}

` }) export class TestComponent { @Input() name: string; }

Slide 30

Slide 30 text

Name: {{ name }}

` }) export class TestComponent { @Input() name: string; }

Slide 31

Slide 31 text

Name: {{ name }}

` }) export class TestComponent { @Input() name: string; }

Slide 32

Slide 32 text

Name: {{ name }}

` }) export class TestComponent { @Input() name: string; }

Slide 33

Slide 33 text

Name: {{ name }}

` }) export class TestComponent { @Input() name: string; } ੜ੒͞ΕΔDOM

Slide 34

Slide 34 text

ςϯϓϨʔτߏจɹͦͷ wσʔλόΠϯσΟϯάΛαϙʔτ wγϯϓϧͰ؆୯ɹ<>Λ͚ͭΔ͚ͩ wϓϩύςΟʹ୅ೖ͢Δ wଐੑʹ୅ೖ͢Δ wΫϥεΛ͚ͭ֎͢͠ΔɺӈลͷධՁ݁Ռ wελΠϧΛ෇༩͢Δ @Component({ selector: 'app-test', template: `

` }) export class TestComponent { name = 'devio'; role = 'main'; isLarge = true; mySize: 16; }

Slide 35

Slide 35 text

ςϯϓϨʔτߏจɹͦͷ wΠϕϯτϋϯυϦϯάɿΫϦοΫΠϕϯτͳͲ wγϯϓϧͰ؆୯ɹΠϕϯτ໊Λ ͰғΉ͚ͩ wFWFOUͰؔ਺ͰΠϕϯτ৘ใ͕ͱΕΔ @Component({ selector: 'app-test', template: `` }) export class TestComponent { onClick(e: MouseEvent) { console.log(e); } } औΕͨΠϕϯτ৘ใ

Slide 36

Slide 36 text

ϦϦʔεαΠΫϧ͕ݻఆ͞Ε͍ͯΔ

Slide 37

Slide 37 text

4FNBOUJD7FSTJPOJOHʢ4FN7FSʣ "OHVMBS9:; w9ϝδϟʔ wޓ׵ੑͷͳ͍ػೳมߋΛؚΉՄೳੑ͕͋ΔόʔδϣϯΞοϓ w:ϚΠφʔ wޙํޓ׵ੑ͕͋ΔػೳมߋΛؚΉόʔδϣϯΞοϓ w;ύον wόάमਖ਼

Slide 38

Slide 38 text

λΠϜϕʔεϦϦʔε w҆ఆੑͱ৴པੑΛҡ࣋͢ΔͨΊʹϦϦʔεαΠΫϧ͕ܾ·͍ͬͯΔ wϲ݄͝ͱʹϝδϟʔόʔδϣϯΞοϓ wϝδϟʔϦϦʔε͝ͱʙճͷϚΠφʔϦϦʔε w΄΅ຖिͷύονϦϦʔε wͦͷͨΊɺ wϑϧελοΫͳͷͰɺόʔδϣϯΞοϓʹର͢Δڪා৺͕௿͘ͳΔ

Slide 39

Slide 39 text

όʔδϣϯΞοϓָ͕

Slide 40

Slide 40 text

όʔδϣϯΞοϓ͸ָͪΜ wͲͷΑ͏ʹόʔδϣϯΞοϓͨ͠Β͍͍͔ڭ͑ͯ͘ΔαΠτ͕͋Δ w"OHVMBS6QEBUF(VJEFʢެࣜʣ wIUUQTVQEBUFBOHVMBSJP wόʔδϣϯΛબ୒͢Δ͚ͩͰ0, wOHVQEBUFίϚϯυͰɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ґଘؔ܎ؚΊͯόʔδϣϯΞοϓ wOHVQEBUF͸"OHVMBS$-*Ҏ߱

Slide 41

Slide 41 text

OHVQEBUF͕༏ल wϥΠϒϥϦಉ࢜ͷґଘؔ܎΋Έͯ͘ΕΔ wQBDLBHFKTPOΛղੳ͠ɺߋ৽ՄೳͳύοέʔδΛදࣔ We analyzed your package.json, there are some packages to update: Name Version Command to update -------------------------------------------------------------------------------- @angular/cdk 7.3.7 -> 8.0.0 ng update @angular/cdk @angular/cli 7.2.4 -> 8.0.1 ng update @angular/cli @angular/core 7.2.15 -> 8.0.0 ng update @angular/core @angular/material 7.3.7 -> 8.0.0 ng update @angular/material rxjs 6.3.3 -> 6.5.2 ng update rxjs There might be additional packages that are outdated. Run "ng update --all" to try to update all at the same time. ex) v7 => v8

Slide 42

Slide 42 text

ഁյతͳมߋ͕ՃΘͬͨߏจ΋मਖ਼ͯ͘͠ΕΔ w7Ͱഁյతมߋ͕͞Εͨߏจ wˏ7JFX$IJME!$POUFOU$IJME wୈೋҾ਺͕ඞਢʹͳͬͨ wOHVQEBUFͰόʔδϣϯΞοϓͤ͞Δͱ wίʔυղੳͯࣗ͠ಈతʹୈೋҾ਺ͷσϑΥϧτ஋͕ૠೖͯ͘͠ΕΔ @ViewChild(a, b) @ContentChild(a, b)

Slide 43

Slide 43 text

Angular͸TypeScriptͷ ԸܙΛϑϧ׆༻͍ͯ͠Δ

Slide 44

Slide 44 text

5ZQF4DSJQUͷԸܙ w੩తͳܕ wܕϕʔεͷ%*͕Մೳ wܕͷ͓͔͛Ͱίʔυ͕υΩϡϝϯτʹͳΓৗʹίʔυͱυΩϡϝϯτ͕Ұக͢ Δʢ"OHVMBSͷυΩϡϝϯτʣ w$PNQJMFSDIFDL wίϯύΠϥνΣοΫʹΑΔόάͷࠞೖΛ௿ݮͤ͞Δ w-BOHVBHF4FSWJDF -BOHVBHF4FSWFS1SPUPDPM wܕͷ͓͔͛Ͱɺม਺΍ΦϒδΣΫτ͕ͲΜͳϓϩύςΟΛ͔࣋ͭΘ͔ΔͨΊɺ ΤσΟλ΁ͷࢧԉ͕Ͱ͖Δɺೖྗิ׬΍δϟϯϓ

Slide 45

Slide 45 text

σίϨʔλʔˏ%FDPSBUPST w+BWB4DSJQUͷ৽͍͠ߏจʢUDQSPQPTBMTʣ w·ͩυϥϑτɿ4UBHF w5ZQF4DSJQUͰ͸͜ͷߏจΛઌऔΓͯ͠࢖༻Ͱ͖Δ w"OHVMBSͰ͸͜ͷσίϨʔλʔΛ࢖͍ͬͯΔ

Slide 46

Slide 46 text

"OHVMBS-BOHVBHF4FSWJDFT wUFNQMBUF )5.- ಺Ͱͷิ׬ΤϥʔνΣοΫఆٛδϟϯϓΛՄೳ ʹ͢ΔͨΊͷπʔϧ w5ZQF4DSJQUͷίϯύΠϥଆ͔ΒΤσΟλଆʹఏڙ wೖྗ࣌ʹίϯςΩετ্ͷՄೳੑ΍ώϯτΛఏڙͯ͘͠ΕΔ wίϯϙʔωϯτηϨΫλʔͱ͍ͯ࣋ͬͯ͠Δ͢΂ͯͷཁૉ͕දࣔ͞ΕΔ

Slide 47

Slide 47 text

ΤϥʔνΣοΫ wίʔυ಺ͷؒҧ͍Λ௨஌͢Δ͜ͱ͕Ͱ͖Δ wPSEFST͕OPUEFpOFEͰ͋Δ͜ͱΛΤσΟλʹ௨஌͍ͯ͠Δ

Slide 48

Slide 48 text

φϏήʔγϣϯ wφϏήʔγϣϯΛ࢖༻͢ΔͱɺίϯϙʔωϯτɺσΟϨΫςΟϒɺϞ δϡʔϧͳͲ͕Ͳ͜ʹ͋Δ͔Λ֬ೝ͠ɺ'ΩʔΛԡͯͦ͠ͷఆٛʹ௚ ઀ҠಈͰ͖·͢

Slide 49

Slide 49 text

͜͜·Ͱͷ·ͱΊ

Slide 50

Slide 50 text

͜͜·Ͱͷ·ͱΊ TypeScriptͰܕ҆શ ϑϧελοΫ ίϯϙʔωϯτࢦ޲Ͱ։ൃ͕؆୯ όʔδϣϯΞοϓ͕؆୯Ͱ҆ఆ

Slide 51

Slide 51 text

ര଎Ͱ؅ཧը໘Λ࡞ΔͨΊͷํ๏

Slide 52

Slide 52 text

ര଎Ͱ؅ཧը໘Λ࡞ΔͨΊʹ͸ ɾAngular CLIΛ࢖ͬͯ։ൃ͍ͯ͘͠ ɾAngular Materialͱ͍͏ UIϑϨʔϜϫʔΫΛ࢖͏ ɾTypeScript

Slide 53

Slide 53 text

ߏ੒ཁૉ w1MBUGPSN NBJOUT w"QQMJDBUJPOɺ.PEVMFΛ࣮ߦ͢Δ؀ڥ w.PEVMF wSPPUͷ.PEVMF͸BQQNPEVMFUT wίϯϙʔωϯτͳͲΛ·ͱΊͨ΋ͷ w࢖͍͍ͨػೳͷ.PEVMFΛJNQPSU Application Platform Module Module Module Module Components Directives Pipes Services

Slide 54

Slide 54 text

Angular CLIΛ࢖ͬͨ։ൃͷྲྀΕ

Slide 55

Slide 55 text

ΫΠοΫελʔτ w"OHVMBS$-*ΛΠϯετʔϧ wϓϩδΣΫτ࡞੒ wΞϓϦέʔγϣϯΛϩʔΧϧ࣮ߦ ❯ npm install -g @angular/cli ❯ ng new demo ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS ❯ cd demo ❯ ng serve 10% building 3/3 modules 0 activeℹ ňwdsŉ: Project is running ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ℹ ňwdmŉ: Compiled successfully.

Slide 56

Slide 56 text

ϒϥ΢β͔ΒΞΫηε͠ը໘Λ֬ೝ wIUUQMPDBMIPTU wϒϥ΢β͔ΒΞΫηε͢Δͱ࣮ߦͨ͠ΞϓϦέʔγϣϯ͕֬ೝͰ͖Δ wίʔυΛฤू͢ΔͱࣗಈͰը໘ߋ৽ wOHTFSWFDTUH wDɿಡΈࠐΉઃఆϑΝΠϧΛมߋ

Slide 57

Slide 57 text

ը໘ͷ෦඼Ͱ͋Δίϯϙʔωϯτͷ௥Ճ w$-*͔ΒίϯϙʔωϯτΛ࡞੒ wΦϓγϣϯͰΠϯϥΠϯʹ͢Δ͜ͱ΋Մ ❯ ng g component test --inlineStyle --inlineTemplate ❯ ng g component test

Slide 58

Slide 58 text

ΤσΟλͷϓϥάΠϯ΋ॆ࣮ w։ൃΛαϙʔτͯ͘͠ΕΔϓϥάΠϯ͕๛෋ wΤσΟλ͔Β$-*ͱಉ͜͡ͱ͕Ͱ͖ΔϓϥάΠϯ wೖྗิ׬Λͯ͘͠ΕΔϓϥάΠϯ

Slide 59

Slide 59 text

ςετ΍-JOUɺϏϧυ༻ͷίϚϯυ΋͋Δ wςετ΍MJOU΋ઃఆ͞Ε͓ͯΓɺ؀ڥߏங͸ෆཁ wϏϧυίϚϯυ΋͋Γɺ)5.- +4ΛʮEJTUʯʹग़ྗ wσϓϩΠίϚϯυ΋͋Γɺ؆୯ʹ'JSFCBTFͳͲʹσϓϩΠՄೳ w4΁ͷσϓϩΠ͸BXTDMJ͔Β͕؆୯ ❯ ng build ❯ ng build --prod ❯ ng deploy ❯ aws s3 sync dist s3:// --delete ❯ ng lint ❯ ng e2e ❯ ng test

Slide 60

Slide 60 text

Angular Materialͱ͍͏ UIϑϨʔϜϫʔΫΛ࢖͏

Slide 61

Slide 61 text

Angular MaterialͰ σβΠϯྗෆ଍Λิ͏

Slide 62

Slide 62 text

"OHVMBS.BUFSJBM w.BUFSJBMσβΠϯͷ6*ϑϨʔϜϫʔΫ wσβΠϯ͠ͳͯ͘΋ɺ͍͍͔Μ͡ͷ.BUFSJBMσβΠϯʹͳΔ wσβΠϯʹ࣌ؒΛ͔͚Εͳ͍ͱ͖ͷڧ͍ຯํ wެ͕ࣜఏڙ͍ͯ͠ΔͷͰɺಋೖ͕؆୯Ͱ҆ఆ

Slide 63

Slide 63 text

࢖͍ํ wΠϯετʔϧ w࢖͍͍ͨίϯϙʔωϯτͷϞδϡʔϧΛJNQPSU FYBQQNPEVMFUT wλάΛهࡌ FYBQQDPNQPOFOUIUNM ❯ ng add @angular/material import { MatSliderModule } from '@angular/material/slider'; … @NgModule ({.... imports: [..., MatSliderModule, …] })

Slide 64

Slide 64 text

Angular Materialͷ ςʔϒϧ͕ಛʹศར

Slide 65

Slide 65 text

ςʔϒϧ w؅ཧը໘Ͱ͸Ұཡදࣔ͢Δ৔໘͕ଟ͍ͷͰΑ͘࢖͏ wϖʔδωʔγϣϯɺιʔτɺϑΟϧλʔػೳ͕؆୯ʹ࣮૷Ͱ͖Δ ϖʔδωʔγϣϯ ιʔτ ϑΟϧλʔ

Slide 66

Slide 66 text

؅ཧը໘ͷ࣮૷Ͱศརͩͬͨͱ͜Ζ

Slide 67

Slide 67 text

Angular Flex-Layout ͰϨΠΞ΢τपΓΛ੔͑Δ

Slide 68

Slide 68 text

"OHVMBS'MFY-BZPVU w$44'MFYCPYΛσΟϨΫςΟϒͰࢦఆͰ͖ΔΑ͏ʹͨ͠ϥΠϒϥϦ wϨΠΞ΢τ΍ϨεϙϯγϒରԠΛDTTΛ͔͔ͣʹ؆୯ʹ࣮૷Ͱ͖Δ w$44ͷϑΝΠϧΛߦͬͨΓདྷͨΓ͠ͳͯ͘Α͍ wର৅ൣғ͕Θ͔Γ΍͍͢

#fxlayout:boxͷํ޲ΛܾΊΔ

#fxflex:্هͰܾΊͨboxͷ෯orߴ͞ΛܾΊΔ

https://github.com/angular/ﬂex-layout/wiki

Slide 69

Slide 69 text

CSS͕σϑΥϧτ ίϯϙʔωϯτείʔϓͳͷͰ ଞʹӨڹΛ༩͑ͳ͍

Slide 70

Slide 70 text

ίϯϙʔωϯτείʔϓ wෳ਺ਓͰ։ൃ͢Δͱ͖ࣗ෼ͷ࡞ۀ͕ଞʹӨڹΛ༩͑ͳ͍ w৺ཧతͳ҆৺ײ͕͋ͬͯ։ൃ͠΍͍͢ w$44ϑΝΠϧͷઃఆ͸ͦͷίϯϙʔωϯτͷΈదԠ͞ΕΔ

Slide 71

Slide 71 text

ϧʔςΟϯάͰೝূ੍ޚ

Slide 72

Slide 72 text

"OHVMBS3PVUFS wQBUI͝ͱʹ%0.Λ੾Γସ͑Δ w(VBSEػೳ wQBUI͝ͱʹೝূ͔͚ΒΕΔ w-B[Z-PBEJOH w஗ԆಡΈࠐΈͰߴ଎Խ http://slides.com/gerardsans/ngpoland-amazing-ng2-router#/4/3

Slide 73

Slide 73 text

ઃఆྫ wQBUIͱίϯϙʔωϯτΛඥ෇͚͍ͯΔ wDBO"DUJWBUF<"ENJO(VBSE>ͱ͢Δ͚ͩͰೝূػೳΛ͚ͭΕΔ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { TopComponent } from './component/top/top.component'; import { AdminGuard } from './auth/admin.guard'; const routes: Routes = [ {path: '',component: TopComponent}, {path: 'admin', loadChildren: () => import('./module/admin/admin.module').then(m => m.AdminModule), canActivate: [AdminGuard] } ]; export class AppRoutingModule {}

Slide 74

Slide 74 text

ϑΥʔϜपΓ͕ಛʹศར

Slide 75

Slide 75 text

ϑΥʔϜपΓͰศརͳͱ͜Ζ w؅ཧը໘Ͱ͸ొ࿥΍ฤूͳͲͰϑΥʔϜ͸Α͘࢖͏ͷͰΑΓศར࣮͞ײ wಈతʹϑΥʔϜͷ௥Ճɾ࡟আ͕Ͱ͖Δ wϑΥʔϜͷೖྗνΣοΫͳͲ؆୯ʹ੍ޚͰ͖Δ wϦΞϧλΠϜʹόϦσʔγϣϯνΣοΫͯ͠ΤϥʔΛදࣔ

Slide 76

Slide 76 text

ಈతʹϑΥʔϜͷ௥Ճɾ࡟আ͕Ͱ͖Δ w'PSN"SSBZʹQVTI͢Δ͜ͱͰ௥Ճ wSFNPWF"UͰϑΥʔϜ࡟আ addItem(eventForm: FormGroup, index: number) { this.itemsFormArray(eventForm, index).push(this.initItemForm()); } initItemForm(): FormGroup { return this.fb.group({ store_code: [''], item_id: [''], stock: [''] }); } deleteItem(index: number, itemIndex: number) { this.itemsFormArray(index).removeAt(itemIndex); } ௥Ճ࣌ͷϑΥʔϜ ϑΥʔϜΛ௥Ճ͢Δؔ਺ ϑΥʔϜΛ࡟আ͢Δؔ਺

Slide 77

Slide 77 text

ϑΥʔϜͷೖྗνΣοΫͳͲ؆୯ʹ੍ޚͰ͖Δ wϑΥʔϜશମͷόϦσʔγϣϯ͕ΫϦΞͯ͠Δ͔؆୯ʹऔಘͰ͖Δ wΫϦΞͯ͠ͳ͍ͱ͖EJTBCMFEͷଐੑΛ෇༩ͯ͠ϘλϯΛΫϦοΫɹɹɹ Ͱ͖ͳ͍Α͏ʹ͍ͯ͠Δ ɹొ࿥

Slide 78

Slide 78 text

ϦΞϧλΠϜʹόϦσʔγϣϯνΣοΫͯ͠ΤϥʔΛදࣔ initNewEventForm(eventsData: Events[]) { return this.fb.group({ event_code: [ '', [ Validators.required, Validators.pattern('^[A-Z0-9][A-Z0-9_]+$'), Validators.maxLength(24), Validators.minLength(2), this.duplicateEventCodeValidator('event_code') ] ], available: [false] }); {{ eventForm.get('event_code') .getError('maxlength').requiredLength }}จࣈҎԼͰೖྗ͍ͯͩ͘͠͞ɻ ςϯϓϨʔτ(html) ίϯϙʔωϯτ(ts)

Slide 79

Slide 79 text

Ͳ͏΍ͬͯΩϟονΞοϓ͢Δʁ

Slide 80

Slide 80 text

·ͣ͸νϡʔτϦΞϧΛ΍Δ ެࣜυΩϡϝϯτΛ֬ೝ͢Δ Θ͔Βͳ͍ͱ͜Ζ͸ίϛϡχςΟͰ͖͘

Slide 81

Slide 81 text

ίϛϡχςΟܥ

Slide 82

Slide 82 text

ࠔͬͨͱ͖͸ίϛϡχςΟͰ࣭໰ wTMBDL wOHKBQBOTMBDLDPN wIUUQTUDP('/,VI%5OZ BNQ w৘ใަ׵ɺτϥϒϧγϡʔςΟϯά wEJTDPVSTF wIUUQTUDP"7K254+O BNQ

Slide 83

Slide 83 text

:PV5VCFʹଟ͘ͷ৘ใ͕͋Δ w೔ຊͷίϛϡχςΟ͕ӡӦ͍ͯ͠Δνϟϯωϧ wΧϯϑΝϨϯεܥ wֶशܥ

Slide 84

Slide 84 text

Φεεϝ͸OHKBQBO0O"JS w:PV5VCF-JWF w͍͍݄ͩͨ̍ϖʔεͰ։࠵ w࠷৽৘ใ΍ϓϥΫςΟεΛΩϟονΞοϓͰ͖Δ wΞʔΧΠϒ΋͋ΔͷͰޙ͔Βݟ௚ͤΔ

Slide 85

Slide 85 text

·ͱΊ

Slide 86

Slide 86 text

·ͱΊ w"OHVMBS w5ZQF4DSJQUͰܕ҆શ wϑϧελοΫ wίϯϙʔωϯτࢦ޲Ͱ։ൃ͕؆୯ wόʔδϣϯΞοϓ͕؆୯Ͱ҆ఆ wര଎Ͱ؅ཧը໘Λͭ͘ΔͨΊʹ w"OHVMBS$-*Λ࢖͍͜ͳ͢ w"OHVMBS.BUFSJBMͰ޻਺͔͚ͣʹ͍͍͔Μ͡ͷσβΠϯʹ wςʔϒϧͷϖʔδωʔγϣϯɺιʔτɺϑΟϧλʔ͸؆୯ʹ࣮૷Ͱ͖Δ w؅ཧը໘ͷ։ൃͰΑ͔ͬͨͱ͜Ζ wϧʔςΟϯάͰೝূ੍ޚͳͲ؆୯ʹ࣮૷Ͱ͖Δ w'PSN·ΘΓ͕ͱͯ΋ศར

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

͓·͚

Slide 89

Slide 89 text

ࠓޙͷτϨϯυʢݸਓత༧૝ʣ

Slide 90

Slide 90 text

ࡢࠓͷྲྀߦΓ͸TypeScript

Slide 91

Slide 91 text

5ZQF4DSJQUͷਓؾ͕ͺͳ͍

Slide 92

Slide 92 text

શํҐ5ZQF4DSJQU Angular + NestJSͰ ΫϥΠΞϯτ΋αʔόʔαΠυ΋ TypeScriptͳΞʔΩςΫνϟ͕ ૿Ճ͢Δ͔΋

Slide 93

Slide 93 text

NestJS

Slide 94

Slide 94 text

/FTU+4 w5ZQF4DSJQUϕʔεͷαʔόʔαΠυ'8 w5ZQF4DSJQUͰ"1*։ൃ͕Ͱ͖Δ wσίϨʔλʔͰએݴతʹ"1*Λ࡞੒ w"OHVMBSϥΠΫͰ%*͕࢖͑Δ w(JUIVCͷελʔ਺΋ ௒͑ wܕΛڞ༗Ͱ͖ɺݴޠΛ5ZQF4DSJQUʹ౷ҰͰ͖Δ w"OHVMBS΍͓ͬͯ͘ͱߋʹ։ൃޮ཰͕͕͋ͬͯྑͦ͞͏Ͱ͢Ͷ