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

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

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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   ‣ ٱอాޫଇ
   ‣ ΞγΞϧגࣜձࣾॴଐ
   ‣ BLBJEBOBUPP
   ‣ 6*69σβΠφʔ݉

   ιϑτ΢ΣΞΤϯδχΞ
   ‣ )5.-&YQFSUKQΤΩεύʔτ
   

   View Slide

3. ޷ධൃചத
   

   View Slide

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

   View Slide

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

   View Slide

6. 41"ͱ͸
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. σεΫτοϓΞϓϦͷ

    69Λ΢Σϒ΁
    ‣ ैདྷ͔Β͋Δཁٻ
    ‣ 41"Ͱ͸ɺ63-ભҠʹΑΔ଴͕ͪ࣌ؒແ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. IUUQTBOHVMBSKTPSH
    

    View Slide

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

    View Slide

21. )5.-FOIBODFEGPSXFCBQQ
    ‣ ΧελϜͷଐੑɺΧελϜͷཁૉΛ࢖ͬͯهड़͠
    ͍ͯ͘
    
    
    
    
    
    {{title}}
    
    
    

    View Slide

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

    View Slide

23. ϧʔςΟϯά
    

    View Slide

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

    View Slide

25. )5.-ଆ
    ‣ OHWJFXଐੑͰɺϧʔςΟϯάର৅Λࢦఆ
    
    …
    
    ..
    
    
    
    

    View Slide

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: '/'
    });
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. %0.ͷมߋ͕ࣗಈతʹ+4΁
    ‣ ςΩετཝʹೖྗ͢Δͱࣗಈతʹείʔϓʹ൓ө
    
    console.log($scope.message);
    +BWB4DSJQU
    )5.-
    ςΩετཝʹೖྗ
    

    View Slide

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

    View Slide

35. K2VFSZతखଓ͖ॲཧ͔Βͷ୤٫
    ‣ +4ͷίʔυ͕%0.πϦʔʹґଘ
    ‣ ن໛͕େ͖͘ͳΔͱϝϯς͕

    ೉͍͠ίʔυ͕Ͱ͖΍͍͢
    ‣ 41"։ൃʹ͸͋·Γ޲͍͍ͯͳ͍
    º
    

    View Slide

36. %*ίϯςφ
    

    View Slide

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

    View Slide

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

    ΦϒδΣΫτΛ஫ೖ
    

    View Slide

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

    View Slide

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

    View Slide

41. σΟϨΫςΟϒ
    

    View Slide

42. σΟϨΫςΟϒ
    ‣ )5.-Λ֦ு͢Δଐੑ΍ཁૉ͸

    શͯσΟϨΫςΟϒͱͯ͠࡞੒͞Ε͍ͯΔ
    ‣ "OHVMBS+4ͷج൫ٕज़
    

    View Slide

43. )5.-Λ֦ு͢Δଐੑ΍ཁૉ͸

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

    View Slide

44. 
    
    HTML Contents
    
    
    
    
    
    σΟϨΫςΟϒͷ࢓૊Έ
    ‣ ॳظԽ࣌ʹ%0.πϦʔͷཁૉ΍ଐੑΛશͯḷͬͯߦ͖ɺ

    ରԠ͢ΔσΟϨΫςΟϒ͕ଘࡏ͢Ε͹ͦͷॳظԽ"1*Λݺͼग़͢
    OH$POUSPMMFSىಈ
    OH4IPXىಈ
    OH#JOEىಈ
    NZ&MFNFOUىಈ
    

    View Slide

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

    View Slide

46. ࣮ࡍʹλάͱͯ͠࢖͑Δ
    ‣ "OHVMBS+4ΞϓϦ಺Ͱͦͷ··λάͱͯ͠࢖͑Δ
    
    …
    
    Red Color Message
    
    
    

    View Slide

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

    View Slide

48. ·ͱΊ
    

    View Slide

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

    %*ίϯςφɺσΟϨΫςΟϒ
    

    View Slide

50. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide