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

Developers.IO 2019 in 大阪で登壇した資料です

Transcript

1. "OHVMBSΛ࢖ͬͯര଎Ͱ
   ؅ཧը໘Λ࡞Δ $9ࣄۀຊ෦
   ੢ଜ
   ༞ೋ
2. #cmdevio
3. εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ Attention
4. ࣗݾ঺հ  2019 APN AWS Top Engineersೝఆ AWSೝఆ 2017/5 ΫϥεϝιουJoin ࠓͷۀ຿ɿDevelopers.IO Cafeͷ؅ཧը໘ɺAPI Angular5͋ͨΓ͔Β͸͡Ίͨ(2018೥ࠒ) ΞαΠϯ͞ΕͨҊ݅ͰSPAΛ࡞Δඞཁ͕͋Γɺ ϝϯόʔ͕AngularΛ΍͍ͬͯͨͷ͕͖͔͚ͬ ܦྺ ੢ଜ ༞ೋ(28) CXࣄۀຊ෦ॴଐ େࡕΦϑΟεࡏ੶
5.  Developers.IO CAFEΛ஌͍ͬͯΔਓ✋
6.  ͱ͸
7. %FWFMPQFST*0
   $"'&  ׬શΩϟογϡϨεɺϨδϨεɺ ΢ΥʔΫεϧʔ͕ମݧͰ͖ΔCafe
8. ϨδϨε࣮ݱͷͨΊͷϞόΠϧΦʔμʔ 
9. ৽ͨͳମݧ΢ΥʔΫεϧʔ 
10. ൃද಺༰  ঎඼؅ཧͳͲΧϑΣͷཪଆΛࢧ͑Δ ؅ཧը໘ΛAngularΛ࢖࣮ͬͯ૷͍ͯ͠·͢ ࣮ࡍͲ͏͔ͩͬͨօ͞Μʹڞ༗͠·͢
11. ຊൃදͷର৅ऀ  ର৅ऀ
    w"OHVMBSͬͯΑ͘Θ͔Βͳ͍ਓ
    w"OHVMBSͬͯͲΜͳಛ௃͕͋Δ͔஌Γ͍ͨਓ
    w"OHVMBSΛ࢖͍͖͍ͬͯͨਓ
    w؅ཧը໘Λ"OHVMBSͰ࡞Γ͍ͨਓ
12.  Angular࢖ͬͯ։ൃ͍ͯ͠Δਓ✋
13. ΞδΣϯμ  wΧϑΣͷ؅ཧը໘
    w"OHVMBSʹ͍ͭͯ
    wര଎Ͱ؅ཧը໘Λ։ൃ͢Δํ๏
    w"OHVMBSͷ։ൃͷྲྀΕ
    w؅ཧը໘ͷ࣮૷Ͱศརͩͬͨͱ͜Ζ
    w·ͱΊ NJO NJO NJO ̑NJO NJO NJO
14.  ΧϑΣͷ؅ཧը໘
15. wΧϑΣͷελοϑ͕ར༻͢Δ
    wαΠυφϏɺλϒͰը໘੾Γସ͑
    wϔομʔͰళฮͷ੾Γସ͑ͳͲ ΧϑΣͷ؅ཧը໘  w݉຿͠ͳ͕Β໿ ϲ݄Ͱ࣮૷
    wݱࡏϝϯόʔਓͰ։ൃத
    w.BUFSJBMσβΠϯΛ࠾༻ ஫จঢ়گ֬ೝը໘
16. ച্֬ೝը໘ ঎඼Ұཡը໘
17.  Angularͷجຊ৘ใ
18. "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/
19.  AngularJSͱAngular
20. "OHVMBS+4͔Β"OHVMBS΁  w"OHVMBS+4͸ύϑΥʔϚϯεͱػೳͷΘ͔Γқ͞ʹ͍ͭͯܽ఺͕͋ͬͨ
    w։ൃνʔϜ͕̍೥͔͚͔ͯ̍Βίʔυॻ͖௚͠"OHVMBS͕Ͱ͖ͨ
    wجຊతʹผͷϑϨʔϜϫʔΫͱࢥͬͨ΄͏͕͍͍
    w"OHVMBS͸ʮ"OHVMBS
    Wʯ΍ʮ"OHVMBS ʯͱݺ͹ΕΔ͜ͱ͕͋Δ͕
    wࠓ͸"OHVMBSͱݺͿ͜ͱ͕Ұൠత
    w"OHVMBSͰ͸8FCඪ४ͷ৽ٕज़ΛऔΓࠐΈɺ5ZQF4DSJQUΛ࠾༻
21.  Angularͷಛ௃
22. "OHVMBSͷಛ௃  w5ZQF4DSJQUඪ४ɺ࠷৽ͷ8FCελϯμʔυͳٕज़ͱ਌࿨ੑ͕ߴ͍
    wϑϧελοΫͳϑϨʔϜϫʔΫʢϑϩϯτΤϯυ෦෼ͷΈʣ
    wίϯϙʔωϯτࢦ޲Ͱγϯϓϧɺ؆୯ɺߴύϑΥʔϚϯε
    wϦϦʔεαΠΫϧ͕ݻఆ
    wόʔδϣϯΞοϓָ͕
23. 8FCελϯμʔυͳٕज़ͱ਌࿨ੑ͕ߴ͍  w&$."4DSJQU
     ͷߏจͰ࣮૷͞Ε͍ͯΔ
    w&4
    .PEVMFTʹରԠ
    w8FC
    "OJNBUJPOT
    "1*
    w8FC
    $PNQPOFOUT
    w&4
    1SPQTBM
    w%FDPSBUPST
    w0CTFSWBCMFT
    w;POFT ಠࣗ࿏ઢͰ͸ͳ͘ɺ Webͷඪ४ٕज़΍৽ٕज़Λ࠾༻
24.  ϑϧελοΫͳϑϨʔϜϫʔΫ
25. ϑϧελοΫ  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 ...
26.  ϥΠϒϥϦͷೖΕସ͑΋Մೳ
27. ྫɿςετϑϨʔϜϫʔΫΛ+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
28.  ίϯϙʔωϯτࢦ޲
29. ίϯϙʔωϯτ  wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢
    w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ
    w࣮ଶ͸Ϋϥε
    wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `<p>Name: {{ name }}</p>` }) export class TestComponent { @Input() name: string; } <app-test name="devio"></app-test>
30. ίϯϙʔωϯτ  wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢
    w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ
    w࣮ଶ͸Ϋϥε
    wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `<p>Name: {{ name }}</p>` }) export class TestComponent { @Input() name: string; } <app-test name="devio"></app-test>
31. ίϯϙʔωϯτ  wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢
    w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ
    w࣮ଶ͸Ϋϥε
    wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `<p>Name: {{ name }}</p>` }) export class TestComponent { @Input() name: string; } <app-test name="devio"></app-test>
32. ίϯϙʔωϯτ  wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢
    w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ
    w࣮ଶ͸Ϋϥε
    wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `<p>Name: {{ name }}</p>` }) export class TestComponent { @Input() name: string; } <app-test name="devio"></app-test>
33. ίϯϙʔωϯτ  wίϯϙʔωϯτͷ࡞Γํ͕௚ײతͰΘ͔Γ΍͍͢
    w!$PNQPOFOUͰίϯϙʔωϯτΛఆٛ
    w࣮ଶ͸Ϋϥε
    wTFMFDUPS͕ίϯϙʔωϯτͷλά໊ ίϯϙʔωϯτΛ࢖͏ଆ(html) ίϯϙʔωϯτΛఆٛ͢Δଆ(ts) @Component({ selector: 'app-test', template: `<p>Name: {{ name }}</p>` }) export class TestComponent { @Input() name: string; } <app-test name="devio"></app-test> ੜ੒͞ΕΔDOM
34. ςϯϓϨʔτߏจɹͦͷ  wσʔλόΠϯσΟϯάΛαϙʔτ
    wγϯϓϧͰ؆୯ɹ<>Λ͚ͭΔ͚ͩ
    wϓϩύςΟʹ୅ೖ͢Δ
    wଐੑʹ୅ೖ͢Δ
    wΫϥεΛ͚ͭ֎͢͠ΔɺӈลͷධՁ݁Ռ
    wελΠϧΛ෇༩͢Δ @Component({ selector: 'app-test', template: ` <input [value]='name'> <div [attr.role]='role'></div> <div [class.large]='isLarge'></div> <div [style.width.px]='mySize'></div>` }) export class TestComponent { name = 'devio'; role = 'main'; isLarge = true; mySize: 16; }
35. ςϯϓϨʔτߏจɹͦͷ  wΠϕϯτϋϯυϦϯάɿΫϦοΫΠϕϯτͳͲ
    wγϯϓϧͰ؆୯ɹΠϕϯτ໊Λ ͰғΉ͚ͩ
    wFWFOUͰؔ਺ͰΠϕϯτ৘ใ͕ͱΕΔ @Component({ selector: 'app-test', template: `<button (click)='onClick($event)'></button>` }) export class TestComponent { onClick(e: MouseEvent) { console.log(e); } } औΕͨΠϕϯτ৘ใ
36.  ϦϦʔεαΠΫϧ͕ݻఆ͞Ε͍ͯΔ
37. 4FNBOUJD
    7FSTJPOJOHʢ4FN7FSʣ  "OHVMBS
    9:;
    w9
    ϝδϟʔ
    wޓ׵ੑͷͳ͍ػೳมߋΛؚΉՄೳੑ͕͋ΔόʔδϣϯΞοϓ
    w:
    ϚΠφʔ
    wޙํޓ׵ੑ͕͋ΔػೳมߋΛؚΉόʔδϣϯΞοϓ
    w;
    ύον
    wόάमਖ਼
38. λΠϜϕʔεϦϦʔε  w҆ఆੑͱ৴པੑΛҡ࣋͢ΔͨΊʹϦϦʔεαΠΫϧ͕ܾ·͍ͬͯΔ
    wϲ݄͝ͱʹϝδϟʔόʔδϣϯΞοϓ
    wϝδϟʔϦϦʔε͝ͱʙճͷϚΠφʔϦϦʔε
    w΄΅ຖिͷύονϦϦʔε
    wͦͷͨΊɺ
    wϑϧελοΫͳͷͰɺόʔδϣϯΞοϓʹର͢Δڪා৺͕௿͘ͳΔ
39.  όʔδϣϯΞοϓָ͕
40. όʔδϣϯΞοϓ͸ָͪΜ  wͲͷΑ͏ʹόʔδϣϯΞοϓͨ͠Β͍͍͔ڭ͑ͯ͘ΔαΠτ͕͋Δ
    w"OHVMBS
    6QEBUF
    (VJEFʢެࣜʣ
    wIUUQTVQEBUFBOHVMBSJP
    wόʔδϣϯΛબ୒͢Δ͚ͩͰ0,
    wOH
    VQEBUFίϚϯυͰɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ґଘؔ܎ؚΊͯόʔδϣϯΞοϓ
    wOH
    VQEBUF͸"OHVMBS
    $-*
    Ҏ߱
41. OH
    VQEBUF͕༏ल  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
42. ഁյతͳมߋ͕ՃΘͬͨߏจ΋मਖ਼ͯ͘͠ΕΔ  w7Ͱഁյతมߋ͕͞Εͨߏจ
    wˏ7JFX$IJME
    
    !$POUFOU$IJME
    wୈೋҾ਺͕ඞਢʹͳͬͨ
    wOH
    VQEBUFͰόʔδϣϯΞοϓͤ͞Δͱ
    wίʔυղੳͯࣗ͠ಈతʹୈೋҾ਺ͷσϑΥϧτ஋͕ૠೖͯ͘͠ΕΔ @ViewChild(a, b) @ContentChild(a, b)
43.  Angular͸TypeScriptͷ ԸܙΛϑϧ׆༻͍ͯ͠Δ
44. 5ZQF4DSJQUͷԸܙ  w੩తͳܕ
    wܕϕʔεͷ%*͕Մೳ
    wܕͷ͓͔͛Ͱίʔυ͕υΩϡϝϯτʹͳΓৗʹίʔυͱυΩϡϝϯτ͕Ұக͢ Δʢ"OHVMBSͷυΩϡϝϯτʣ
    w$PNQJMFS
    DIFDL
    wίϯύΠϥνΣοΫʹΑΔόάͷࠞೖΛ௿ݮͤ͞Δ
    w-BOHVBHF
    4FSWJDF
    -BOHVBHF
    4FSWFS
    1SPUPDPM
    wܕͷ͓͔͛Ͱɺม਺΍ΦϒδΣΫτ͕ͲΜͳϓϩύςΟΛ͔࣋ͭΘ͔ΔͨΊɺ ΤσΟλ΁ͷࢧԉ͕Ͱ͖Δɺೖྗิ׬΍δϟϯϓ
45. σίϨʔλʔˏ%FDPSBUPST  w+BWB4DSJQUͷ৽͍͠ߏจʢUDQSPQPTBMTʣ
    w·ͩυϥϑτɿ4UBHF
    w5ZQF4DSJQUͰ͸͜ͷߏจΛઌऔΓͯ͠࢖༻Ͱ͖Δ
    w"OHVMBSͰ͸͜ͷσίϨʔλʔΛ࢖͍ͬͯΔ
46. "OHVMBS
    -BOHVBHF
    4FSWJDFT  wUFNQMBUF )5.- ಺Ͱͷ
    ิ׬
    
    ΤϥʔνΣοΫ
    
    ఆٛδϟϯϓ
    ΛՄೳ ʹ͢ΔͨΊͷπʔϧ
    w5ZQF4DSJQUͷίϯύΠϥଆ͔ΒΤσΟλଆʹఏڙ
    wೖྗ࣌ʹίϯςΩετ্ͷՄೳੑ΍ώϯτΛఏڙͯ͘͠ΕΔ
    wίϯϙʔωϯτηϨΫλʔͱ͍ͯ࣋ͬͯ͠Δ͢΂ͯͷཁૉ͕දࣔ͞ΕΔ
47. ΤϥʔνΣοΫ  wίʔυ಺ͷؒҧ͍Λ௨஌͢Δ͜ͱ͕Ͱ͖Δ
    wPSEFST͕OPU
    EFpOFEͰ͋Δ͜ͱΛΤσΟλʹ௨஌͍ͯ͠Δ
48. φϏήʔγϣϯ  wφϏήʔγϣϯΛ࢖༻͢Δͱɺ
    ίϯϙʔωϯτɺσΟϨΫςΟϒɺϞ δϡʔϧͳͲ͕Ͳ͜ʹ͋Δ͔Λ֬ೝ͠ɺ
    'ΩʔΛԡͯͦ͠ͷఆٛʹ௚ ઀ҠಈͰ͖·͢
49.  ͜͜·Ͱͷ·ͱΊ
50. ͜͜·Ͱͷ·ͱΊ  TypeScriptͰܕ҆શ ϑϧελοΫ ίϯϙʔωϯτࢦ޲Ͱ։ൃ͕؆୯ όʔδϣϯΞοϓ͕؆୯Ͱ҆ఆ
51.  ര଎Ͱ؅ཧը໘Λ࡞ΔͨΊͷํ๏
52. ര଎Ͱ؅ཧը໘Λ࡞ΔͨΊʹ͸  ɾAngular CLIΛ࢖ͬͯ։ൃ͍ͯ͘͠ ɾAngular Materialͱ͍͏ UIϑϨʔϜϫʔΫΛ࢖͏ ɾTypeScript
53. ߏ੒ཁૉ  w1MBUGPSN NBJOUT
    w"QQMJDBUJPOɺ.PEVMFΛ࣮ߦ͢Δ؀ڥ
    w.PEVMF
    wSPPUͷ.PEVMF͸BQQNPEVMFUT
    wίϯϙʔωϯτͳͲΛ·ͱΊͨ΋ͷ
    w࢖͍͍ͨػೳͷ.PEVMFΛJNQPSU Application Platform Module Module Module Module Components Directives Pipes Services
54.  Angular CLIΛ࢖ͬͨ։ൃͷྲྀΕ
55. ΫΠοΫελʔτ  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ʼn: Project is running ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ℹ ňwdmʼn: Compiled successfully.
56. ϒϥ΢β͔ΒΞΫηε͠ը໘Λ֬ೝ  wIUUQMPDBMIPTU
    wϒϥ΢β͔ΒΞΫηε͢Δͱ࣮ߦͨ͠ΞϓϦέʔγϣϯ͕֬ೝͰ͖Δ
    wίʔυΛฤू͢ΔͱࣗಈͰը໘ߋ৽
    wOH
    TFSWF
    D
    TUH
    w
    DɿಡΈࠐΉઃఆϑΝΠϧΛมߋ
57. ը໘ͷ෦඼Ͱ͋Δίϯϙʔωϯτͷ௥Ճ  w$-*͔ΒίϯϙʔωϯτΛ࡞੒
    wΦϓγϣϯͰΠϯϥΠϯʹ͢Δ͜ͱ΋Մ ❯ ng g component test --inlineStyle --inlineTemplate ❯ ng g component test
58. ΤσΟλͷϓϥάΠϯ΋ॆ࣮  w։ൃΛαϙʔτͯ͘͠ΕΔϓϥάΠϯ͕๛෋
    wΤσΟλ͔Β$-*ͱಉ͜͡ͱ͕Ͱ͖ΔϓϥάΠϯ
    wೖྗิ׬Λͯ͘͠ΕΔϓϥάΠϯ
59. ςετ΍-JOUɺϏϧυ༻ͷίϚϯυ΋͋Δ  wςετ΍MJOU΋ઃఆ͞Ε͓ͯΓɺ؀ڥߏங͸ෆཁ
    wϏϧυίϚϯυ΋͋Γɺ)5.- +4ΛʮEJTUʯʹग़ྗ
    wσϓϩΠίϚϯυ΋͋Γɺ؆୯ʹ'JSFCBTFͳͲʹσϓϩΠՄೳ
    w4΁ͷσϓϩΠ͸BXT
    DMJ͔Β͕؆୯ ❯ ng build ❯ ng build --prod ❯ ng deploy ❯ aws s3 sync dist s3://<bucket> --delete ❯ ng lint ❯ ng e2e ❯ ng test
60.  Angular Materialͱ͍͏ UIϑϨʔϜϫʔΫΛ࢖͏
61.  Angular MaterialͰ σβΠϯྗෆ଍Λิ͏
62. "OHVMBS
    .BUFSJBM  w.BUFSJBMσβΠϯͷ6*ϑϨʔϜϫʔΫ
    wσβΠϯ͠ͳͯ͘΋ɺ͍͍͔Μ͡ͷ.BUFSJBMσβΠϯʹͳΔ
    wσβΠϯʹ࣌ؒΛ͔͚Εͳ͍ͱ͖ͷڧ͍ຯํ
    wެ͕ࣜఏڙ͍ͯ͠ΔͷͰɺಋೖ͕؆୯Ͱ҆ఆ
63. ࢖͍ํ  wΠϯετʔϧ
    w࢖͍͍ͨίϯϙʔωϯτͷϞδϡʔϧΛJNQPSU FY
    BQQNPEVMFUT
    wλάΛهࡌ FY
    BQQDPNQPOFOUIUNM ❯ ng add @angular/material import { MatSliderModule } from '@angular/material/slider'; … @NgModule ({.... imports: [..., MatSliderModule, …] }) <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
64.  Angular Materialͷ ςʔϒϧ͕ಛʹศར
65. ςʔϒϧ  w؅ཧը໘Ͱ͸Ұཡදࣔ͢Δ৔໘͕ଟ͍ͷͰΑ͘࢖͏
    wϖʔδωʔγϣϯɺιʔτɺϑΟϧλʔػೳ͕؆୯ʹ࣮૷Ͱ͖Δ ϖʔδωʔγϣϯ ιʔτ ϑΟϧλʔ
66.  ؅ཧը໘ͷ࣮૷Ͱศརͩͬͨͱ͜Ζ
67.  Angular Flex-Layout ͰϨΠΞ΢τपΓΛ੔͑Δ
68. "OHVMBS
    'MFY-BZPVU  w$44
    'MFYCPYΛσΟϨΫςΟϒͰࢦఆͰ͖ΔΑ͏ʹͨ͠ϥΠϒϥϦ
    wϨΠΞ΢τ΍ϨεϙϯγϒରԠΛDTTΛ͔͔ͣʹ؆୯ʹ࣮૷Ͱ͖Δ
    w$44ͷϑΝΠϧΛߦͬͨΓདྷͨΓ͠ͳͯ͘Α͍
    wର৅ൣғ͕Θ͔Γ΍͍͢ <div fxLayout="row"> #fxlayout:boxͷํ޲ΛܾΊΔ <div fxFlex="10%"></div> #fxflex:্هͰܾΊͨboxͷ෯orߴ͞ΛܾΊΔ <div fxFlex="10%"></div> <div fxFlex="80%"></div> </div> https://github.com/angular/flex-layout/wiki
69.  CSS͕σϑΥϧτ ίϯϙʔωϯτείʔϓͳͷͰ ଞʹӨڹΛ༩͑ͳ͍
70. ίϯϙʔωϯτείʔϓ  wෳ਺ਓͰ։ൃ͢Δͱ͖ࣗ෼ͷ࡞ۀ͕ଞʹӨڹΛ༩͑ͳ͍
    w৺ཧతͳ҆৺ײ͕͋ͬͯ։ൃ͠΍͍͢
    w$44ϑΝΠϧͷઃఆ͸ͦͷίϯϙʔωϯτͷΈదԠ͞ΕΔ
71.  ϧʔςΟϯάͰೝূ੍ޚ
72. "OHVMBS
    3PVUFS  wQBUI͝ͱʹ%0.Λ੾Γସ͑Δ
    w(VBSEػೳ
    wQBUI͝ͱʹೝূ͔͚ΒΕΔ
    w-B[Z-PBEJOH
    w஗ԆಡΈࠐΈͰߴ଎Խ http://slides.com/gerardsans/ngpoland-amazing-ng2-router#/4/3
73. ઃఆྫ  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 {}
74.  ϑΥʔϜपΓ͕ಛʹศར
75. ϑΥʔϜपΓͰศརͳͱ͜Ζ  w؅ཧը໘Ͱ͸ొ࿥΍ฤूͳͲͰϑΥʔϜ͸Α͘࢖͏ͷͰΑΓศར࣮͞ײ
    wಈతʹϑΥʔϜͷ௥Ճɾ࡟আ͕Ͱ͖Δ
    wϑΥʔϜͷೖྗνΣοΫͳͲ؆୯ʹ੍ޚͰ͖Δ
    wϦΞϧλΠϜʹόϦσʔγϣϯνΣοΫͯ͠ΤϥʔΛදࣔ
76. ಈతʹϑΥʔϜͷ௥Ճɾ࡟আ͕Ͱ͖Δ
     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); } ௥Ճ࣌ͷϑΥʔϜ ϑΥʔϜΛ௥Ճ͢Δؔ਺ ϑΥʔϜΛ࡟আ͢Δؔ਺
77. ϑΥʔϜͷೖྗνΣοΫͳͲ؆୯ʹ੍ޚͰ͖Δ  wϑΥʔϜશମͷόϦσʔγϣϯ͕ΫϦΞͯ͠Δ͔؆୯ʹऔಘͰ͖Δ
    wΫϦΞͯ͠ͳ͍ͱ͖EJTBCMFEͷଐੑΛ෇༩ͯ͠ϘλϯΛΫϦοΫɹɹɹ Ͱ͖ͳ͍Α͏ʹ͍ͯ͠Δ ɹ<button (click)="openModal()" [disabled]="!eventForm.valid">ొ࿥</button>
78. ϦΞϧλΠϜʹόϦσʔγϣϯνΣοΫͯ͠ΤϥʔΛදࣔ
     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] }); <mat-error *ngIf="eventForm.get('event_code').hasError('maxlength')"> {{ eventForm.get('event_code') .getError('maxlength').requiredLength }}จࣈҎԼͰೖྗ͍ͯͩ͘͠͞ɻ </mat-error> ςϯϓϨʔτ(html) ίϯϙʔωϯτ(ts)
79.  Ͳ͏΍ͬͯΩϟονΞοϓ͢Δʁ
80.  ·ͣ͸νϡʔτϦΞϧΛ΍Δ ެࣜυΩϡϝϯτΛ֬ೝ͢Δ Θ͔Βͳ͍ͱ͜Ζ͸ίϛϡχςΟͰ͖͘
81.  ίϛϡχςΟܥ
82. ࠔͬͨͱ͖͸ίϛϡχςΟͰ࣭໰  wTMBDL
    wOHKBQBOTMBDLDPN
    wIUUQTUDP('/,VI%5OZ BNQ
    w৘ใަ׵ɺτϥϒϧγϡʔςΟϯά
    wEJTDPVSTF
    wIUUQTUDP"7K254+O BNQ
83. :PV5VCFʹଟ͘ͷ৘ใ͕͋Δ  w೔ຊͷίϛϡχςΟ͕ӡӦ͍ͯ͠Δνϟϯωϧ
    wΧϯϑΝϨϯεܥ
    wֶशܥ
84. Φεεϝ͸OHKBQBO
    0O"JS  w:PV5VCF
    -JWF
    w͍͍݄ͩͨ̍ϖʔεͰ։࠵
    w࠷৽৘ใ΍ϓϥΫςΟεΛΩϟονΞοϓͰ͖Δ
    wΞʔΧΠϒ΋͋ΔͷͰޙ͔Βݟ௚ͤΔ
85.  ·ͱΊ
86. ·ͱΊ  w"OHVMBS
    w5ZQF4DSJQUͰܕ҆શ
    wϑϧελοΫ
    wίϯϙʔωϯτࢦ޲Ͱ։ൃ͕؆୯
    wόʔδϣϯΞοϓ͕؆୯Ͱ҆ఆ wര଎Ͱ؅ཧը໘Λͭ͘ΔͨΊʹ
    w"OHVMBS
    $-*Λ࢖͍͜ͳ͢
    w"OHVMBS
    .BUFSJBMͰ޻਺͔͚ͣʹ͍͍͔Μ͡ͷσβΠϯʹ
    wςʔϒϧͷϖʔδωʔγϣϯɺιʔτɺϑΟϧλʔ͸؆୯ʹ࣮૷Ͱ͖Δ w؅ཧը໘ͷ։ൃͰΑ͔ͬͨͱ͜Ζ
    wϧʔςΟϯάͰೝূ੍ޚͳͲ؆୯ʹ࣮૷Ͱ͖Δ
    w'PSN·ΘΓ͕ͱͯ΋ศར
    
88.  ͓·͚
89.  ࠓޙͷτϨϯυʢݸਓత༧૝ʣ
90.  ࡢࠓͷྲྀߦΓ͸TypeScript
91. 5ZQF4DSJQUͷਓؾ͕ͺͳ͍ 
92. શํҐ5ZQF4DSJQU  Angular + NestJSͰ ΫϥΠΞϯτ΋αʔόʔαΠυ΋ TypeScriptͳΞʔΩςΫνϟ͕ ૿Ճ͢Δ͔΋
93.  NestJS
94. /FTU+4  w5ZQF4DSJQUϕʔεͷαʔόʔαΠυ'8
    w5ZQF4DSJQUͰ"1*։ൃ͕Ͱ͖Δ
    wσίϨʔλʔͰએݴతʹ"1*Λ࡞੒
    w"OHVMBSϥΠΫͰ%*͕࢖͑Δ
    w(JUIVCͷελʔ਺΋ ௒͑
    wܕΛڞ༗Ͱ͖ɺݴޠΛ5ZQF4DSJQUʹ౷ҰͰ͖Δ
    w"OHVMBS΍͓ͬͯ͘ͱߋʹ։ൃޮ཰͕͕͋ͬͯྑͦ͞͏Ͱ͢Ͷ