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

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

ウェブアプリケーションのフロントエンドではここ数年、ひとつのページで完結するSPA(Single Page Application)と呼ばれる形式のものがよく開発されるようになってきました。Angular.jsは、そのSPA開発にとてもよく利用されるJavaScriptフレームワークです。

このセッションではまず最初に、なぜ近年SPA開発が増えてきたのか、なぜAngular.jsがSPA開発において多くの開発者に受け入れられているかについて話します。後半では、Angular.jsに備わっているデータバインディング、DIコンテナ、ルーティング機構、ディレクティブなどの便利な機能についてひと通り紹介します。

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

October 11, 2014
Tweet

Transcript

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

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

    ‣ )5.-&YQFSUKQΤΩεύʔτ
  3. ޷ධൃചத

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

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

    ‣ σΟϨΫςΟϒ
  6. 41"ͱ͸

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

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

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

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

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

  12. 41"Ͱग़དྷΔྲྀಈతͳ69 ‣ %0.ૢ࡞Ͱը໘ભҠ ‣ 63-ભҠ͸جຊ͠ͳ͍ ‣ αʔόͱͷ΍ΓͱΓ͸BKBY΍XFCTPDLFUͰ

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

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

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

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

  17. جૅٕज़ͷཱ֬ ‣ ϒϥ΢βͷؔ࿈"1*ͷ੔උ ‣ QVTI4UBUFͳͲ)JTUPSZ"1* ‣ +4ϥΠϒϥϦɾϑϨʔϜϫʔΫͷීٴ ‣ ϧʔςΟϯάɺσʔλόΠϯσΟϯά౳ ‣

    ϊ΢ϋ΢ͷ஝ੵ ‣ +BWB4DSJQU࣮ߦͷߴ଎Խ ‣ +*5ίϯύΠϧɺϗοτεϙοτɺίϯύΠϧ࠷ద Խ
  18. ར༻͞ΕΔϑϨʔϜϫʔΫ ‣ ͦͷଞଟ਺ɻɻɻ ‣ 41"։ൃͰ࢖͑ΔϑϨʔϜϫʔΫ͸ແ਺ʹ͋Δ

  19. IUUQTBOHVMBSKTPSH

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

  21. )5.-FOIBODFEGPSXFCBQQ ‣ ΧελϜͷଐੑɺΧελϜͷཁૉΛ࢖ͬͯهड़͠ ͍ͯ͘ <html ng-app=“app”> <head> <script src=“angular.js”></script> </head>

    <body ng-controller=“MyCtrl”> <h1>{{title}}</h1> </body> </html>
  22. 41"։ൃʹదͨ͠ػೳηοτ ϧʔςΟϯά σʔλ όΠϯσΟϯά %*ίϯςφ σΟϨΫςΟϒ

  23. ϧʔςΟϯά

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

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

    <!-- ͕͜͜੾ΓସΘΔ --> </div>
  26. +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: '/' }); });
  27. ϧʔςΟϯά͸ͳͥඞཁ ‣ ແͯ͘΋ྑ͍ ‣ ը໘ͷಛఆͷঢ়ଶʹ֎෦͔ΒϦϯΫΛுΕΔ ‣ ΢ΣϒϖʔδͰͰ͖Δ͜ͱΛ41"Ͱ΋Մೳʹ

  28. σʔλόΠϯσΟϯά

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

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

    TDPQF \ʜ^ \ʜ^
  31. ίϯτϩʔϥͰείʔϓΛ࡞Δ <div ng-controller=“MyCtrl”> {{message}} </div> module.controller(‘MyCtrl’, function($scope) { $scope.message =

    ‘HelloWorld’; }); +BWB4DSJQU )5.- ‣ ςϯϓϨʔτΤϯδϯɺͰ͸ͳ͍
  32. +4ͷ஋͕ࣗಈతʹ%0.΁ ‣ είʔϓΛߋ৽͢ΔͱɺͦΕ͕%0.ʹࣗಈతʹ൓ө <div>{{message}}</div> $scope.message = ‘Hi guys’; +BWB4DSJQU )5.-

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

  34. σʔλόΠϯσΟϯάͷ༝དྷ ‣ ݩʑ͸σεΫτοϓ(6*Ͱ࢖ΘΕ͍ٕͯͨज़ ‣ $PDPB#JOEJOH.BD049 ‣ 81' 4JMWFSMJHIU8JOEPXT ! ‣

    ࠓͰ͸Ϟμϯ+4ϑϨʔϜϫʔΫͰ͸΄΅ඞਢͷػ ೳʹ ‣ ,OPDLPVUKT #BUNBOKT "OHVMBSKT 7VFKT
  35. K2VFSZతखଓ͖ॲཧ͔Βͷ୤٫ ‣ +4ͷίʔυ͕%0.πϦʔʹґଘ ‣ ن໛͕େ͖͘ͳΔͱϝϯς͕
 ೉͍͠ίʔυ͕Ͱ͖΍͍͢ ‣ 41"։ൃʹ͸͋·Γ޲͍͍ͯͳ͍ º

  36. %*ίϯςφ

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

    this.logger = new MyLogger(); }; var MyClass = function(logger) { this.logger = logger; };
  38. %*ίϯςφ ‣ %*ύλʔϯͰهड़ͨ͠ґଘΛ஫ೖͯ͘͠ΕΔίϯςφ ‣ ؀ڥʹΑͬͯγεςϜͷߏ੒Λม͑ΒΕΔ var MyClass = function(logger) {

    this.logger = logger; }; ͜͜ʹ͍͍ײ͡ͷ
 ΦϒδΣΫτΛ஫ೖ
  39. "OHVMBS+4ͷ%*ίϯςφ ‣ ಗ໊ؔ਺ͷԾҾ਺Ͱࢦఆͨ͠ΦϒδΣΫτΛࣗಈ తʹ஫ೖͯ͘͠ΕΔ var module = angular.module(‘app’, []); !

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

    … }; }); ! module.controller(‘MyCtrl’, function($scope, Hoge) { $scope.hoge = new Hoge(); } );
  41. σΟϨΫςΟϒ

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

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

  44. <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ىಈ
  45. એݴͯ͠ΈΔ ‣ IPHFཁૉʹରԠͯ͠ಈ࡞͢ΔσΟϨΫςΟϒΛએݴ var module = angular.module('app'); ! module.directive(‘hoge’, function()

    { return { restrict: ‘E’, link: function(scope, element, attrs) { // σΟϨΫςΟϒͷॳظԽॲཧΛॻ͘ element.css({color: ‘red’}); } }; });
  46. ࣮ࡍʹλάͱͯ͠࢖͑Δ ‣ "OHVMBS+4ΞϓϦ಺Ͱͦͷ··λάͱͯ͠࢖͑Δ <html ng-app=“app”> <head> … </head> <body> <hoge>Red

    Color Message</hoge> </body> </html>
  47. IUUQPOTFOJP 0OTFO6*Ͱͷར༻ྫ ‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ

  48. ·ͱΊ

  49. ·ͱΊ ‣ ͜͜਺೥41"։ൃ͕૿͍͑ͯΔ ‣ ΑΓࣗવͰ༏Εͨ69ΛఏڙͰ͖Δ ‣ 41"։ൃͰ͸"OHVMBS+4͕Α͘ར༻͞Ε͍ͯΔ ‣ 41"ͷͨΊͷػೳηοτ͕ἧ͍ͬͯΔ ‣

    ϧʔςΟϯάɺσʔλόΠϯσΟϯάɺ
 %*ίϯςφɺσΟϨΫςΟϒ
  50. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠