最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門

΢ΣϒΤϯδχΞͷͨΊͷ "OHVMBS+4ೖ໳ ΞγΞϧגࣜձࣾٱอాޫଇ 1)1ΧϯϑΝϨϯε ࠷৽41"։ൃΛֶ΅͏ʂ

ࣗݾ঺հ ‣ ٱอాޫଇ ‣ ΞγΞϧגࣜձࣾॴଐ ‣ BLBJEBOBUPP ‣ 6*69σβΠφʔ݉  ιϑτ΢ΣΞΤϯδχΞ
‣ )5.-&YQFSUKQΤΩεύʔτ

޷ධൃചத

ΞγΞϧגࣜձࣾ ‣ )5.-ϞόΠϧΞϓϦ։ൃ ϓϥοτϑΥʔϜग़ͯ͠·͢ ‣ IUUQNPOBDBNPCJ ‣ IUUQPOTFOJP

ࠓ೔࿩͢͜ͱ ‣ 41"ͬͯԿ ‣ "OHVMBS+4ͷ঺հ ‣ σʔλόΠϯσΟϯά ‣ %*ίϯςφ
‣ σΟϨΫςΟϒ

41"ͱ͸

41"ͱ͸ ‣ 4JOHMF1BHF"QQMJDBUJPOͷུ ‣ ̍ͭͷϖʔδͰΞϓϦ͕׬݁͢Δ ‣ ۙ೥։ൃ͕૿Ճ

l41"JTBXFCBQQMJDBUJPOUIBUpUTPOB TJOHMFXFCQBHFXJUIUIFHPBMPG QSPWJEJOHBNPSFqVJEVTFSFYQFSJFODFz IUUQFOXJLJQFEJBPSHXJLJ4JOHMFQBHF@BQQMJDBUJPOΑΓൈਮ

ʮ41"ͱ͸ɺΑΓྲྀಈతͳ69Λఏڙ͢Δ͜ ͱΛ໨తͱͨ͠ɺҰͭͷ΢Σϒϖʔδʹೲ· Δ΢ΣϒΞϓϦέʔγϣϯͰ͋Δɻʯ

ैདྷͷ΢ΣϒΞϓϦ ‣ ෳ਺ϖʔδͰఏڙ͞ΕΔ .VMUJ1BHF"QQMJDBUJPO ‣ 63-ͷભҠ͕ඞਢ

‣ 63-ભҠ͸69తʹ͸அઈɻ ωοτϫʔΫܦ༝ͰͷϦιʔεͷಡΈࠐΈ )5.- $44 +BWB4DSJQUͷύʔε %0.πϦʔɺ$440.ͷߏங ϨϯμʔπϦʔͷߏஙͱඳը +BWB4DSJQUͷ࣮ߦ

41"Ͱग़དྷΔྲྀಈతͳ69 ‣ %0.ૢ࡞Ͱը໘ભҠ ‣ 63-ભҠ͸جຊ͠ͳ͍ ‣ αʔόͱͷ΍ΓͱΓ͸BKBY΍XFCTPDLFUͰ

ͳͥ41"։ൃ͕૿͍͑ͯΔ ‣ σεΫτοϓΞϓϦͷ69Λ΢Σϒ΁ ‣ 3*" 3JDI*OUFSOFU"QQMJDBUJPO ͷड͚ࡼ ‣ جૅٕज़ͷཱ֬

σεΫτοϓΞϓϦͷ  69Λ΢Σϒ΁ ‣ ैདྷ͔Β͋Δཁٻ ‣ 41"Ͱ͸ɺ63-ભҠʹΑΔ଴͕ͪ࣌ؒແ͍

ྫJDMPVEDPNͷ/VNCFST ‣ ΋͸΍σεΫτοϓΞϓϦͱ΄ͱΜͲಉ͡

3*"ϓϥοτϑΥʔϜͷड͚ࡼ ‣ )5.-ͷ41"ʹྲྀΕ͖ͯͨ

جૅٕज़ͷཱ֬ ‣ ϒϥ΢βͷؔ࿈"1*ͷ੔උ ‣ QVTI4UBUFͳͲ)JTUPSZ"1* ‣ +4ϥΠϒϥϦɾϑϨʔϜϫʔΫͷීٴ ‣ ϧʔςΟϯάɺσʔλόΠϯσΟϯά౳ ‣
ϊ΢ϋ΢ͷ஝ੵ ‣ +BWB4DSJQU࣮ߦͷߴ଎Խ ‣ +*5ίϯύΠϧɺϗοτεϙοτɺίϯύΠϧ࠷ద Խ

ར༻͞ΕΔϑϨʔϜϫʔΫ ‣ ͦͷଞଟ਺ɻɻɻ ‣ 41"։ൃͰ࢖͑ΔϑϨʔϜϫʔΫ͸ແ਺ʹ͋Δ

IUUQTBOHVMBSKTPSH

"OHVMBS+4ͷಛ௃ ‣ )5.-Λ֦ுͯ͠ΞϓϦΛهड़ ‣ 41"։ൃʹదͨ͠ػೳηοτ

)5.-FOIBODFEGPSXFCBQQ ‣ ΧελϜͷଐੑɺΧελϜͷཁૉΛ࢖ͬͯهड़͠ ͍ͯ͘ <html ng-app=“app”> <head> <script src=“angular.js”></script> </head>
<body ng-controller=“MyCtrl”> <h1>{{title}}</h1> </body> </html>

41"։ൃʹదͨ͠ػೳηοτ ϧʔςΟϯά σʔλ όΠϯσΟϯά %*ίϯςφ σΟϨΫςΟϒ

ϧʔςΟϯά

ϧʔςΟϯά ‣ 63-ͷIBTI΍)JTUPSZ"1*ͰɺϏϡʔΛ੾Γସ͑ ‣ 63-ભҠΛ൐Θͳͣɺը໘ͷҰ෦͕ભҠ NBJO TFUUJOHT PUIFS

)5.-ଆ ‣ OHWJFXଐੑͰɺϧʔςΟϯάର৅Λࢦఆ <html ng-app="app"> <head>…</head> <body> <h1>..</h1> <div ng-view>
 </div>

+BWB4DSJQUଆ ‣ SPVUF1SPWJEFSܦ༝Ͱઃఆ var module = angular.module('app', [‘ngRoute']); module.config(function($routeProvider) {
$routeProvider .when('/', { templateUrl: 'views/main.html', }) .when('/settings', { templateUrl: 'views/settings.html', }) .otherwise({ redirectTo: '/' }); });

ϧʔςΟϯά͸ͳͥඞཁ ‣ ແͯ͘΋ྑ͍ ‣ ը໘ͷಛఆͷঢ়ଶʹ֎෦͔ΒϦϯΫΛுΕΔ ‣ ΢ΣϒϖʔδͰͰ͖Δ͜ͱΛ41"Ͱ΋Մೳʹ

σʔλόΠϯσΟϯά

σʔλόΠϯσΟϯά ‣ "OHVMBS+4ͷ7JFXΛ࢘Δத֩ػೳ ‣ ΦϒδΣΫτͱ%0.Λ૬ޓʹ൓өͤ͞Δ ‣ ยํ͕ߋ৽͞ΕͨΒ΋͏ยํ΁ +4ΦϒδΣΫτ %0.

%0.ͱΦϒδΣΫτΛ݁ͼ͚ͭΔ %0.πϦʔ +BWB4DSJQUଆ ) ) %*7 '005&3 #0%: 4&$5*0/ TDPQF
TDPQF \ʜ^ \ʜ^

ίϯτϩʔϥͰείʔϓΛ࡞Δ <div ng-controller=“MyCtrl”> {{message}} </div> module.controller(‘MyCtrl’, function($scope) { $scope.message =
‘HelloWorld’; }); +BWB4DSJQU )5.- ‣ ςϯϓϨʔτΤϯδϯɺͰ͸ͳ͍

+4ͷ஋͕ࣗಈతʹ%0.΁ ‣ είʔϓΛߋ৽͢ΔͱɺͦΕ͕%0.ʹࣗಈతʹ൓ө <div>{{message}}</div> $scope.message = ‘Hi guys’; +BWB4DSJQU )5.-
<div>Hi guys</div> ࣮ࡍͷ%0.

%0.ͷมߋ͕ࣗಈతʹ+4΁ ‣ ςΩετཝʹೖྗ͢Δͱࣗಈతʹείʔϓʹ൓ө <input type=“text” ng-model=“message”> console.log($scope.message); +BWB4DSJQU )5.- ςΩετཝʹೖྗ

σʔλόΠϯσΟϯάͷ༝དྷ ‣ ݩʑ͸σεΫτοϓ(6*Ͱ࢖ΘΕ͍ٕͯͨज़ ‣ $PDPB#JOEJOH.BD049 ‣ 81' 4JMWFSMJHIU8JOEPXT ! ‣
ࠓͰ͸Ϟμϯ+4ϑϨʔϜϫʔΫͰ͸΄΅ඞਢͷػ ೳʹ ‣ ,OPDLPVUKT #BUNBOKT "OHVMBSKT 7VFKT

K2VFSZతखଓ͖ॲཧ͔Βͷ୤٫ ‣ +4ͷίʔυ͕%0.πϦʔʹґଘ ‣ ن໛͕େ͖͘ͳΔͱϝϯς͕  ೉͍͠ίʔυ͕Ͱ͖΍͍͢ ‣ 41"։ൃʹ͸͋·Γ޲͍͍ͯͳ͍ º

%*ίϯςφ

%*ύλʔϯ ‣ ґଘΛ֎͔Β౉ͯ͠΋Β͏ઃܭύλʔϯ ‣ γεςϜʹॊೈੑΛ༩͑Δ var MyClass = function() {
this.logger = new MyLogger(); }; var MyClass = function(logger) { this.logger = logger; };

%*ίϯςφ ‣ %*ύλʔϯͰهड़ͨ͠ґଘΛ஫ೖͯ͘͠ΕΔίϯςφ ‣ ؀ڥʹΑͬͯγεςϜͷߏ੒Λม͑ΒΕΔ var MyClass = function(logger) {
this.logger = logger; }; ͜͜ʹ͍͍ײ͡ͷ  ΦϒδΣΫτΛ஫ೖ

"OHVMBS+4ͷ%*ίϯςφ ‣ ಗ໊ؔ਺ͷԾҾ਺Ͱࢦఆͨ͠ΦϒδΣΫτΛࣗಈ తʹ஫ೖͯ͘͠ΕΔ var module = angular.module(‘app’, []); !
module.factory('Hoge', function() { return new Hoge(); }); module.factory('MyClass', function(Hoge) { ... return MyClass; });

ίϯτϩʔϥ͔Βͷར༻ ‣ GBDUPSZ ϝιουͰએݴͨ͠ΦϒδΣΫτ͸ίϯτϩʔϥɾσΟϨ ΫςΟϒͳͲ͔Βͦͷ··ར༻Մೳ module.factory(‘Hoge’, function() { return {
… }; }); ! module.controller(‘MyCtrl’, function($scope, Hoge) { $scope.hoge = new Hoge(); } );

σΟϨΫςΟϒ

σΟϨΫςΟϒ ‣ )5.-Λ֦ு͢Δଐੑ΍ཁૉ͸  શͯσΟϨΫςΟϒͱͯ͠࡞੒͞Ε͍ͯΔ ‣ "OHVMBS+4ͷج൫ٕज़

)5.-Λ֦ு͢Δଐੑ΍ཁૉ͸  શͯσΟϨΫςΟϒͱͯ͠࡞੒͞Ε͍ͯΔ ‣ ಠࣗཁૉɺಠࣗଐੑ౳Λ࡞ΔͨΊͷج൫ <button ng-click=“doSomething()” ng-bind=“buttonLabel”> ... </button>

<body ng-controller=“MyCtrl”> <div ng-show=“visible”> HTML Contents </div> <footer ng-bind=“message”> </footer>
<my-element></my-element> </body> σΟϨΫςΟϒͷ࢓૊Έ ‣ ॳظԽ࣌ʹ%0.πϦʔͷཁૉ΍ଐੑΛશͯḷͬͯߦ͖ɺ  ରԠ͢ΔσΟϨΫςΟϒ͕ଘࡏ͢Ε͹ͦͷॳظԽ"1*Λݺͼग़͢ OH$POUSPMMFSىಈ OH4IPXىಈ OH#JOEىಈ NZ&MFNFOUىಈ

એݴͯ͠ΈΔ ‣ IPHFཁૉʹରԠͯ͠ಈ࡞͢ΔσΟϨΫςΟϒΛએݴ var module = angular.module('app'); ! module.directive(‘hoge’, function()
{ return { restrict: ‘E’, link: function(scope, element, attrs) { // σΟϨΫςΟϒͷॳظԽॲཧΛॻ͘ element.css({color: ‘red’}); } }; });

࣮ࡍʹλάͱͯ͠࢖͑Δ ‣ "OHVMBS+4ΞϓϦ಺Ͱͦͷ··λάͱͯ͠࢖͑Δ <html ng-app=“app”> <head> … </head> <body> <hoge>Red
Color Message</hoge> </body> </html>

IUUQPOTFOJP 0OTFO6*Ͱͷར༻ྫ ‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ

·ͱΊ

·ͱΊ ‣ ͜͜਺೥41"։ൃ͕૿͍͑ͯΔ ‣ ΑΓࣗવͰ༏Εͨ69ΛఏڙͰ͖Δ ‣ 41"։ൃͰ͸"OHVMBS+4͕Α͘ར༻͞Ε͍ͯΔ ‣ 41"ͷͨΊͷػೳηοτ͕ἧ͍ͬͯΔ ‣
ϧʔςΟϯάɺσʔλόΠϯσΟϯάɺ  %*ίϯςφɺσΟϨΫςΟϒ

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

最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門

最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門

More Decks by 久保田光則

Other Decks in Technology

Featured

Transcript