広告管理画面におけるAngularのメリット・導入事例

Transcript

1. 鈴木孝之 2017/11/02 ޿告管理ը面におけるAngular4の メリットɾ導入事例 { { } }

2. "HFOEB "OHVMBSͷ֓ཁ
   ޿ࠂ؅ཧը໘Ͱͷ"OHVMBSͷ༏Ґੑ
   ޿ࠂ؅ཧը໘Ͱͷಋೖࣄྫ
   
   
   
   ޿ࠂ؅ཧը໘ͷࣄྫ
   
   
   
   6OJUςετͷࣄྫ

3. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥5݄ʹ ϑϦʔϥϯεʹͳΓɺىۀ४උதɻ ɾݱࡏ͸ɺԭೄͷΪʔΫϋ΢εͱؔ౦ۙลΛத৺ʹ׆ಈ͠ɺ

   ىۀ४උதɻ ◆झຯ ϚϥιϯେձɺίεϓϨɺԻָϥΠϒɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP Symfony2,CakePHP3,Laravel5 ɾJavaScript Angular1,2,4,backbone.js ɾJava

4. 0.ࣗݾ঺հ ΪʔΫϋ΢εͱ͸ɺओʹΤϯδχΞ΍ϓϩάϥ ϚʔΛ৬छͱ͢Δਓ΍ɺWeb͕޷͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋ΢εͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ΋͠·͢ʂ

5. "OHVMBSͷ֓ཁ

6. 1.Angular4ͷ֓ཁ ɾAngular4͸ɺGoogle͕։ൃΛओಋ͢ΔʮϞμϯWebʯͷͨΊͷΞ ϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫɻ ɾAngularJSͱݺ͹Ε͍ͯͨόʔδϣϯ1ʢAngularJS 1ʣ͔Βɺόʔ δϣϯ2Ͱେ͖͘มߋ͞ΕͯɺҎ߱͸Angularͱݺ͹Ε͍ͯ·͢ɻ ɾ2017೥3݄ʹϦϦʔεɻAngular͸ࠓޙɺ͓͓ΉͶ6Χ݄͝ͱͷϝ δϟʔΞοϓσʔτ༧ఆ͕Ξφ΢ϯε͞Ε͍ͯΔɻ ࠓޙ͸֤όʔδϣϯ͸ɺҎલͷϦϦʔεͱԼҐޓ׵ੑ͕͋Δͱ໿ଋ͞ Ε͍ͯ·͢ɻ

   ɾv4͸௕ظαϙʔτର৅ɺ2018೥10݄·Ͱ1೥൒ɻ(LTS) v4͸Angular͕ఏڙ͢Δ࠷ॳͷLTSͱͳΔ ɾAngular1ܥͱ͸΄΅ผ෺ɻɻ

7. ݬͷόʔδϣϯ3 ɾόʔδϣϯ3Λඈ͹ͨ͠ཧ༝͸@angular/routerͷӨڹɻ ͜ͷύοέʔδ͚ͩطʹόʔδϣϯ3.3·Ͱ্͕͍ͬͯͯɺ ࠞཚ͕ى͖ͦ͏ͩͬͨͷͰangularࣗମͷόʔδϣϯΛ4ʹ ͋͛ͨɻ

8. Angular5͸γϯϓϧԽͱ εϐʔυʹ஫ྗ༧ఆ ᶃAngularΞϓϦέʔγϣϯͷίϯύΠϧΛΑΓ γϯϓϧʹ͢ΔɻJITίϯύΠϥ͚ͩͰͳ͘AHTί ϯύΠϥʢA head of timeɿࣄલίϯύΠϥʣΛ ࠾༻͕ͨ͠ɺ͜ͷ2͕ͭ͋Δͱࠞཚ͢Δ͜ͱ΋͋ Δɻࠓޙ͸AHTίϯύΠϥΛσϑΥϧτʹ͢Δ͜

   ͱͰϏϧυͷखॱΛҰຊԽ͠ɺ༨ܭͳ࡞ۀΛݮΒ ͍ͯͭ͘͠΋Γͩɻ ᶄεϐʔυͱαΠζ΁ͷ஫ྗɻMaterial΍IonicΛ ར༻ͨ͠ͱ͖ͳͲͰ΋࠷దʹѻ͑ΔΑ͏ʹ͢Δɻ

9. ֶशίετߴ͍ ֶशίετ௿͍ ॏྔͰϑϧελοΫ ܰྔͰ൚༻ੑ͋Γ ֤ϑϨʔϜϫʔΫͷൺֱ

10. ੈք ೔ຊ const searchCondition = { start_time:"2016-01-01", end_time:"2016-12-31", location: "world",

    }; ֤ϑϨʔϜϫʔΫͷݕࡧ਺ൺֱ const searchCondition = { start_time:"2016-01-01", end_time:"2016-12-31", location: "japan", };

11. ͓͢͢ΊͷIDE WebStorm ɾ΢Σϒ੍࡞ʹ͸WebStorm͕͓קΊʂ ࢖͍͜ͳͤ͹ૢ࡞͕ര଎ʹͳΔػೳͷ·ͱΊ https://ics.media/entry/11642 ɾμ΢ϯϩʔυ https://www.jetbrains.com/webstorm/

12. ޿ࠂ؅ཧը໘ େن໛։ൃ Ͱͷ "OHVMBSͷ༏Ґੑ

13. ʙDSPͱ͸ʙ AD SSP DSP1 DSP3 DSP2 ϝσΟΞ RTB CPMΦʔΫγϣϯ DSP1

    80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴

14. ʙAdMatrixDSPͰߦ͍ͬͯΔࣄʙ AD SSP AdMatrix DSP ϝσΟΞ CPMΦʔΫγϣϯ DSP1 80ԁ DSP2

    110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴ 䡧؅ཧը໘Ͱओʹߦ͏ૢ࡞ ɾେྔͷ޿ࠂϨϙʔτͷ֬ೝ ɾ޿ࠂͷ࡞੒ɾฤू ɾ഑৴ϢʔβͷλʔήςΟϯά ͳͲ RTB

15. ɾେྔͷσʔλΛѻ͏ɻ ɾϨϙʔτσʔλͷάϥϑԽɻ ɾϞʔμϧͷىಈɾ̎ॏىಈɻ ɾ༧ࢉͳͲΛදࣔ͢Δҝɺ਺஋ͷදهͰ όά͕ग़Δͱக໋తɻ ɾւ֎ల։͍ͯ͠Δձࣾͷ৔߹ɺଟݴޠରԠɻ ޿ࠂ؅ཧը໘ͷಛ௃

16. ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ Ͱɺڞ௨Ͱ࢖͏ ComponentΛ෦඼Խͯ͠ ͓͚Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾAngularΛΠϯετʔϧ͠ ͨ࣌఺ͰKarmaͱE2EͷϥΠ

    ϒϥϦ͕ೖ͍ͬͯΔɻ ڞ௨ͷComponent Λ࡞͓͚ͬͯΔ ςετϑϨʔϜϫʔΫ͕ ॆ࣮ TypeScriptͰॻ͘ࣄͰݫີ ʹ஋ΛνΣοΫͰ͖Δ 1 3 2 AngularͷϝϦοτɾಛ௃

17. ؅ཧը໘ܥͷςϯϓϨʔτ͕ॆ࣮͍ͯ͠Δ https://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855 ɾσϑΥϧτͷػೳͰάϥϑඳըͳͲ͕Ͱ͖ΔɻσβΠϯ΋៉ྷͳ΋ͷ͕ଟ͍ɻ FUSE https://akveo.github.io/ng2-admin/articles/002-installation-guidelines/

18. 
    ޿ࠂ؅ཧը໘Ͱͷಋೖࣄྫ

19. ng2-adminΛ׆༻ͨ͠؅ཧը໘࡞੒ ▼ng2-adminͷಛ௃ ɾແྉͰ࢖༻Մೳɻ ɾAngularͱBootStrapͰग़དྷ͍ͯΔ؅ཧը໘ͷςϯϓϨʔτɻ ɾ๛෋ͳάϥϑͷඳըػೳ͕σϑΥϧτͰ࣮૷͞Ε͍ͯΔɻ ɾAngular4Ͱ΋࢖༻Մೳɻ※طʹ࣍ͷversionͷng2-admin΋ެ։͞Ε͍ͯΔɻ ɾଟݴޠରԠͷػೳ͕࣮૷͞Ε͍ͯΔɻ ɾmodal΍tableͳͲͷσβΠϯ΋๛෋ɻ

20. ʙ֤σΟϨΫτϦͷ໾ׂʙ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util

    Ajax௨৴ Cons tant ඞཁʹ Ԡͯ͡࢖͏ Base Service Http Service ܧঝ DI τʔΫϯͷੜ੒ ͳͲΛ୲͏ ڞ௨Ͱ࢖͏getɺpostͷ ॲཧ͕·ͱ·ͬͯΔ Ϩεϙϯεσʔλͷ Ճ޻΍Ϩϙʔτ ͷܭࢉͳͲ σʔλͷड͚౉͠΍ ϋϯυϦϯά Common Component Pipe ·ͨ͸ ͳͲ

21. AngularͷσΟϨΫτϦઆ໌ ɾcomponent Component͸جຊతʹ͸σʔλͷड͚౉͠΍ϋϯυϦϯάɻ ɾconstant ఆ਺ͳͲͷఆٛ஋Λ·ͱΊΔɻ ɾentity ஋ͷड͚౉͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTO΍EntityΈ͍ͨͳ΋ͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻτʔΫϯͷੜ੒ͳͲ΋ߦ͏ɻ

22. ɾutil ϨεϙϯεσʔλͷՃ޻΍ϨϙʔτͷܭࢉͳͲ ɾCommonComponent ڞ௨Ͱ࢖͍·Θͦ͠͏ͳComponentͳͲ͸ɺ͜ͷσΟϨΫτϦ಺ʹ഑ஔ͢Δɻ ྫɿ೔෇બ୒ͷϓϧμ΢ϯͳͲɻ ɾଟݴޠରԠͷ࢓૊Έ en.jsonͱja.jsonͰ֤Ωʔʹରͯ͠ɺఆٛ஋Λઃఆ͢Δ AngularͷσΟϨΫτϦઆ໌

23. ʙଟݴޠରԠͷ࢓૊Έʙ ɾಉ͡Ωʔ໊Ͱ֤ݴޠͷ߹Θͤͯ಺༰Λఆٛ͢ Δ ɾݴޠͷ൑ผ͸local storageͷlocaleͰ൑ఆͯ͠ ͍Δ

24. Collection ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ1 HTML CSS TypeScript ίϯϙʔωϯτ2 HTML CSS TypeScript

    ίϯϙʔωϯτ3 HTML CSS TypeScript

25. ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ڞ௨ίϯϙʔωϯτ ඞཁʹ

    Ԡͯ͡࢖͏

26. 
    6OJUςετͷಋೖࣄྫ

27. KarmaɺJasmineͷ֓ཁ ɾKarmaͱ͸ ϒϥ΢β্Ͱ ୯ମςετΛ࣮ߦ͢ΔͨΊͷςετϥϯ φʔͰ͢ɻ ςετΛ࣮ߦ͢Δ͚ͩͰͳ͘ϑΝΠϧͷมߋ؂ࢹ΍݁ ՌͷϨϙʔτΛग़ྗͯ͘͠ΕͨΓͱ୯ମςετʹඞཁͳ ػೳ͕Ұ௨ΓͦΖ͍ͬͯ·͢ɻ ಛఆͷϑϨʔϜϫʔϜ(AngularʹݶΒͣ)ʹґଘ͓ͯ͠ Βͣ൚༻తʹ࢖͑ΔπʔϧͰɺϓϥάΠϯΛ࢖ͬͨػೳ

    ͷ֦ு͕ڧྗͰ͢ɻ ɾjasmineͱ͸ JavaScript ༻ͷςεςΟϯάϑϨʔϜϫʔΫͰ͋Δɻ

28. ɾKarmaͷશମߏ੒ Karma͸4ͭͷେ͖ͳػೳʢϓϥάΠϯʣ͕ଘࡏ͠·͢ɻ FrameworkɺLauncherɺPreprocessorɺReporter NodeJS Karma karma start coverage Chrome Webserver

    port:9876 Karma Reporter karma- coverage Framework karma-jasmine Preprocessor Files ςετର৅jsίʔυ Launcher karma-chrome- launcher karma.conf.js Brower ςετίʔυ.ts Jasmine karma-typescript- preprocessor Console ಡΈࠐΈ ࣮ߦ Chrome࣮ߦ αʔόΛཱͯΔ ಡΈࠐΈ ಡΈࠐΈ ࣮ߦ ࣮ߦ ಡΈࠐΈ Karma ࣮ߦ ग़ྗ URLಡΈࠐΈ WebSocket https://qiita.com/howdy39/items/b9d704e7f84053924da3

29. ɾςετର৅ CompmentɺUtilपΓͱ͢Δɻ ςετͷ֓ཁઆ໌ get: ɾςʔϒϧ͕ͪΌΜͱɺඳը͞Ε͍ͯΔ͜ͱɻϞʔμϧ͕ىಈ͍ͯ͠Δ͜ͱɻ add ɿόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ update ɿݱঢ়ͷ஋͕ೖ͍ͬͯΔ͔ɺόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ deleteɿૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔

    ɾςετ؍఺ Compment ܭࢉॲཧ΍Πϯϓοτ஋ͱΞ΢τϓοτ஋͕૝ఆ௨Γ͔ʁ Util ϞοΫ: ʮΦϒδΣΫτͷϝιου͕Ͳ͏ݺ͹ΕͯԿΛฦ͔͢ʯͱ͍͏ΠϯλϑΣʔε΋ؚΊͨςετͷͨΊʹ࢖͏ ελϒ: ςετΛεϜʔζʹߦ͏ͨΊʹʮ͋ΔΦϒδΣΫτͷϝιου͕ݺ͹ΕͨΒɺ͋Δ໭Γ஋Λฦ͢ʯͨΊʹ࢖͏ ɾϞοΫͱελϒʹ͍ͭͯ

30. Componentͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util

    Ajax௨৴ Cons tant Base Service http Service ܧঝ DI Service Mock DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε ·ͨ͸ ͳͲ

31. ·ͨ͸ ͳͲ Utilͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service

    Entity Util Ajax௨৴ Cons tant Base Service http Service ܧঝ DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε

32. ςετͷॻ͖ํɾ࣮ߦํ๏ $ npm testΛ࣮ߦ͢Δͱ ͍ͭ͘ςετ͕੒ޭ ͯ͠ɺͲ͜Ͱམͪͨ ͔͕Θ͔Δɻ

33. ςετͷॻ͖ํɾ࣮ߦํ๏ ɾkarma.conf.jsͷઃఆΛม͑ͯɺ$ npm testΛ࣮ߦ͢Δͱ ɾcoverage/Chrome 61.0.3163 (Mac OS X 10.10.5)

    ഑Լʹindex.html͕Ͱ͖ΔͷͰɺ͜ΕΛϒ ϥ΢βͰݟΔͱΧόϨοδ͕ݟΕΔ

34. ςετͷॻ͖ํɾ࣮ߦํ๏ ΧόϨοδͷݟํ ֤σΟϨΫτϦ͝ͱ ͷΧόϨοδ function͝ͱͷΧό Ϩοδ ྻ͝ͱʹsortͱ͔΋ Ͱ͖Δ

35. ςετͷॻ͖ํɾ࣮ߦํ๏ @NgModule describe() beforeEach() it() it() ςετର৅Ϋϥεʹґଘ͠ ͍ͯΔModuleΛఆٛ ςετ࣮ߦલʹલॲ ཧΛఆٛ

    ֤֬ೝ߲໨಺ ༰Λఆٛ ςετέʔεΛఆٛ expect() expect() expect() expect() ςετશମͷએݴ