AngularDart

"OHVMBS%BSUʹೖ໳ͯ͠Έͨ GVLVPLBEBSU Ώ͔͡Θ!ZVKJLBXB@MFF

*O<>໊લ c઒্༞࢘ Ώ͔͡Θ *O<>ॴଐ cΧϥϏφςΫϊϩδʔ *O<>৬छʢࣗশʣ cݟश͍άϩʔεϋοΧʔ *O<>ීஈͷ͓࢓ࣄ c8FCΞϓϦ։ൃ
*O<>໨ඪ cάϩʔεϋοΧʔʹͳΓ͍ͨ ࣗݾ঺հ ZVKJLBXBMFF ZVKJLBXB@MFF

"OHVMBS%BSU IUUQTXFCEFWEBSUMBOHPSHBOHVMBS "OHVMBSͷ%BSUόʔδϣϯɺຊՈ"OHVMBSͱ͸ϓϩδΣΫτ͕ผΒ͍͠ ݱࡏͷW̑ʢ෇ʣ

Πϯετʔϧ dCSFXUBQEBSUMBOHEBSU dCSFXJOTUBMMEBSU dQVCHMPCBMBDUJWBUFBOHVMBS@DMJ dQVCHMPCBMBDUJWBUFXFCEFW ˞.BDͰͷ։ൃखॱΛॻ͍ͯ·͢

ϓϩδΣΫτ࡞੒ OHEBSUOFXRVJDLTUBSU ʲ࣮ߦ݁Ռʳ dOHEBSUOFXRVJDLTUBSU */'04BWJOHRVJDLTUBSUXFCJOEFYIUNM */'04BWJOHRVJDLTUBSUXFCNBJOEBSU */'04BWJOHRVJDLTUBSUXFCTUZMFTDTT */'04BWJOHRVJDLTUBSUBOBMZTJT@PQUJPOTZBNM */'04BWJOHRVJDLTUBSUHJUJHOPSF */'04BWJOHRVJDLTUBSUQVCTQFDZBNM
*/'04BWJOHRVJDLTUBSUMJCBQQ@DPNQPOFOUEBSU */'04BWJOHRVJDLTUBSUMJCBQQ@DPNQPOFOUIUNM ࢥͬͨҎ্ʹग़ྗ͞ΕΔ΋ͷ͕গͳ͍

ϑΥϧμߏ੒ RVJDLTUBSU ᵓᴷᴷBOBMZTJT@PQUJPOTZBNM ᵓᴷᴷMJC ᴹᵓᴷᴷBQQ@DPNQPOFOUEBSU ᴹᵋᴷᴷBQQ@DPNQPOFOUIUNM ᵓᴷᴷQVCTQFDMPDL ᵓᴷᴷQVCTQFDZBNM ᵋᴷᴷXFC ᵓᴷᴷJOEFYIUNM
ᵓᴷᴷNBJOEBSU ᵋᴷᴷTUZMFTDTT

OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUI /HEBSUJTBDPNNBOEMJOFJOUFSGBDFGPS"OHVMBS%BSU 6TBHFOHEBSUDPNNBOE<BSHVNFOUT> (MPCBMPQUJPOT I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO W <OP>WFSCPTF0VUQVUFYUSBMPHHJOHJOGPSNBUJPO "WBJMBCMFDPNNBOET
HFOFSBUF(FOFSBUFDPNQPOFOUPSUFTU IFMQ%JTQMBZIFMQJOGPSNBUJPOGPSOHEBSU OFX$SFBUFBO"OHVMBS%BSUQSPKFDU 3VOOHEBSUIFMQDPNNBOEGPSNPSFJOGPSNBUJPOBCPVUBDPNNBOE

OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUHFOFSBUFI (FOFSBUFDPNQPOFOUPSUFTU 6TBHFOHEBSUHFOFSBUFTVCDPNNBOE I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO "WBJMBCMFTVCDPNNBOET DPNQPOFOU(FOFSBUF"OHVMBS%BSUDPNQPOFOU EJSFDUJWF(FOFSBUF"OHVMBS%BSUEJSFDUJWF QJQF(FOFSBUF"OHVMBS%BSUQJQF
UFTU(FOFSBUF"OHVMBS%BSUDPNQPOFOUUFTU UIJTDPNNBOE TIPVMECFSVOVOEFSSPPUEJSFDUPSZPGUIFQSPKFDU 3VOOHEBSUIFMQUPTFFHMPCBMPQUJPOT

࣮ࡍʹ্ཱͪ͛ͯΈΔ ϓϩδΣΫτ࡞੒ dDERVJDLTUBSU dQVCHFU dXFCEFWTFSWF ฤूͨ͠ΒͪΌΜͱϗοτϦϩʔυͯ͘͠Ε·͢

7FSZTJNQMF

OH.PEFMΛ࢖͏ "OHVMBSͷόΠϯσΟϯάʹ࢖͏OH.PEFMΛ࢖͏ͨΊʹ BOHVMBS@GPSNTͱ͍͏ϥΠϒϥϦʔΛ௥Ճ͢Δඞཁ͕͋Δ dependencies: angular: ^5.0.0-beta+2 angular_forms: ^2.0.0 QVCTQFDZNM

OH.PEFMΛ࢖͏ EJSFDUJWFTϓϩύςΟʹGPSN%JSFWUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(
selector: 'app-component', templateUrl: 'app_component.html', directives: [formDirectives] ) class AppComponent { final String title = 'Tour of Hero'; Hero hero = Hero(1, 'Windstorm'); } BQQ@DPNQPOFOUEBSU IUUQTXFCEFWEBSUMBOHPSHBQJBOHVMBS@GPSNTBOHVMBS@GPSNTGPSN%JSFDUJWFTDPOTUBOU

OH.PEFMΛ࢖͏ IUNMʹόΠϯσΟϯά͍ͨ͠ม਺Λબ୒͢Δ <h1>{{title}}</h1> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> <div> <label>name:
</label> <input [(ngModel)]="hero.name" placeholder="name"> </div> BQQ@DPNQPOFOUIUNM

OH*G΍OH'PSΛ࢖͏ EJSFDUJWFTϓϩύςΟʹDPSF%JSFDUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(
selector: 'app-component', templateUrl: 'app_component.html', directives: [coreDirectives, formDirectives] ) class AppComponent { final String title = 'Tour of Hero'; Hero hero = Hero(1, 'Windstorm'); } BQQ@DPNQPOFOUEBSU IUUQTXFCEFWEBSUMBOHPSHBQJBOHVMBSBOHVMBSDPSF%JSFDUJWFTDPOTUBOU

OH*G΍OH'PSΛ࢖͏ OH'PS΍OH*GΛςϯϓϨʔτʹ௥Ճ͠·͢ɻ͜ͷลͷॻ͖ํ ͸ຊՈ"OHVMBSͱಉͩͬͨ͡ <h1>{{title}}</h1> <h2>Heroes</h2> <ul class="heroes"> <li *ngFor="let hero
of heroes" (click)="onSelect(hero)" [class.selected] = "hero === selected"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selected != null"> <h2>{{selected.name}}</h2> <div><label>id: </label>{{selected.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selected.name" placeholder="name"> </div> </div> BQQ@DPNQPOFOUIUNM

৽͍͠ίϯϙʔωϯτΛ࡞੒ OHEBSUHFOFSBUFDPNQPOFOUQ\1BUI^\/BNF^ dOHEBSUHFOFSBUFDPNQPOFOUQMJCTSDIFSP@DPNQPOFOU */'04BWJOHMJCTSDIFSP@DPNQPOFOUEBSU */'04BWJOHMJCTSDIFSP@DPNQPOFOUIUNM

!*OQVUΛ࢖͏ ֎͔Β஋Λड͚ΔͨΊʹ!*OQVUΛ࢖͏ɻ͜ΕʹΑΓηϨΫ τ͞ΕͨIFSPΛऔಘ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(
selector: 'hero-component', templateUrl: 'hero_component.html', directives: [coreDirectives, formDirectives], ) class HeroComponent { @Input() Hero hero; } MJCTSDIFSP@DPNQPOFOUEBSU

ςϯϓϨʔτͷҰ෦ΛҠಈ IFSPͷৄࡉΛදࣔ͢ΔϩδοΫΛBQQ@DPNQPOFOUIUNM͔ ΒIFSP@DPNQPOFOUIUNM΁Ҡಈͤ͞Δ <div *ngIf="hero != null"> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div>
<div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> </div> MJCTSDIFSP@DPNQPOFOUIUNM

֎ग़͠ςϯϓϨʔτΛ࢖͏ ઌ΄Ͳ֎ʹग़ͨ͠IFSP@DPNQPOFOUIUNMΛBQQ@DPNQPOFOUIUNMͰ ࢖͏ɻBQQ@DPNQPOFOUEBSUͷEJSFDUJWFTʹ௥Ճ͢Δ͜ͱΛ๨Εͣʹ // লུ <hero-component [hero]="selected"></hero- component> BQQ@DPNQPOFOUIUNM import
'./src/hero_component.dart'; @Component( selector: 'app-component', templateUrl: 'app_component.html', directives: [coreDirectives, HeroComponent], styleUrls: ['app_component.css'], ) // লུ BQQ@DPNQPOFOUEBSU

·ͱΊ "OHVMBSΛීஈ͔Βॻ͍͍ͯͨ਎ͱͯ͠͸؆୯ʹೃછΊͨؾ ͕͢Δ͕ɺϧʔςΟϯά΍Ψʔυͱ͍ͬͨ෦෼ΛͲ͏࣮૷͢ Δͷ͔ؾʹͳΔͱ͜Ζɻ·ͨຊ൪ϓϩμΫτʹ͚ͭΔ͔Ͳ͏ ͔ͳͲΛݟۃΊΔͨΊʹ΋ͬͱॻ͍ͯΈΑ͏ͱࢥ͏ɻ IUUQTXFCEFWEBSUMBOHPSHBOHVMBSUVUPSJBM

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

AngularDart

AngularDart

yujikawa

More Decks by yujikawa

Other Decks in Programming

Featured

Transcript

"OHVMBS%BSUʹೖ໳ͯ͠Έͨ GVLVPLBEBSU Ώ͔͡Θ!ZVKJLBXB@MFF

O<>໊લ c઒্༞࢘ Ώ͔͡Θ O<>ॴଐ cΧϥϏφςΫϊϩδʔ O<>৬छʢࣗশʣ cݟश͍άϩʔεϋοΧʔ O<>ීஈͷ͓࢓ࣄ c8FCΞϓϦ։ൃ

"OHVMBS%BSU IUUQTXFCEFWEBSUMBOHPSHBOHVMBS "OHVMBSͷ%BSUόʔδϣϯɺຊՈ"OHVMBSͱ͸ϓϩδΣΫτ͕ผΒ͍͠ ݱࡏͷW̑ʢ෇ʣ

Πϯετʔϧ dCSFXUBQEBSUMBOHEBSU dCSFXJOTUBMMEBSU dQVCHMPCBMBDUJWBUFBOHVMBS@DMJ dQVCHMPCBMBDUJWBUFXFCEFW ˞.BDͰͷ։ൃखॱΛॻ͍ͯ·͢

ϓϩδΣΫτ࡞੒ OHEBSUOFXRVJDLTUBSU ʲ࣮ߦ݁Ռʳ dOHEBSUOFXRVJDLTUBSU /'04BWJOHRVJDLTUBSUXFCJOEFYIUNM /'04BWJOHRVJDLTUBSUXFCNBJOEBSU /'04BWJOHRVJDLTUBSUXFCTUZMFTDTT /'04BWJOHRVJDLTUBSUBOBMZTJT@PQUJPOTZBNM /'04BWJOHRVJDLTUBSUHJUJHOPSF /'04BWJOHRVJDLTUBSUQVCTQFDZBNM

ϑΥϧμߏ੒ RVJDLTUBSU ᵓᴷᴷBOBMZTJT@PQUJPOTZBNM ᵓᴷᴷMJC ᴹᵓᴷᴷBQQ@DPNQPOFOUEBSU ᴹᵋᴷᴷBQQ@DPNQPOFOUIUNM ᵓᴷᴷQVCTQFDMPDL ᵓᴷᴷQVCTQFDZBNM ᵋᴷᴷXFC ᵓᴷᴷJOEFYIUNM

OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUI /HEBSUJTBDPNNBOEMJOFJOUFSGBDFGPS"OHVMBS%BSU 6TBHFOHEBSUDPNNBOE<BSHVNFOUT> (MPCBMPQUJPOT I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO W <OP>WFSCPTF0VUQVUFYUSBMPHHJOHJOGPSNBUJPO "WBJMBCMFDPNNBOET

OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUHFOFSBUFI (FOFSBUFDPNQPOFOUPSUFTU 6TBHFOHEBSUHFOFSBUFTVCDPNNBOE I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO "WBJMBCMFTVCDPNNBOET DPNQPOFOU(FOFSBUF"OHVMBS%BSUDPNQPOFOU EJSFDUJWF(FOFSBUF"OHVMBS%BSUEJSFDUJWF QJQF(FOFSBUF"OHVMBS%BSUQJQF

࣮ࡍʹ্ཱͪ͛ͯΈΔ ϓϩδΣΫτ࡞੒ dDERVJDLTUBSU dQVCHFU dXFCEFWTFSWF ฤूͨ͠ΒͪΌΜͱϗοτϦϩʔυͯ͘͠Ε·͢

7FSZTJNQMF

OH.PEFMΛ࢖͏ "OHVMBSͷόΠϯσΟϯάʹ࢖͏OH.PEFMΛ࢖͏ͨΊʹ BOHVMBS@GPSNTͱ͍͏ϥΠϒϥϦʔΛ௥Ճ͢Δඞཁ͕͋Δ dependencies: angular: ^5.0.0-beta+2 angular_forms: ^2.0.0 QVCTQFDZNM

OH.PEFMΛ࢖͏ EJSFDUJWFTϓϩύςΟʹGPSN%JSFWUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

OH.PEFMΛ࢖͏ IUNMʹόΠϯσΟϯά͍ͨ͠ม਺Λબ୒͢Δ <h1>{{title}}</h1> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> <div> <label>name:

݁Ռ

OH*G΍OH'PSΛ࢖͏ EJSFDUJWFTϓϩύςΟʹDPSF%JSFDUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

OHG΍OH'PSΛ࢖͏ OH'PS΍OHGΛςϯϓϨʔτʹ௥Ճ͠·͢ɻ͜ͷลͷॻ͖ํ ͸ຊՈ"OHVMBSͱಉͩͬͨ͡ <h1>{{title}}</h1> <h2>Heroes</h2> <ul class="heroes"> <li *ngFor="let hero

৽͍͠ίϯϙʔωϯτΛ࡞੒ OHEBSUHFOFSBUFDPNQPOFOUQ\1BUI^\/BNF^ dOHEBSUHFOFSBUFDPNQPOFOUQMJCTSDIFSP@DPNQPOFOU /'04BWJOHMJCTSDIFSP@DPNQPOFOUEBSU /'04BWJOHMJCTSDIFSP@DPNQPOFOUIUNM

!OQVUΛ࢖͏ ֎͔Β஋Λड͚ΔͨΊʹ!OQVUΛ࢖͏ɻ͜ΕʹΑΓηϨΫ τ͞ΕͨIFSPΛऔಘ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

ςϯϓϨʔτͷҰ෦ΛҠಈ IFSPͷৄࡉΛදࣔ͢ΔϩδοΫΛBQQ@DPNQPOFOUIUNM͔ ΒIFSP@DPNQPOFOUIUNM΁Ҡಈͤ͞Δ <div *ngIf="hero != null"> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div>

֎ग़͠ςϯϓϨʔτΛ࢖͏ ઌ΄Ͳ֎ʹग़ͨ͠IFSP@DPNQPOFOUIUNMΛBQQ@DPNQPOFOUIUNMͰ ࢖͏ɻBQQ@DPNQPOFOUEBSUͷEJSFDUJWFTʹ௥Ճ͢Δ͜ͱΛ๨Εͣʹ // লུ <hero-component [hero]="selected"></hero- component> BQQ@DPNQPOFOUIUNM import

·ͱΊ "OHVMBSΛීஈ͔Βॻ͍͍ͯͨ਎ͱͯ͠͸؆୯ʹೃછΊͨؾ ͕͢Δ͕ɺϧʔςΟϯά΍Ψʔυͱ͍ͬͨ෦෼ΛͲ͏࣮૷͢ Δͷ͔ؾʹͳΔͱ͜Ζɻ·ͨຊ൪ϓϩμΫτʹ͚ͭΔ͔Ͳ͏ ͔ͳͲΛݟۃΊΔͨΊʹ΋ͬͱॻ͍ͯΈΑ͏ͱࢥ͏ɻ IUUQTXFCEFWEBSUMBOHPSHBOHVMBSUVUPSJBM

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠