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

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

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

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

yuji nishimura

October 11, 2019
Tweet

More Decks by yuji nishimura

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ  2019 APN AWS Top Engineersೝఆ AWSೝఆ 2017/5 ΫϥεϝιουJoin

    ࠓͷۀ຿ɿDevelopers.IO Cafeͷ؅ཧը໘ɺAPI Angular5͋ͨΓ͔Β͸͡Ίͨ(2018೥ࠒ) ΞαΠϯ͞ΕͨҊ݅ͰSPAΛ࡞Δඞཁ͕͋Γɺ ϝϯόʔ͕AngularΛ΍͍ͬͯͨͷ͕͖͔͚ͬ ܦྺ ੢ଜ ༞ೋ(28) CXࣄۀຊ෦ॴଐ େࡕΦϑΟεࡏ੶
  2. ςϯϓϨʔτߏจɹͦͷ  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; }
  3. ςϯϓϨʔτߏจɹͦͷ  wΠϕϯτϋϯυϦϯάɿΫϦοΫΠϕϯτͳͲ wγϯϓϧͰ؆୯ɹΠϕϯτ໊Λ ͰғΉ͚ͩ wFWFOUͰؔ਺ͰΠϕϯτ৘ใ͕ͱΕΔ @Component({ selector: 'app-test', template:

    `<button (click)='onClick($event)'></button>` }) export class TestComponent { onClick(e: MouseEvent) { console.log(e); } } औΕͨΠϕϯτ৘ใ
  4. 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
  5. ΫΠοΫελʔτ  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.
  6. ࢖͍ํ  wΠϯετʔϧ w࢖͍͍ͨίϯϙʔωϯτͷϞδϡʔϧΛJNQPSU FYBQQNPEVMFUT  wλάΛهࡌ FYBQQDPNQPOFOUIUNM ❯ 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>
  7. ઃఆྫ  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 {}
  8. ಈతʹϑΥʔϜͷ௥Ճɾ࡟আ͕Ͱ͖Δ  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); } ௥Ճ࣌ͷϑΥʔϜ ϑΥʔϜΛ௥Ճ͢Δؔ਺ ϑΥʔϜΛ࡟আ͢Δؔ਺
  9. ϦΞϧλΠϜʹόϦσʔγϣϯνΣοΫͯ͠ΤϥʔΛදࣔ  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)
  10. ·ͱΊ  w"OHVMBS w5ZQF4DSJQUͰܕ҆શ wϑϧελοΫ wίϯϙʔωϯτࢦ޲Ͱ։ൃ͕؆୯ wόʔδϣϯΞοϓ͕؆୯Ͱ҆ఆ wര଎Ͱ؅ཧը໘Λͭ͘ΔͨΊʹ w"OHVMBS$-*Λ࢖͍͜ͳ͢ w"OHVMBS.BUFSJBMͰ޻਺͔͚ͣʹ͍͍͔Μ͡ͷσβΠϯʹ

    wςʔϒϧͷϖʔδωʔγϣϯɺιʔτɺϑΟϧλʔ͸؆୯ʹ࣮૷Ͱ͖Δ w؅ཧը໘ͷ։ൃͰΑ͔ͬͨͱ͜Ζ wϧʔςΟϯάͰೝূ੍ޚͳͲ؆୯ʹ࣮૷Ͱ͖Δ w'PSN·ΘΓ͕ͱͯ΋ศར