広告管理画面における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. ɾେྔͷσʔλΛѻ͏ɻ ɾϨϙʔτσʔλͷάϥϑԽɻ ɾϞʔμϧͷىಈɾ̎ॏىಈɻ ɾ༧ࢉͳͲΛදࣔ͢Δҝɺ਺஋ͷදهͰ όά͕ग़Δͱக໋తɻ ɾւ֎ల։͍ͯ͠Δձࣾͷ৔߹ɺଟݴޠରԠɻ ޿ࠂ؅ཧը໘ͷಛ௃
14. ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ Ͱɺڞ௨Ͱ࢖͏ ComponentΛ෦඼Խͯ͠ ͓͚Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾAngularΛΠϯετʔϧ͠ ͨ࣌఺ͰKarmaͱE2EͷϥΠ ϒϥϦ͕ೖ͍ͬͯΔɻ ڞ௨ͷComponent Λ࡞͓͚ͬͯΔ ςετϑϨʔϜϫʔΫ͕ ॆ࣮ TypeScriptͰॻ͘ࣄͰݫີ ʹ஋ΛνΣοΫͰ͖Δ 1 3 2 AngularͷϝϦοτɾಛ௃
15. ؅ཧը໘ܥͷςϯϓϨʔτ͕ॆ࣮͍ͯ͠Δ https://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855 ɾσϑΥϧτͷػೳͰάϥϑඳըͳͲ͕Ͱ͖ΔɻσβΠϯ΋៉ྷͳ΋ͷ͕ଟ͍ɻ FUSE https://akveo.github.io/ng2-admin/articles/002-installation-guidelines/
16. 
    ޿ࠂ؅ཧը໘Ͱͷಋೖࣄྫ
17. ng2-adminΛ׆༻ͨ͠؅ཧը໘࡞੒ ▼ng2-adminͷಛ௃ ɾແྉͰ࢖༻Մೳɻ ɾAngularͱBootStrapͰग़དྷ͍ͯΔ؅ཧը໘ͷςϯϓϨʔτɻ ɾ๛෋ͳάϥϑͷඳըػೳ͕σϑΥϧτͰ࣮૷͞Ε͍ͯΔɻ ɾAngular4Ͱ΋࢖༻Մೳɻ※طʹ࣍ͷversionͷng2-admin΋ެ։͞Ε͍ͯΔɻ ɾଟݴޠରԠͷػೳ͕࣮૷͞Ε͍ͯΔɻ ɾmodal΍tableͳͲͷσβΠϯ΋๛෋ɻ
18. ʙ֤σΟϨΫτϦͷ໾ׂʙ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util Ajax௨৴ Cons tant ඞཁʹ Ԡͯ͡࢖͏ Base Service Http Service ܧঝ DI τʔΫϯͷੜ੒ ͳͲΛ୲͏ ڞ௨Ͱ࢖͏getɺpostͷ ॲཧ͕·ͱ·ͬͯΔ Ϩεϙϯεσʔλͷ Ճ޻΍Ϩϙʔτ ͷܭࢉͳͲ σʔλͷड͚౉͠΍ ϋϯυϦϯά Common Component Pipe ·ͨ͸ ͳͲ
19. AngularͷσΟϨΫτϦઆ໌ ɾcomponent Component͸جຊతʹ͸σʔλͷड͚౉͠΍ϋϯυϦϯάɻ ɾconstant ఆ਺ͳͲͷఆٛ஋Λ·ͱΊΔɻ ɾentity ஋ͷड͚౉͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTO΍EntityΈ͍ͨͳ΋ͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻτʔΫϯͷੜ੒ͳͲ΋ߦ͏ɻ
20. ɾutil ϨεϙϯεσʔλͷՃ޻΍ϨϙʔτͷܭࢉͳͲ ɾCommonComponent ڞ௨Ͱ࢖͍·Θͦ͠͏ͳComponentͳͲ͸ɺ͜ͷσΟϨΫτϦ಺ʹ഑ஔ͢Δɻ ྫɿ೔෇બ୒ͷϓϧμ΢ϯͳͲɻ ɾଟݴޠରԠͷ࢓૊Έ en.jsonͱja.jsonͰ֤Ωʔʹରͯ͠ɺఆٛ஋Λઃఆ͢Δ AngularͷσΟϨΫτϦઆ໌
21. ʙଟݴޠରԠͷ࢓૊Έʙ ɾಉ͡Ωʔ໊Ͱ֤ݴޠͷ߹Θͤͯ಺༰Λఆٛ͢ Δ ɾݴޠͷ൑ผ͸local storageͷlocaleͰ൑ఆͯ͠ ͍Δ
22. Collection ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ1 HTML CSS TypeScript ίϯϙʔωϯτ2 HTML CSS TypeScript ίϯϙʔωϯτ3 HTML CSS TypeScript
23. ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ڞ௨ίϯϙʔωϯτ ඞཁʹ Ԡͯ͡࢖͏
24. 
    6OJUςετͷಋೖࣄྫ
25. KarmaɺJasmineͷ֓ཁ ɾKarmaͱ͸ ϒϥ΢β্Ͱ ୯ମςετΛ࣮ߦ͢ΔͨΊͷςετϥϯ φʔͰ͢ɻ ςετΛ࣮ߦ͢Δ͚ͩͰͳ͘ϑΝΠϧͷมߋ؂ࢹ΍݁ ՌͷϨϙʔτΛग़ྗͯ͘͠ΕͨΓͱ୯ମςετʹඞཁͳ ػೳ͕Ұ௨ΓͦΖ͍ͬͯ·͢ɻ ಛఆͷϑϨʔϜϫʔϜ(AngularʹݶΒͣ)ʹґଘ͓ͯ͠ Βͣ൚༻తʹ࢖͑ΔπʔϧͰɺϓϥάΠϯΛ࢖ͬͨػೳ ͷ֦ு͕ڧྗͰ͢ɻ ɾjasmineͱ͸ JavaScript ༻ͷςεςΟϯάϑϨʔϜϫʔΫͰ͋Δɻ
26. ɾ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
27. ɾςετର৅ CompmentɺUtilपΓͱ͢Δɻ ςετͷ֓ཁઆ໌ get: ɾςʔϒϧ͕ͪΌΜͱɺඳը͞Ε͍ͯΔ͜ͱɻϞʔμϧ͕ىಈ͍ͯ͠Δ͜ͱɻ add ɿόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ update ɿݱঢ়ͷ஋͕ೖ͍ͬͯΔ͔ɺόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ deleteɿૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ ɾςετ؍఺ Compment ܭࢉॲཧ΍Πϯϓοτ஋ͱΞ΢τϓοτ஋͕૝ఆ௨Γ͔ʁ Util ϞοΫ: ʮΦϒδΣΫτͷϝιου͕Ͳ͏ݺ͹ΕͯԿΛฦ͔͢ʯͱ͍͏ΠϯλϑΣʔε΋ؚΊͨςετͷͨΊʹ࢖͏ ελϒ: ςετΛεϜʔζʹߦ͏ͨΊʹʮ͋ΔΦϒδΣΫτͷϝιου͕ݺ͹ΕͨΒɺ͋Δ໭Γ஋Λฦ͢ʯͨΊʹ࢖͏ ɾϞοΫͱελϒʹ͍ͭͯ
28. Componentͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util Ajax௨৴ Cons tant Base Service http Service ܧঝ DI Service Mock DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε ·ͨ͸ ͳͲ
29. ·ͨ͸ ͳͲ Utilͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util Ajax௨৴ Cons tant Base Service http Service ܧঝ DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε
30. ςετͷॻ͖ํɾ࣮ߦํ๏ $ npm testΛ࣮ߦ͢Δͱ ͍ͭ͘ςετ͕੒ޭ ͯ͠ɺͲ͜Ͱམͪͨ ͔͕Θ͔Δɻ
31. ςετͷॻ͖ํɾ࣮ߦํ๏ ɾkarma.conf.jsͷઃఆΛม͑ͯɺ$ npm testΛ࣮ߦ͢Δͱ ɾcoverage/Chrome 61.0.3163 (Mac OS X 10.10.5) ഑Լʹindex.html͕Ͱ͖ΔͷͰɺ͜ΕΛϒ ϥ΢βͰݟΔͱΧόϨοδ͕ݟΕΔ
32. ςετͷॻ͖ํɾ࣮ߦํ๏ ΧόϨοδͷݟํ ֤σΟϨΫτϦ͝ͱ ͷΧόϨοδ function͝ͱͷΧό Ϩοδ ྻ͝ͱʹsortͱ͔΋ Ͱ͖Δ
33. ςετͷॻ͖ํɾ࣮ߦํ๏ @NgModule describe() beforeEach() it() it() ςετର৅Ϋϥεʹґଘ͠ ͍ͯΔModuleΛఆٛ ςετ࣮ߦલʹલॲ ཧΛఆٛ ֤֬ೝ߲໨಺ ༰Λఆٛ ςετέʔεΛఆٛ expect() expect() expect() expect() ςετશମͷએݴ