Angular 2 コンポーネント指向の第一歩

Angular 2 コンポーネント指向の第一歩 22 Apr 2016 / HTML5とか勉強会 @armorik83

奥野賢太郎  @armorik83 京都市出身 ng-kyoto代表 ChatWork株式会社

https://angular.io

Angular 2 デスクトップ・ブラウザとモバイルのためのフレームワーク

話すことよくあるAngular 1 JavaScriptでも大型アプリケーションを構築する時代へ Angular 2でコンポーネント指向を始めよう

よくあるAngular 1

<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body
ng-app> <div ng-controller="simpleController"> <strong>First name:</strong> {{firstName}}<br /> <strong>Last name:</strong> <span ng-bind="lastName"></span><br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label> Set the first name: <input type="text" ng-model="firstName" /> </label><br /> <label> Set the last name: <input type="text" ng-model="lastName" /> </label> </div> </body> </html> AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

with model variables defined directly on the scopes</h2> (typing on an input field, with a data binding to the model, overrides the same variable of a parent scope) </p> <div ng-controller="firstControllerScope"> <h3>First controller</h3> <strong>First name:</strong> {{firstName}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <br /> <div ng-controller="secondControllerScope"> <h3>Second controller (inside First)</h3> <strong>First name (from First):</strong> {{firstName}}<br /> <strong>Last name (new variable):</strong> {{lastName}}<br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="lastName"/></label><br /> <br /> <div ng-controller="thirdControllerScope"> <h3>Third controller (inside Second and First)</h3> <strong>First name (from First):</strong> {{firstName}}<br /> <strong>Middle name (new variable):</strong> {{middleName}}<br /> <strong>Last name (from Second):</strong> {{$parent.lastName}}<br /> <strong>Last name (redefined in Third):</strong> {{lastName}}<br /> <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <label>Set the middle name: <input type="text" ng-model="middleName"/></label><br /> <label>Set the last name: <input type="text" ng-model="lastName"/></label> </div> </div> </div> <br /> <p> <h2>Nested controllers with model variables defined inside objects</h2> (typing on an input field, with a data binding to the model, acts on a specific object without overriding variables) </p> <div ng-controller="firstControllerObj"> <h3>First controller</h3> <strong>First name:</strong> {{firstModelObj.firstName}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <br /> <div ng-controller="secondControllerObj"> <h3>Second controller (inside First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="secondModelObj.lastName"/></label><br /> <br /> <div ng-controller="thirdControllerObj"> <h3>Third controller (inside Second and First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Middle name (from Third):</strong> {{thirdModelObj.middleName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Last name (from Third):</strong> {{thirdModelObj.lastName}}<br /> <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <label>Set the middle name: <input type="text" ng-model="thirdModelObj.middleName"/></label><br /> <label>Set the last name: <input type="text" ng-model="thirdModelObj.lastName"/></label> </div> AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. だいたいこうなるよね

JavaScriptでも  大型アプリケーションを構築する時代へ

Facebook React

ES2015

今年は 2016年

TypeScript 1.8.10

TS ES2015

Angular 2 × TypeScript

静的型付け言語のコンパイルエラーで  人為的なミスから  アプリケーションを保護

IDE（統合開発環境）と  型付き言語との相性は抜群！補完やソース間のジャンプで  効率的な開発を

Angular 2 やるなら TypeScript

Angular 2の時代へもう2の勉強を始めてOK まだ1も2も知らない人、1を予習しなくてOK

Angular 2で  コンポーネント指向を始めよう

with model variables defined directly on the scopes</h2> (typing on an input field, with a data binding to the model, overrides the same variable of a parent scope) </p> <div ng-controller="firstControllerScope"> <h3>First controller</h3> <strong>First name:</strong> {{firstName}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <br /> <div ng-controller="secondControllerScope"> <h3>Second controller (inside First)</h3> <strong>First name (from First):</strong> {{firstName}}<br /> <strong>Last name (new variable):</strong> {{lastName}}<br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="lastName"/></label><br /> <br /> <div ng-controller="thirdControllerScope"> <h3>Third controller (inside Second and First)</h3> <strong>First name (from First):</strong> {{firstName}}<br /> <strong>Middle name (new variable):</strong> {{middleName}}<br /> <strong>Last name (from Second):</strong> {{$parent.lastName}}<br /> <strong>Last name (redefined in Third):</strong> {{lastName}}<br /> <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstName"/></label><br /> <label>Set the middle name: <input type="text" ng-model="middleName"/></label><br /> <label>Set the last name: <input type="text" ng-model="lastName"/></label> </div> </div> </div> <br /> <p> <h2>Nested controllers with model variables defined inside objects</h2> (typing on an input field, with a data binding to the model, acts on a specific object without overriding variables) </p> <div ng-controller="firstControllerObj"> <h3>First controller</h3> <strong>First name:</strong> {{firstModelObj.firstName}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <br /> <div ng-controller="secondControllerObj"> <h3>Second controller (inside First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="secondModelObj.lastName"/></label><br /> <br /> <div ng-controller="thirdControllerObj"> <h3>Third controller (inside Second and First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Middle name (from Third):</strong> {{thirdModelObj.middleName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Last name (from Third):</strong> {{thirdModelObj.lastName}}<br /> <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName"/></label><br /> <label>Set the middle name: <input type="text" ng-model="thirdModelObj.middleName"/></label><br /> <label>Set the last name: <input type="text" ng-model="thirdModelObj.lastName"/></label> </div> AngularJS Hub by Andrea Bresolin is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. このまま大規模アプリ作りますか

Angular 2のコンポーネントはHTML / CSS の延長  UIパーツごとに見やすく分割複数人での分業開発を行いやすい  コンポーネントは再利用が可能コンポーネント指向

この2つを  覚えてください @Component @Input

@Component

import {Component} from 'angular2/core'; export class Hero { id: number;
name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }

name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } Componentを定義するための  デコレーター HTMLテンプレート <my-app></my-app> と書けばその中に展開されるこのComponentの挙動を  実装するクラス

name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } このheroがテンプレートのheroに  バインドされるこのtitleがテンプレートのtitleに  バインドされる

@Input

import {Component, Input} from 'angular2/core'; import {Hero} from './hero'; @Component({
selector: 'my-hero-detail', template: ` <div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> </div> ` }) export class HeroDetailComponent { @Input() hero: Hero; }

import {Component, Input} from 'angular2/core'; import {Hero} from './hero'; @Component({
selector: 'my-hero-detail', template: ` <div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> </div> ` }) export class HeroDetailComponent { @Input() hero: Hero; } heroという名のInputを定義

<my-hero-detail [hero]="hero"> </my-hero-detail>

<my-hero-detail [hero]="hero"> </my-hero-detail> my-hero-detailの hero Inputに対して自分が持ってるheroを与える

<x-user [userId]="42" [name]="'John'" > </x-user>

<x-user [userId]="42" [name]="'John'" (click)="onClickUser()" > </x-user>

<x-user [userId]="42" [name]="'John'" (click)="onClickUser()" > </x-user> []は@Input ()は@Output Inputと同じようにOutputも自分で定義できます

おまけ Component Styles

@Component({ selector: 'hero-app', template: ` <h1>Tour of Heroes</h1> <hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] })

@Component({ selector: 'hero-app', template: ` <h1>Tour of Heroes</h1> <hero-app-main [hero]=hero></hero-app-main>`,
styles: ['h1 { font-weight: normal; }'], directives: [HeroAppMainComponent] }) stylesプロパティに CSSの文字列を配列で記述このコンポーネント以下にのみ適用できるスタイル

まとめ

HTMLにちょっと装飾・機能追加できたAngular 1とは違い、 Angular 2は簡潔に、堅牢にアプリケーションを  実装するためのフレームワーク。コンポーネント指向で適切に分割し、  チームで開発しやすい、再利用しやすい、テストしやすい状態へ。

Angular 2 コンポーネント指向の第一歩 Thank you!

Angular 2 コンポーネント指向の第一歩

Angular 2 コンポーネント指向の第一歩

More Decks by OKUNOKENTARO

Other Decks in Programming

Featured

Transcript